styling add topic modal

net/web/src/constants/Colors.js

@@ -38,9 +38,10 @@ export const Colors = {
 };
 
 export const LightTheme = {
-  headerArea: '#f2f2f2',
+  headerArea: '#f0f0f0',
-  footerArea: '#f2f2f2',
+  footerArea: '#f0f0f0',
-  itemArea: '#f8f8f8',
+  modalArea: '#eeeeee',
+  itemArea: '#f4f4f4',
   inputArea: '#ffffff',
   hoverArea: '#efefef',
   noticeArea: '#8fbea7',
@@ -64,6 +65,7 @@ export const LightTheme = {
 export const DarkTheme = {
   headerArea: '#111111',
   footerArea: '#111111',
+  modalArea: '#444444',
   itemArea: '#222222',
   inputArea: '#000000',
   hoverArea: '#2f2f2f',

net/web/src/constants/Strings.js

@@ -14,6 +14,12 @@ export const en = {
   topics: 'Topics',
   unsetSealing: 'Unset Sealing Key',
   newTopic: 'New Topic', 
+
+  noConnected: 'No Connected Contacts',
+  subjectOptional: 'Subject (optional)',
+  members: 'Members',
+  sealedTopic: 'Sealed Topic',
+  start: 'Start', 
 };
 
 export const fr = {
@@ -32,5 +38,11 @@ export const fr = {
   topics: 'Sujets',
   unsetSealing: 'Clé de sécurité non définie',
   newTopic: 'Nouveau Sujet',
+
+  noConnected: 'Pas de Contacts Connecter',
+  subjectOptional: 'Sujet (optionnel)',
+  members: 'Membres',
+  sealedTopic: 'Sujet Sécurisé',
+  start: 'Commencer',
 };
 

net/web/src/context/useSettingsContext.hook.js

@@ -48,17 +48,17 @@ export function useSettingsContext() {
 
     const scheme = localStorage.getItem('color_scheme');
     if (scheme === 'dark') {
-      updateState({ theme: scheme, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.headerArea, color: DarkTheme.mainText } });
+      updateState({ theme: scheme, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
     }
     else if (scheme === 'light') {
-      updateState({ theme: scheme, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.headerArea, color: LightTheme.mainText } })
+      updateState({ theme: scheme, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } })
     }
     else {
       if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        updateState({ theme: null, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.headerArea, color: DarkTheme.mainText } });
+        updateState({ theme: null, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
       }
       else {
-        updateState({ theme: null, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.headerArea, color: LightTheme.mainText } });
+        updateState({ theme: null, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } });
       }
     }
 
@@ -80,19 +80,19 @@ export function useSettingsContext() {
   const actions = {
     setDarkTheme: () => {
       localStorage.setItem('color_scheme', 'dark');
-      updateState({ theme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.headerArea, color: DarkTheme.mainText } });
+      updateState({ theme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
     },
     setLightTheme : () => {
       localStorage.setItem('color_scheme', 'light');
-      updateState({ theme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.headerArea, color: LightTheme.mainText } });
+      updateState({ theme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } });
     },
     setDefaultTheme: () => {
       localStorage.clearItem('color_scheme');
       if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        updateState({ theme: null, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.headerArea, color: DarkTheme.mainText } });
+        updateState({ theme: null, colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } });
       }
       else {
-        updateState({ theme: null, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.headerArea, color: LightTheme.mainText } });
+        updateState({ theme: null, colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } });
       }
     },
     setLanguage: (code: string) => {

net/web/src/session/cardSelect/selectItem/SelectItem.styled.js

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 import { Colors } from 'constants/Colors';
 
 export const SelectItemWrapper = styled.div`
+  color: ${props => props.theme.mainText};
+
   .active {
     cursor: pointer;
     height: 48px;
@@ -12,7 +14,7 @@ export const SelectItemWrapper = styled.div`
     align-items: center;
 
     &:hover {
-      background-color: ${Colors.selectHover};
+      background-color: ${props => props.theme.hoverArea};
     }
   }
 
@@ -45,6 +47,7 @@ export const SelectItemWrapper = styled.div`
       overflow: hidden;
       text-overflow: ellipsis;
       font-size: 12px;
+      color: ${props => props.theme.hintText};
     }
   }
 

net/web/src/session/channels/Channels.jsx

@@ -47,8 +47,7 @@ export function Channels({ open, active }) {
           </Tooltip>
         </div>
       )}
-      <Modal bodyStyle={{ padding: 16 }} title={state.strings.newTopic} centered visible={state.showAdd && state.allowAdd} footer={null} destroyOnClose={true}
+      <Modal bodyStyle={{ padding: 16, ...state.menuStyle }} closable={false} centered visible={state.showAdd && state.allowAdd} footer={null} destroyOnClose={true} onCancel={actions.clearShowAdd}>
-          onCancel={actions.clearShowAdd}>
         <AddChannel added={added} cancelled={actions.clearShowAdd} />
       </Modal>
     </ChannelsWrapper>

net/web/src/session/channels/Channels.styled.js

@@ -50,7 +50,6 @@ export const ChannelsWrapper = styled.div`
         input::placeholder {
           color: ${props => props.theme.placeholderText};
         }
