From 226d5e5f0b3554acd62d08e73530de9c64c7cd6c Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Fri, 27 May 2022 15:20:27 -0700
Subject: [PATCH] support message styling

---
 net/web/package.json                          |  1 +
 .../User/Conversation/AddTopic/AddTopic.jsx   | 28 +++++++-
 .../Conversation/AddTopic/useAddTopic.hook.js | 32 ++++-----
 .../User/Conversation/TopicItem/TopicItem.jsx |  3 +-
 .../TopicItem/useTopicItem.hook.js            | 15 +++-
 net/web/yarn.lock                             | 68 ++++++++++++++-----
 6 files changed, 108 insertions(+), 39 deletions(-)

diff --git a/net/web/package.json b/net/web/package.json
index 8353e419..08dd6396 100644
--- a/net/web/package.json
+++ b/net/web/package.json
@@ -9,6 +9,7 @@
     "antd": "^4.19.1",
     "base-64": "^1.0.0",
     "react": "^17.0.2",
+    "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
     "react-easy-crop": "^4.1.4",
     "react-player": "^2.10.0",
diff --git a/net/web/src/User/Conversation/AddTopic/AddTopic.jsx b/net/web/src/User/Conversation/AddTopic/AddTopic.jsx
index 0dd17dc4..3aaec1f2 100644
--- a/net/web/src/User/Conversation/AddTopic/AddTopic.jsx
+++ b/net/web/src/User/Conversation/AddTopic/AddTopic.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useRef } from 'react';
 import ReactPlayer from 'react-player'
+import { SketchPicker } from "react-color";
 import { Button, Dropdown, Input, Tooltip, Menu } from 'antd';
 import { AddTopicWrapper, BusySpin } from './AddTopic.styled';
 import { Carousel } from '../../../Carousel/Carousel';
@@ -52,6 +53,24 @@ export function AddTopic() {
     </Menu>
   );
 
