updating channel component

net/web/src/constants/Colors.js

@@ -41,7 +41,9 @@ export const LightTheme = {
   headerArea: '#f2f2f2',
   footerArea: '#f2f2f2',
   itemArea: '#f8f8f8',
+  inputArea: '#ffffff',
   hoverArea: '#efefef',
+  noticeArea: '#8fbea7',
   selectedArea: '#e8e8e8',
   enabledArea: '#448866',
   disabledArea: '#cccccc',
@@ -53,16 +55,19 @@ export const LightTheme = {
   linkText: '#448866',
   labelText: '#888888',
   alertText: '#ff8888',
-  itemLine: '#eeeeee',
+  itemBorder: '#eeeeee',
-  sectionLine: '#dddddd',
+  inputBorder: '#888888',
-  headerLine: '#aaaaaa',
+  sectionBorder: '#dddddd',
+  headerBorder: '#aaaaaa',
 };
 
 export const DarkTheme = {
   headerArea: '#111111',
   footerArea: '#111111',
   itemArea: '#222222',
+  inputArea: '#000000',
   hoverArea: '#2f2f2f',
+  noticeArea: '#8fbea7',
   selectedArea: '#333333',
   enabledArea: '#448866',
   disabledArea: '#888888',
@@ -74,8 +79,9 @@ export const DarkTheme = {
   linkText: '#448866',
   labelText: '#dddddd',
   alertText: '#ff8888',
-  itemLine: '#555555',
+  itemBorder: '#555555',
-  sectionLine: '#777777',
+  inputBorder: '#aaaaaa',
-  headerLine: '#aaaaaa',
+  sectionBorder: '#777777',
+  headerBorder: '#aaaaaa',
 };
 

net/web/src/constants/Strings.js

@@ -9,6 +9,11 @@ export const en = {
   allDevices: 'Logout of all devices',
   ok: 'OK',
   cancel: 'Cancel',
+
+  newMessage: 'New Message',
+  topics: 'Topics',
+  unsetSealing: 'Unset Sealing Key',
+  newTopic: 'New Topic',  
 };
 
 export const fr = {
@@ -22,5 +27,10 @@ export const fr = {
   allDevices: 'Déconnexion de tous les appareils',
   ok: 'OK',
   cancel: 'Annuler',
+
+  newMessage: 'Nouveau Message',
+  topics: 'Sujets',
+  unsetSealing: 'Clé de sécurité non définie',
+  newTopic: 'Nouveau Sujet',
 };
 

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

@@ -16,38 +16,38 @@ export function Channels({ open, active }) {
 
   return (
     <ChannelsWrapper>
-      <div class="search">
+      <div className="search">
-        <div class="filter">
+        <div className="filter">
-          <Input bordered={false} allowClear={true} placeholder="Topics" prefix={<SearchOutlined />}
+          <Input className="filterControl" bordered={false} allowClear={true} placeholder={state.strings.topics} prefix={<SearchOutlined />}
               spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
         </div>
         { state.display === 'small' && (
-          <div class="inline">
+          <div className="inline">
             <Button type="primary" disabled={!state.allowAdd} icon={<CommentOutlined />} onClick={actions.setShowAdd}>New</Button>
           </div>
         )}
       </div>
-      <div class="view">
+      <div className="view">
         { state.channels.length > 0 && (
           <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
             renderItem={item => (
-              <ChannelItem item={item} openChannel={open}
+              <ChannelItem item={item} openChannel={open} tip={state.strings.newMessage}
                   active={active.card === item.cardId && active.channel === item.channelId} />
             )}
           />
         )}
         { state.channels.length === 0 && (
-          <div class="empty">No Topics</div>
+          <div className="empty">No Topics</div>
         )}
       </div>
       { state.display !== 'small' && (
-        <div class="bar">
+        <div className="bar">
-          <Tooltip placement="right" title={ state.allowAdd ? '' : 'Account Sealing Key Required' }>
+          <Tooltip placement="right" title={ state.allowAdd ? '' : state.strings.unsetSealing }>
-            <Button type="primary" disabled={!state.allowAdd} icon={<CommentOutlined />} onClick={actions.setShowAdd}>New Topic</Button>
+            <Button className={state.allowAdd ? 'addEnabled' : 'addDisabled'} type="primary" disabled={!state.allowAdd} icon={<CommentOutlined />} onClick={actions.setShowAdd}>{state.strings.newTopic}</Button>
           </Tooltip>
         </div>
       )}
-      <Modal bodyStyle={{ padding: 16 }} title="New Topic" centered visible={state.showAdd && state.allowAdd} footer={null} destroyOnClose={true}
+      <Modal bodyStyle={{ padding: 16 }} title={state.strings.newTopic} centered visible={state.showAdd && state.allowAdd} footer={null} destroyOnClose={true}
           onCancel={actions.clearShowAdd}>
         <AddChannel added={added} cancelled={actions.clearShowAdd} />
       </Modal>

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

@@ -6,7 +6,7 @@ export const ChannelsWrapper = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: ${Colors.formFocus};
+  background-color: ${props => props.theme.itemArea};
 
   .view {
     min-height: 0;
@@ -18,7 +18,7 @@ export const ChannelsWrapper = styled.div`
       align-items: center;
       justify-content: center;
       font-style: italic;
-      color: ${Colors.grey};
+      color: ${props => props.theme.hintText};
       height: 100%;
     }
   }
@@ -28,16 +28,30 @@ export const ChannelsWrapper = styled.div`
     padding-bottom: 8px;
     padding-left: 16px;
     padding-right: 16px;
-    border-bottom: 1px solid ${Colors.divider};
+    border-bottom: 1px solid ${props => props.theme.sectionBorder};
     display: flex;
     flex-direction: row;
     height: 48px;
 
-    .filter {
+    .filter { 
-      border: 1px solid ${Colors.divider};
+      border: 1px solid ${props => props.theme.sectionBorder};
-      background-color: ${Colors.white};
+      background-color: ${props => props.theme.inputArea};
       border-radius: 8px;
       flex-grow: 1;
+
+      .filterControl {
+        color: ${props => props.theme.mainText};
+
+        input {
+          padding-left: 4px;
+          color: ${props => props.theme.mainText};
+        }
+
+        input::placeholder {
+          color: ${props => props.theme.placeholderText};
+        }
+      
+      }
     }
 
     .inline {
@@ -60,18 +74,34 @@ export const ChannelsWrapper = styled.div`
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    background-color: ${Colors.formBackground};
+    background-color: ${props => props.theme.headerArea};
-    border-top: 1px solid ${Colors.divider};
+    border-top: 1px solid ${props => props.theme.sectionBorder};
     padding-bottom: 10px;
     padding-top: 10px;
     position: relative;
   }
 
-  .add {
+  .addDisabled {
+    background-color: ${props => props.theme.disabledArea};
+
+    button {
+      color: ${props => props.theme.idleText};
+    }
+  }
+
+  .addEnabled {
+    background-color: ${props => props.theme.enabledArea};
+
+    button {
+      color: ${props => props.theme.activeText};
+    }
+  }
+
+  .adding {
     display: flex;
     flex-direction: row;
-    background-color: ${Colors.primary};
+    background-color: ${props => props.theme.enabledArea};
-    color: ${Colors.white};
+    color: ${props => props.theme.activeText};
     align-items: center;
     justify-content: center;
     padding-left: 16px;

net/web/src/session/channels/channelItem/ChannelItem.jsx

@@ -3,7 +3,7 @@ import { ChannelItemWrapper, Markup } from './ChannelItem.styled';
 import { Logo } from 'logo/Logo';
 import { UnlockOutlined, LockFilled } from '@ant-design/icons';
 
-export function ChannelItem({ item, openChannel, active }) {
+export function ChannelItem({ item, openChannel, active, tip }) {
 
   return (
     <ChannelItemWrapper onClick={() => openChannel(item.channelId, item.cardId)}>
@@ -25,7 +25,7 @@ export function ChannelItem({ item, openChannel, active }) {
             <div class="message">{ item.message }</div>
           </div>
           { item.updatedFlag && (
-            <Tooltip placement="topRight" title="New Message">
+            <Tooltip placement="topRight" title={tip}>
               <Markup />
             </Tooltip>
           )}

net/web/src/session/channels/channelItem/ChannelItem.styled.js

@@ -6,17 +6,18 @@ export const ChannelItemWrapper = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid ${Colors.itemDivider};
+  border-bottom: 1px solid ${props => props.theme.itemBorder};
+  color: ${props => props.theme.mainText};
   line-height: 16px;
   cursor: pointer;
   overflow: hidden;
 
   &:hover {
-    background-color: ${Colors.formHover};
+    background-color: ${props => props.theme.hoverArea};
   }
 
   .active {
-    background-color: ${Colors.profileForm};
+    background-color: ${props => props.theme.selectedArea};
     width: 100%;
     height: 100%;
     display: flex;
@@ -48,7 +49,7 @@ export const ChannelItemWrapper = styled.div`
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid ${Colors.grey};
+      border: 1px solid ${props => props.theme.itemBorder};
       width: 32px;
       height: 32px;
       border-radius: 4px;
@@ -74,7 +75,7 @@ export const ChannelItemWrapper = styled.div`
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        color: ${Colors.disabled};
+        color: ${props => props.theme.hintText};
       }
     }
   }
@@ -84,7 +85,7 @@ export const Markup = styled.div`
   position: absolute;
   right: 0;
   border-radius: 8px;
-  background-color: ${Colors.background};
+  background-color: ${props => props.theme.noticeArea};
   width: 8px;
   height: 8px;
   margin-right: 8px;

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

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

net/web/src/session/identity/Identity.styled.js

@@ -9,7 +9,7 @@ export const IdentityWrapper = styled.div`
   padding-left: 16px;
   padding-right: 16px;
   background-color: ${props => props.theme.headerArea};
-  border-bottom: 1px solid ${props => props.theme.sectionLine};
+  border-bottom: 1px solid ${props => props.theme.sectionBorder};
   color: ${props => props.theme.mainText};
   flex-shrink: 0;
 
@@ -26,7 +26,7 @@ export const IdentityWrapper = styled.div`
     padding-left: 4px;
     padding-right: 4px;
     border-radius: 8px;
-    border: 1px solid ${props => props.theme.sectionLine};
+    border: 2px solid ${props => props.theme.sectionBorder};
     color: ${props => props.theme.mainText};
   }