From 8447dcd6ee8316d9849bdce2ebee6c4a80019cb6 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Sun, 3 Mar 2024 17:52:53 -0800
Subject: [PATCH] styling edit subject modal

---
 .../src/session/account/profile/Profile.jsx   |  6 +--
 .../conversation/addTopic/AddTopic.jsx        | 40 +++++++++----------
 .../conversation/addTopic/useAddTopic.hook.js | 10 +++++
 net/web/src/session/details/Details.jsx       | 36 ++++++++---------
 .../details/editSubject/EditSubject.jsx       | 11 ++++-
 .../details/editSubject/EditSubject.styled.js | 14 +++++++
 .../src/session/details/useDetails.hook.js    |  5 ++-
 todo                                          |  7 +++-
 8 files changed, 81 insertions(+), 48 deletions(-)

diff --git a/net/web/src/session/account/profile/Profile.jsx b/net/web/src/session/account/profile/Profile.jsx
index 3d0967ab..d4bcedfb 100644
--- a/net/web/src/session/account/profile/Profile.jsx
+++ b/net/web/src/session/account/profile/Profile.jsx
@@ -170,15 +170,15 @@ export function Profile({ closeProfile }) {
 
         <ProfileDetailsWrapper>
           <div className="title">{ state.strings.profileDetails }</div>
-          <div class="info">
+          <div className="info">
             <Input placeholder={state.strings.name} spellCheck="false" onChange={(e) => actions.setEditName(e.target.value)}
                 defaultValue={state.editName} autocapitalize="word" />
           </div>
-          <div class="info">
+          <div className="info">
             <Input placeholder={state.strings.location} spellCheck="false" onChange={(e) => actions.setEditLocation(e.target.value)}
                 defaultValue={state.editLocation} autocapitalize="word" />
           </div>
-          <div class="info">
+          <div className="info">
             <Input.TextArea placeholder={state.strings.description} onChange={(e) => actions.setEditDescription(e.target.value)}
                 spellCheck="false" defaultValue={state.editDescription} autoSize={{ minRows: 2, maxRows: 6 }} />
           </div>
diff --git a/net/web/src/session/conversation/addTopic/AddTopic.jsx b/net/web/src/session/conversation/addTopic/AddTopic.jsx
index 53b1734b..b5303842 100644
--- a/net/web/src/session/conversation/addTopic/AddTopic.jsx
+++ b/net/web/src/session/conversation/addTopic/AddTopic.jsx
@@ -10,7 +10,7 @@ import { BinaryFile } from './binaryFile/BinaryFile';
 import { Carousel } from 'carousel/Carousel';
 import { Gluejar } from '@charliewilco/gluejar'
 
-export function AddTopic({ contentKey, strings, menuStyle }) {
+export function AddTopic({ contentKey }) {
 
   const { state, actions } = useAddTopic(contentKey);
 
@@ -35,9 +35,9 @@ export function AddTopic({ contentKey, strings, menuStyle }) {
       catch (err) {
         console.log(err);
         modal.error({
-          title: <span style={menuStyle}>{strings.operationFailed}</span>,
-          content: <span style={menuStyle}>{strings.tryAgain}</span>,
-          bodyStyle: { borderRadius: 8, padding: 16, ...menuStyle },
+          title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
+          content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
+          bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
         });
       }
     }
@@ -126,63 +126,61 @@ export function AddTopic({ contentKey, strings, menuStyle }) {
         </div>
       )}
       <div className="message">
-        <Input.TextArea ref={msg} placeholder={strings.newMessage} spellCheck="true" autoSize={{ minRows: 2, maxRows: 6 }}
+        <Input.TextArea ref={msg} placeholder={state.strings.newMessage} spellCheck="true" autoSize={{ minRows: 2, maxRows: 6 }}
             enterkeyhint="send" onKeyDown={(e) => keyDown(e)} onChange={(e) => actions.setMessageText(e.target.value)}
             value={state.messageText} autocapitalize="none" />
       </div>
       <div className="buttons">
         { state.enableImage && (
-          <Tooltip placement="top" title={strings.attachImage}>
+          <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.attachImage}>
             <div className="button space" onClick={() => attachImage.current.click()}>
               <PictureOutlined />
             </div> 
           </Tooltip>
         )}
         { state.enableVideo && (
-          <Tooltip placement="top" title={strings.attachVideo}>
+          <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.attachVideo}>
             <div className="button space" onClick={() => attachVideo.current.click()}>
               <VideoCameraOutlined />
             </div> 
           </Tooltip>
         )}
         { state.enableAudio && (
-          <Tooltip placement="top" title={strings.attachAudio}>
+          <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.attachAudio}>
             <div className="button space" onClick={() => attachAudio.current.click()}>
               <SoundOutlined />
             </div> 
           </Tooltip>
         )}
