From 19f01c57c5c6f44801733ab94de953aa3ad917bb Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Thu, 15 Feb 2024 23:40:23 -0800 Subject: [PATCH] updating channel component --- net/web/src/constants/Colors.js | 18 ++++--- net/web/src/constants/Strings.js | 10 ++++ net/web/src/session/channels/Channels.jsx | 22 ++++---- .../src/session/channels/Channels.styled.js | 52 +++++++++++++++---- .../channels/channelItem/ChannelItem.jsx | 4 +- .../channelItem/ChannelItem.styled.js | 13 ++--- .../src/session/channels/useChannels.hook.js | 6 ++- .../src/session/identity/Identity.styled.js | 4 +- 8 files changed, 89 insertions(+), 40 deletions(-) diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js index 89c390e6..fe260e89 100644 --- a/net/web/src/constants/Colors.js +++ b/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', - sectionLine: '#dddddd', - headerLine: '#aaaaaa', + itemBorder: '#eeeeee', + inputBorder: '#888888', + 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', - sectionLine: '#777777', - headerLine: '#aaaaaa', + itemBorder: '#555555', + inputBorder: '#aaaaaa', + sectionBorder: '#777777', + headerBorder: '#aaaaaa', }; diff --git a/net/web/src/constants/Strings.js b/net/web/src/constants/Strings.js index b5b72010..932c19e9 100644 --- a/net/web/src/constants/Strings.js +++ b/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', }; diff --git a/net/web/src/session/channels/Channels.jsx b/net/web/src/session/channels/Channels.jsx index 264b69b7..9bee6fb0 100644 --- a/net/web/src/session/channels/Channels.jsx +++ b/net/web/src/session/channels/Channels.jsx @@ -16,38 +16,38 @@ export function Channels({ open, active }) { return ( -
-
- } +
+
+ } spellCheck="false" onChange={(e) => actions.onFilter(e.target.value)} />
{ state.display === 'small' && ( -
+
)}
-
+
{ state.channels.length > 0 && ( ( - )} /> )} { state.channels.length === 0 && ( -
No Topics
+
No Topics
)}
{ state.display !== 'small' && ( -
- - +
+ +
)} - diff --git a/net/web/src/session/channels/Channels.styled.js b/net/web/src/session/channels/Channels.styled.js index 14f7963f..43cac764 100644 --- a/net/web/src/session/channels/Channels.styled.js +++ b/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 { - border: 1px solid ${Colors.divider}; - background-color: ${Colors.white}; + .filter { + border: 1px solid ${props => props.theme.sectionBorder}; + 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}; - border-top: 1px solid ${Colors.divider}; + background-color: ${props => props.theme.headerArea}; + 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}; - color: ${Colors.white}; + background-color: ${props => props.theme.enabledArea}; + color: ${props => props.theme.activeText}; align-items: center; justify-content: center; padding-left: 16px; diff --git a/net/web/src/session/channels/channelItem/ChannelItem.jsx b/net/web/src/session/channels/channelItem/ChannelItem.jsx index 8d7dc8cd..3f3c49a3 100644 --- a/net/web/src/session/channels/channelItem/ChannelItem.jsx +++ b/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 ( openChannel(item.channelId, item.cardId)}> @@ -25,7 +25,7 @@ export function ChannelItem({ item, openChannel, active }) {
{ item.message }
{ item.updatedFlag && ( - + )} diff --git a/net/web/src/session/channels/channelItem/ChannelItem.styled.js b/net/web/src/session/channels/channelItem/ChannelItem.styled.js index 29327cb3..e0f9d253 100644 --- a/net/web/src/session/channels/channelItem/ChannelItem.styled.js +++ b/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; diff --git a/net/web/src/session/channels/useChannels.hook.js b/net/web/src/session/channels/useChannels.hook.js index 5c07ecb3..89036cce 100644 --- a/net/web/src/session/channels/useChannels.hook.js +++ b/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 }); - }, [settings]); + const { display, strings } = settings.state; + updateState({ display, strings }); + }, [settings.state]); const actions = { onFilter: (value) => { diff --git a/net/web/src/session/identity/Identity.styled.js b/net/web/src/session/identity/Identity.styled.js index 3326536e..d1d6a129 100644 --- a/net/web/src/session/identity/Identity.styled.js +++ b/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}; }