+  const picker = (
+    <Menu style={{ backgroundColor: 'unset', boxShadow: 'unset' }}>
+      <SketchPicker disableAlpha={true}
+        color={state.textColor}
+        onChange={(color) => {
+          actions.setTextColor(color.hex);
+        }} />
+    </Menu>
+  );
+
+  const sizer = (
+    <Menu>
+      <Menu.Item key={8}><div onClick={() => actions.setTextSize(8)}>Small</div></Menu.Item>
+      <Menu.Item key={14}><div onClick={() => actions.setTextSize(14)}>Medium</div></Menu.Item>
+      <Menu.Item key={20}><div onClick={() => actions.setTextSize(20)}>Large</div></Menu.Item>
+    </Menu>
+  );
+
   const onSend = () => {
     if (state.messageText || state.assets.length) {
       actions.addTopic();
@@ -92,6 +111,7 @@ export function AddTopic() {
         </div>
         <div class="input">
           <Input.TextArea placeholder="Message" autoSize={{ minRows: 2, maxRows: 6 }} onKeyPress={onKey}
+            style={{ color: state.textColor, fontSize: state.textSize }}
             onChange={(e) => actions.setMessageText(e.target.value)} value={state.messageText} />
         </div>
         <div class="buttons">
@@ -101,10 +121,14 @@ export function AddTopic() {
             </Dropdown>
           </div>
           <div class="option">
-            <Button icon={<FontSizeOutlined />} size="large" />
+            <Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topRight">
+              <Button icon={<FontSizeOutlined />} size="large" />
+            </Dropdown>
           </div>
           <div class="option">
-            <Button icon={<FontColorsOutlined />} size="large" />
+            <Dropdown overlay={picker} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="topRight">
+              <Button icon={<FontColorsOutlined />} size="large" />
+            </Dropdown>
           </div>
           <div class="send">
             <Button icon={<SendOutlined />} onClick={onSend} size="large" />
diff --git a/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js b/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js
index bf389265..86d79ca4 100644
--- a/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js
+++ b/net/web/src/User/Conversation/AddTopic/useAddTopic.hook.js
@@ -8,9 +8,10 @@ export function useAddTopic() {
   const [state, setState] = useState({
     assets: [],
     messageText: null,
-    messageColor: null,
-    messageSize: null,
-    backgroundColor: null,
+    textColor: '#444444',
+    textColorSet: false,
+    textSize: 14,
+    textSizeSet: false,
     busy: false,
   });
 
@@ -64,34 +65,31 @@ export function useAddTopic() {
       updateAsset(index, { position });
     },
     removeAsset: (idx) => { removeAsset(idx) },
+    setTextColor: (value) => {
+      updateState({ textColorSet: true, textColor: value });
+    },
     setMessageText: (value) => {
       updateState({ messageText: value });
     },
-    setMessageColor: (value) => {
-      updateState({ messageColor: value });
-    },
-    setMessageWeight: (value) => {
-      updateState({ messageWeight: value });
-    },
-    setMessageSize: (value) => {
-      updateState({ messageSize: value });
-    },
-    setBackgroundColor: (value) => {
-      updateState({ backgroundColor: value });
+    setTextSize: (value) => {
+      updateState({ textSizeSet: true, textSize: value });
     },
     addTopic: async () => {
       if (!state.busy) {
         updateState({ busy: true });
         try {
-          let message = { text: state.messageText, textColor: state.messageColor,
-              textSize: state.messageSize, backgroundColor: state.backgroundColor };
+          let message = {
+            text: state.messageText,
+            textColor: state.textColorSet ? state.textColor : null,
+            textSize: state.textSizeSet ? state.textSize : null, 
+          };
           if (cardId) {
             await card.actions.addChannelTopic(cardId, channelId, message, state.assets);
           }
           else {
             await channel.actions.addChannelTopic(channelId, message, state.assets);
           }
-          updateState({ messageText: null, messageColor: null, messageSize: null, backgroundColor: null, assets: [] });
+          updateState({ messageText: null, textColor: '#444444', textColorSet: false, textSize: 12, textSizeSet: false, assets: [] });
         }
         catch(err) {
           window.alert(err);
diff --git a/net/web/src/User/Conversation/TopicItem/TopicItem.jsx b/net/web/src/User/Conversation/TopicItem/TopicItem.jsx
index 95c1ede7..7f3acfd7 100644
--- a/net/web/src/User/Conversation/TopicItem/TopicItem.jsx
+++ b/net/web/src/User/Conversation/TopicItem/TopicItem.jsx
@@ -72,6 +72,7 @@ export function TopicItem({ host, topic }) {
       return (
         <div class="editing">
           <Input.TextArea style={{ resize: 'none' }} defaultValue={state.message?.text} placeholder="message"
+            style={{ color: state.textColor, fontSize: state.textSize }}
             onChange={(e) => actions.setEdit(e.target.value)} rows={3} bordered={false}/>
           <div class="controls">
           <Space>
@@ -82,7 +83,7 @@ export function TopicItem({ host, topic }) {
         </div>
       );
     }
-    return <div>{ state.message?.text }</div>
+    return <div style={{ color: state.textColor, fontSize: state.textSize }}>{ state.message?.text }</div>
   }
 
   return (
diff --git a/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js b/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
index fa86e36a..fb65beb5 100644
--- a/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
+++ b/net/web/src/User/Conversation/TopicItem/useTopicItem.hook.js
@@ -18,6 +18,8 @@ export function useTopicItem(topic) {
     assets: [],
     editing: false,
     busy: false,
+    textColor: '#444444',
+    textSize: 14,
   });
 
   const profile = useContext(ProfileContext);
@@ -35,6 +37,9 @@ export function useTopicItem(topic) {
       owner = true;
     }
 
+    let textColor = '#444444';
+    let textSize = 14;
+
     if (!topic?.data) {
       console.log("invalid topic:", topic);
       return;
@@ -47,6 +52,12 @@ export function useTopicItem(topic) {
     if (status === 'confirmed') {
       try {
         message = JSON.parse(data);
+        if (message.textColor != null) {
+          textColor = message.textColor;
+        }
+        if (message.textSize != null) {
+          textSize = message.textSize;
+        }
         if (message.assets) {
           assets = message.assets;
           delete message.assets;
@@ -64,11 +75,11 @@ export function useTopicItem(topic) {
       const { guid, created } = topic.data.topicDetail;
       if (profile.state.profile.guid == guid) {
         const { name, handle, imageUrl } = profile.actions.getProfile();
-        updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created, owner });
+        updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created, owner, textColor, textSize });
       }
       else {
         const { name, handle, imageUrl } = card.actions.getCardProfileByGuid(guid);
-        updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created, owner });
+        updateState({ name, handle, imageUrl, status, message, transform, assets, ready, created, owner, textColor, textSize });
       }
     }
   }, [profile, card, conversation, topic]);
diff --git a/net/web/yarn.lock b/net/web/yarn.lock
index c324dc8c..5927bfc9 100644
--- a/net/web/yarn.lock
+++ b/net/web/yarn.lock
@@ -1237,6 +1237,11 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz"
@@ -1933,11 +1938,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/resize-observer-browser@^0.1.6":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz#294aaadf24ac6580b8fbd1fe3ab7b59fe85f9ef3"
-  integrity sha512-G9eN0Sn0ii9PWQ3Vl72jDPgeJwRWhv2Qk/nQkJuWmRmOB4HX3/BhD5SE1dZs/hzPZL/WKnvF0RHdTSG54QJFyg==
-
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz"
@@ -5863,7 +5863,7 @@ lines-and-columns@^1.1.6:
 
 load-script@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  resolved "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz"
   integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
 
 loader-runner@^4.2.0:
@@ -5924,6 +5924,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
@@ -5949,7 +5954,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -6001,6 +6006,11 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz"
@@ -6025,7 +6035,7 @@ memfs@^3.1.2, memfs@^3.4.1:
 
 memoize-one@^5.1.1:
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
 memoize-one@^6.0.0:
@@ -7174,7 +7184,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.10, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7631,6 +7641,19 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-dev-utils@^12.0.0:
   version "12.0.0"
   resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz"
@@ -7685,7 +7708,7 @@ react-error-overlay@^6.0.10:
 
 react-fast-compare@^3.0.1:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0:
@@ -7704,9 +7727,9 @@ react-lifecycles-compat@^3.0.4:
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
 react-player@^2.10.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.10.0.tgz#bd3e0f10ae756cc644efb14177a515d455d97e20"
-  integrity sha512-PccIqea9nxSHAdai6R+Yj9lp6tb2lyXWbaF6YVHi5uO4FiXYMKKr9rMXJrivwV5vXwQa65rYKBmwebsBmRTT3w==
+  version "2.10.1"
+  resolved "https://registry.npmjs.org/react-player/-/react-player-2.10.1.tgz"
+  integrity sha512-ova0jY1Y1lqLYxOehkzbNEju4rFXYVkr5rdGD71nsiG4UKPzRXQPTd3xjoDssheoMNjZ51mjT5ysTrdQ2tEvsg==
   dependencies:
     deepmerge "^4.0.0"
     load-script "^1.0.0"
@@ -7720,11 +7743,10 @@ react-refresh@^0.11.0:
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
 react-resize-detector@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-7.0.0.tgz#fbd46917ee905b7796c797aa6b301b454a6b9229"
-  integrity sha512-Xd1POfpVzH9O3F/xB/0xYy2ijtKjE/z7y4c/aJP593YSzhPy2vDhsNPjes+uQbgL1RezxJajQ679qPs8K5LAFw==
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-7.1.1.tgz"
+  integrity sha512-rU54VTstNzFLZAmMNHqt8xINjDWP7SQR05A2HUW0OGvl4vcrXzgaxrrqAY5tZMfkLkoYm5u0i0qGqCjdc2jyAA==
   dependencies:
-    "@types/resize-observer-browser" "^0.1.6"
     lodash "^4.17.21"
 
 react-router-dom@^6.2.2:
@@ -7817,6 +7839,13 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 readable-stream@^2.0.1:
   version "2.3.7"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
@@ -8762,6 +8791,11 @@ timsort@^0.3.0:
   resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"