-        <Tooltip placement="top" title={strings.attachFile}>
+        <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.attachFile}>
           <div className="button space" onClick={() => attachBinary.current.click()}>
             <FieldBinaryOutlined />
           </div> 
         </Tooltip>
         <div className="bar space" />
         <div className="button space">
-          <Tooltip placement="top" title={strings.fontColor}>
+          <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.fontColor}>
             <Dropdown overlay={picker} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="top">
               <FontColorsOutlined />
             </Dropdown>
           </Tooltip>
         </div>
         <div className="button space">
-          <Tooltip placement="top" title={strings.fontSize}>
+          <Tooltip placement="top" title={state.display === 'small' ? null : state.strings.fontSize}>
             <Dropdown overlay={sizer} overlayStyle={{ minWidth: 0 }} trigger={['click']} placement="top">
               <FontSizeOutlined />
             </Dropdown>
           </Tooltip>
         </div>
         <div className="end">
-          <Tooltip placement="top" title={strings.postMessage}>
-            <div className="button" onClick={addTopic}>
-              { state.busy && (
-                <Spin size="small" />
-              )}
-              { !state.busy && (
-                <SendOutlined />
-              )}
-            </div>
-          </Tooltip>
+          <div className="button" onClick={addTopic}>
+            { state.busy && (
+              <Spin size="small" />
+            )}
+            { !state.busy && (
+              <SendOutlined />
+            )}
+          </div>
         </div>
       </div>
     </AddTopicWrapper>
diff --git a/net/web/src/session/conversation/addTopic/useAddTopic.hook.js b/net/web/src/session/conversation/addTopic/useAddTopic.hook.js
index 165ff5b0..dee19312 100644
--- a/net/web/src/session/conversation/addTopic/useAddTopic.hook.js
+++ b/net/web/src/session/conversation/addTopic/useAddTopic.hook.js
@@ -1,5 +1,6 @@
 import { useContext, useState, useRef, useEffect } from 'react';
 import { ConversationContext } from 'context/ConversationContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { encryptBlock, encryptTopicSubject } from 'context/sealUtil';
 import Resizer from "react-image-file-resizer";
 
@@ -16,9 +17,13 @@ export function useAddTopic(contentKey) {
     textSize: 14,
     textSizeSet: false,
     busy: false,
+    display: null,
+    strings: {},
+    menuStyle: {},
   });
 
   const conversation = useContext(ConversationContext);
+  const settings = useContext(SettingsContext);
   const objects = useRef([]);
 
   const updateState = (value) => {
@@ -59,6 +64,11 @@ export function useAddTopic(contentKey) {
     return () => { clearObjects() };
   }, [contentKey]);
 
+  useEffect(() => {
+    const { display, strings, menuStyle } = settings.state;
+    updateState({ display, strings, menuStyle });
+  }, [settings.state]);
+
   useEffect(() => {
     const { enableImage, enableAudio, enableVideo } = conversation.state.channel?.data?.channelDetail || {};
     updateState({ enableImage, enableAudio, enableVideo });
diff --git a/net/web/src/session/details/Details.jsx b/net/web/src/session/details/Details.jsx
index 3ce2b83c..ba371fff 100644
--- a/net/web/src/session/details/Details.jsx
+++ b/net/web/src/session/details/Details.jsx
@@ -21,9 +21,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
     catch(err) {
       console.log(err);
       modal.error({
-        title: 'Failed to Set Conversation Member',
-        content: 'Please try again.',
-        bodyStyle: { padding: 16 },
+        title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
+        content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
+        bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
       });
     }
   }
@@ -35,9 +35,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
     catch(err) {
       console.log(err);
       modal.error({
-        title: 'Failed to Clear Conversation Member',
-        content: 'Please try again.',
-        bodyStyle: { padding: 16 },
+        title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
+        content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
+        bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
       });
     }
   }
@@ -63,9 +63,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
     }
     catch(err) {
       modal.error({
-        title: 'Failed to Delete Topic',
-        content: 'Please try again.',
-        bodyStyle: { padding: 16 },
+        title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
+        content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
+        bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
       });
     }
   }
@@ -91,9 +91,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
     }
     catch(err) {
       modal.error({
-        title: 'Failed to Leave Topic',
-        content: 'Please try again.',
-        bodyStyle: { padding: 16 },
+        title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
+        content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
+        bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
       });
     }
   }