-      
       }
     }
 

net/web/src/session/channels/addChannel/AddChannel.jsx

@@ -26,35 +26,37 @@ export function AddChannel({ added, cancelled }) {
   return (
     <AddChannelWrapper>
       { modalContext }
-      <Input placeholder="Subject (optional)" spellCheck="false" autocapitalize="word"
+      <div className="subject">
-          value={state.subject} onChange={(e) => actions.setSubject(e.target.value)} />
+        <Input placeholder={state.strings.subjectOptional} spellCheck="false" autocapitalize="word"
-      <div class="members">
+            value={state.subject} onChange={(e) => actions.setSubject(e.target.value)} />
-        <span>Channel Members: </span>
+      </div>
+      <div className="members">
+        <span>{state.strings.members}:</span>
         { state.members.size !== 0 && (
-          <span>{ state.members.size }</span>
+          <span className="count">{ state.members.size }</span>
         )}
       </div>
-      <div class="list">
+      <div className="list">
         <CardSelect
           select={actions.onMember}
           selected={state.members}
-          emptyMessage={'No Connected Contacts'}
+          emptyMessage={state.strings.noConnected}
           filter={actions.cardFilter} 
           unknown={0}
         />
       </div>
         <AddFooter>
-        <div class="seal">
+        <div className="seal">
           { state.sealable && state.allowUnsealed && (
             <>
               <Switch checked={state.seal} onChange={actions.setSeal} size="small" />
-              <span class="sealText">Sealed Channel</span>
+              <span className="sealText">{ state.strings.sealedTopic }</span>
             </>
           )}
         </div>
         <Space>
-          <Button key="back" onClick={cancelled}>Cancel</Button>
+          <Button key="back" onClick={cancelled}>{ state.strings.cancel }</Button>
-          <Button key="save" type="primary" loading={state.busy} onClick={addChannel}>Save</Button>
+          <Button key="save" type="primary" loading={state.busy} onClick={addChannel}>{ state.strings.start }</Button>
         </Space>
       </AddFooter>
     </AddChannelWrapper>

net/web/src/session/channels/addChannel/AddChannel.styled.js

@@ -6,12 +6,33 @@ export const AddChannelWrapper = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  background-color: ${props => props.theme.modalArea};
+  color: ${props => props.theme.mainText};
+
+  .subject { 
+    width: 100%;
+
+    input {
+      padding-left: 8px;
+      background-color: ${props => props.theme.inputArea};
+      border: 1px solid ${props => props.theme.sectionBorder};
+      color: ${props => props.theme.mainText};
+    }
+
+    input::placeholder {
+      color: ${props => props.theme.placeholderText};
+    }
+  }
 
   .members {
     margin-top: 16px;
     width: 100%;
     padding-left: 8px;
-    color: ${Colors.grey};
+    color: ${props => props.theme.labelText};
+
+    .count {
+      padding-left: 8px;
+    }
   }
 
   .list {
@@ -19,7 +40,7 @@ export const AddChannelWrapper = styled.div`
     min-height: 100px;
     max-height: 200px;
     overflow: auto;
-    border: 1px solid ${Colors.divider};
+    border: 1px solid ${props => props.theme.sectionBorder};
   }
 `;
 

net/web/src/session/channels/addChannel/memberOption/MemberOption.styled.js

@@ -5,6 +5,7 @@ export const MemberOptionWrapper = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
+  color: ${props => props.theme.mainText};
 
   .details {
     flex-grow: 1;

net/web/src/session/channels/addChannel/useAddChannel.hook.js

@@ -1,6 +1,7 @@
 import { useContext, useState, useEffect } from 'react';
 import { ChannelContext } from 'context/ChannelContext';
 import { CardContext } from 'context/CardContext';
+import { SettingsContext } from 'context/SettingsContext';
 import { AccountContext } from 'context/AccountContext';
 import { encryptChannelSubject } from 'context/sealUtil';
 
@@ -14,11 +15,13 @@ export function useAddChannel() {
     subject: null,
     members: new Set(),
     seal: false,
+    strings: {},
   });
 
   const card = useContext(CardContext);
   const channel = useContext(ChannelContext);
   const account = useContext(AccountContext);
+  const settings = useContext(SettingsContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -35,6 +38,11 @@ export function useAddChannel() {
     }
   }, [account.state]);
 
+  useEffect(() => {
+    const { strings } = settings.state;
+    updateState({ strings });
+  }, [settings.state]);
+
   const actions = {
     addChannel: async () => {
       let conversation;

net/web/src/session/channels/useChannels.hook.js

@@ -18,6 +18,7 @@ export function useChannels() {
     showAdd: false,
     allowAdd: false,
     strings: {},
+    menuStyle: {},
   });
 
   const profile = useContext(ProfileContext);
@@ -265,8 +266,8 @@ export function useChannels() {
   }, [account.state, store.state, card.state, channel.state, filter]);
 
   useEffect(() => {
-    const { display, strings } = settings.state;
+    const { display, strings, menuStyle } = settings.state;
-    updateState({ display, strings });
+    updateState({ display, strings, menuStyle });
   }, [settings.state]);
 
   const actions = {