@@ -105,9 +105,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
     }
     catch(err) {
       modal.error({
-        title: 'Failed to Update Subject',
-        content: 'Please try again.',
-        bodyStyle: { padding: 16 },
+        title: <span style={state.menuStyle}>{state.strings.operationFailed}</span>,
+        content: <span style={state.menuStyle}>{state.strings.tryAgain}</span>,
+        bodyStyle: { borderRadius: 8, padding: 16, ...state.menuStyle },
       });
     }
   };
@@ -224,9 +224,9 @@ export function Details({ closeDetails, closeConversation, openContact }) {
           markup={state.host} />
         </div>
       </div>
-      <Modal title="Edit Subject" centered visible={state.showEditSubject} footer={editSubjectFooter}
-          bodyStyle={{ padding: 16 }} onCancel={actions.clearEditSubject}>
-        <EditSubject subject={state.editSubject} setSubject={actions.setSubjectUpdate} />
+      <Modal centered visible={state.showEditSubject} closable={false} footer={null} bodyStyle={{borderRadius: 8, padding: 16, ...state.menuStyle}}>
+        <EditSubject subject={state.editSubject} cancelSubject={actions.clearEditSubject} saveSubject={saveSubject} setSubject={actions.setSubjectUpdate}
+            strings={state.strings} />
       </Modal>
       <Modal title="Edit Members" centered visible={state.showEditMembers} footer={editMembersFooter}
           bodyStyle={{ padding: 16 }} onCancel={actions.clearEditMembers}>
diff --git a/net/web/src/session/details/editSubject/EditSubject.jsx b/net/web/src/session/details/editSubject/EditSubject.jsx
index 8befcf04..48ef16a5 100644
--- a/net/web/src/session/details/editSubject/EditSubject.jsx
+++ b/net/web/src/session/details/editSubject/EditSubject.jsx
@@ -1,12 +1,19 @@
-import { Input } from 'antd';
+import { Input, Button } from 'antd';
 import { EditSubjectWrapper } from './EditSubject.styled';
 
-export function EditSubject({ subject, setSubject }) {
+export function EditSubject({ subject, setSubject, saveSubject, cancelSubject, strings }) {
 
   return (
     <EditSubjectWrapper>
+      <div className="title">Edit Subject</div>
+
       <Input placeholder="Subject (optional)" spellCheck="false" autocapitalize="word"
           value={subject} onChange={(e) => setSubject(e.target.value)} />
+
+      <div className="controls">
+        <Button key="back" onClick={cancelSubject}>{strings.cancel}</Button>
+        <Button key="save" type="primary" onClick={saveSubject}>{strings.save}</Button>
+      </div>
     </EditSubjectWrapper>
   );
 }
diff --git a/net/web/src/session/details/editSubject/EditSubject.styled.js b/net/web/src/session/details/editSubject/EditSubject.styled.js
index f0f56891..4e8e6c5c 100644
--- a/net/web/src/session/details/editSubject/EditSubject.styled.js
+++ b/net/web/src/session/details/editSubject/EditSubject.styled.js
@@ -5,4 +5,18 @@ export const EditSubjectWrapper = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
+  .title {
+    font-size: 1.2rem;
+    display: flex;
+    justify-content: center;
+    padding-bottom: 16px;
+  }
+
+  .controls {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16px;
+    padding-top: 16px;
+  }
 `
diff --git a/net/web/src/session/details/useDetails.hook.js b/net/web/src/session/details/useDetails.hook.js
index 86720375..cf66b66a 100644
--- a/net/web/src/session/details/useDetails.hook.js
+++ b/net/web/src/session/details/useDetails.hook.js
@@ -27,6 +27,7 @@ export function useDetails() {
 
     strings: {},
     display: 'small',
+    menuStyle: {},
     sealed: false,
     contentKey: null,
     seals: null,
@@ -73,8 +74,8 @@ export function useDetails() {
   }, [account.state.sealKey, conversation.state.channel?.data?.channelDetail]);
 
   useEffect(() => {
-    const { strings, display } = settings.state;
-    updateState({ strings, display });
+    const { menuStyle, strings, display } = settings.state;
+    updateState({ menuStyle, strings, display });
   }, [settings.state]);
 
   useEffect(() => {
diff --git a/todo b/todo
index c187a7be..faaffa32 100644
--- a/todo
+++ b/todo
@@ -1,9 +1,12 @@
 
 details:
-  - back button
   - dark style
   - translation
-  - action buttons
+  - action hints
+  - delete modal
+  - members modal
+  - leave modal
+  - subject modal
 
 calling:
   - dark style