diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 627356d22..bc0d35293 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -894,7 +894,7 @@ .module-typing-animation__dot { border-radius: 50%; - background-color: var(--color-gray-color); + background-color: var(--text-secondary-color); height: 6px; width: 6px; @@ -903,7 +903,7 @@ .module-typing-animation__dot--light { border-radius: 50%; - background-color: var(--color-white-color); + background-color: var(--background-primary-color); height: 6px; width: 6px; diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 3f070d178..4e1275951 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -361,11 +361,12 @@ // Module: Message Search Result - .module-message-search-result { - &:hover { - background-color: var(--color-dark-gray-color); - } - } + // TODO Theming remove + // .module-message-search-result { + // &:hover { + // background-color: var(--color-dark-gray-color); + // } + // } .module-message__link-preview__icon-container__circle-background { background-color: var(--color-light-gray-color); diff --git a/ts/components/SessionContextMenuContainer.tsx b/ts/components/SessionContextMenuContainer.tsx index e306511e6..4cc1a39c9 100644 --- a/ts/components/SessionContextMenuContainer.tsx +++ b/ts/components/SessionContextMenuContainer.tsx @@ -7,6 +7,7 @@ export const SessionContextMenuContainer = styled.div.attrs({ // be sure it is more than the one set for the More Informations screen of messages z-index: 30; min-width: 200px; + /* TODO Theming Update */ box-shadow: 0 10px 16px 0 rgba(var(--color-black-color-rgb), 0.2), 0 6px 20px 0 rgba(var(--color-black-color-rgb), 0.19) !important; background-color: var(--color-received-message-background); diff --git a/ts/components/SessionSearchInput.tsx b/ts/components/SessionSearchInput.tsx index ae8cc3276..e2f902dab 100644 --- a/ts/components/SessionSearchInput.tsx +++ b/ts/components/SessionSearchInput.tsx @@ -8,6 +8,7 @@ import { getOverlayMode } from '../state/selectors/section'; import { cleanSearchTerm } from '../util/cleanSearchTerm'; import { SessionIconButton } from './icon'; +// TODO Theming possibly update to use Search Bar Component Colors const StyledSearchInput = styled.div` height: var(--search-input-height); width: 100%; @@ -30,7 +31,7 @@ const StyledInput = styled.input` font-family: var(--font-default); text-overflow: ellipsis; background: none; - color: var(--color-text); + color: var(--conversation-tab-text-color); &:focus { outline: none !important; diff --git a/ts/components/basic/MessageBodyHighlight.tsx b/ts/components/basic/MessageBodyHighlight.tsx index 986289e81..f4e02abf8 100644 --- a/ts/components/basic/MessageBodyHighlight.tsx +++ b/ts/components/basic/MessageBodyHighlight.tsx @@ -15,7 +15,7 @@ const renderNewLines: RenderTextCallbackType = ({ text, key, isGroup }) => ( const SnippetHighlight = styled.span` font-weight: bold; - color: var(--color-text); + color: var(--text-primary-color); `; const renderEmoji = ({ diff --git a/ts/components/button/MenuButton.tsx b/ts/components/button/MenuButton.tsx index 66762fd1e..4ef998b49 100644 --- a/ts/components/button/MenuButton.tsx +++ b/ts/components/button/MenuButton.tsx @@ -13,7 +13,7 @@ const StyledMenuButton = styled.button` display: flex; justify-content: center; align-items: center; - background: var(--bg-color); + background: var(--menu-button-background-color); border-radius: 2px; width: 51px; @@ -23,10 +23,16 @@ const StyledMenuButton = styled.button` transition: var(--default-duration); :hover { - background: var(--hover-bg-color); + background: var(--menu-button-background-hover-color); } `; +const StyledMenuInput = styled.input` + opacity: 0; + width: 0; + height: 0; +`; + /** * This is the Session Menu Botton. i.e. the button on top of the conversation list to start a new conversation. * It has two state: selected or not and so we use an checkbox input to keep the state in sync. @@ -43,6 +49,7 @@ export const MenuButton = () => { return ( { '--fg-color': 'white', } as CSSProperties } - onClick={onClickFn} > + diff --git a/ts/components/conversation/AddMentions.tsx b/ts/components/conversation/AddMentions.tsx index 90001a647..da4fdd4b9 100644 --- a/ts/components/conversation/AddMentions.tsx +++ b/ts/components/conversation/AddMentions.tsx @@ -19,8 +19,8 @@ const StyledMentionAnother = styled.span` `; const StyledMentionedUs = styled(StyledMentionAnother)` - background-color: var(--color-text-accent); - color: black; + background-color: var(--primary-color); + color: var(--text-primary-color); border-radius: 5px; `; diff --git a/ts/components/conversation/Timestamp.tsx b/ts/components/conversation/Timestamp.tsx index b92ea04ca..c89d447ad 100644 --- a/ts/components/conversation/Timestamp.tsx +++ b/ts/components/conversation/Timestamp.tsx @@ -14,12 +14,12 @@ type Props = { const UPDATE_FREQUENCY = 60 * 1000; const TimestampContainerNotListItem = styled.div` + color: var(--text-secondary-color); font-size: var(--font-size-xs); line-height: 16px; letter-spacing: 0.3px; text-transform: uppercase; user-select: none; - color: var(--color-text-subtle); `; const TimestampContainerListItem = styled(TimestampContainerNotListItem)` diff --git a/ts/components/conversation/TypingAnimation.tsx b/ts/components/conversation/TypingAnimation.tsx index 79c1384bc..61af18a01 100644 --- a/ts/components/conversation/TypingAnimation.tsx +++ b/ts/components/conversation/TypingAnimation.tsx @@ -14,7 +14,7 @@ const StyledTypingContainer = styled.div` const StyledTypingDot = styled.div<{ index: number }>` border-radius: 50%; - background-color: var(--color-text-subtle); // TODO Theming update + background-color: var(--text-secondary-color); height: 6px; width: 6px; diff --git a/ts/components/conversation/message/message-content/OutgoingMessageStatus.tsx b/ts/components/conversation/message/message-content/OutgoingMessageStatus.tsx index e0a3d7ad0..f0d0c847d 100644 --- a/ts/components/conversation/message/message-content/OutgoingMessageStatus.tsx +++ b/ts/components/conversation/message/message-content/OutgoingMessageStatus.tsx @@ -12,8 +12,9 @@ const MessageStatusSendingContainer = styled.div` cursor: pointer; `; +const iconColor = 'var(--text-primary-color)'; + const MessageStatusSending = ({ dataTestId }: { dataTestId?: string }) => { - const iconColor = 'var(--color-text)'; return ( @@ -22,8 +23,6 @@ const MessageStatusSending = ({ dataTestId }: { dataTestId?: string }) => { }; const MessageStatusSent = ({ dataTestId }: { dataTestId?: string }) => { - const iconColor = 'var(--color-text)'; - return ( @@ -32,8 +31,6 @@ const MessageStatusSent = ({ dataTestId }: { dataTestId?: string }) => { }; const MessageStatusRead = ({ dataTestId }: { dataTestId?: string }) => { - const iconColor = 'var(--color-text)'; - return ( @@ -53,7 +50,7 @@ const MessageStatusError = ({ dataTestId }: { dataTestId?: string }) => { onClick={showDebugLog} title={window.i18n('sendFailed')} > - + ); }; diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx index 18597a5a4..3d5860d0e 100644 --- a/ts/components/leftpane/LeftPaneSectionHeader.tsx +++ b/ts/components/leftpane/LeftPaneSectionHeader.tsx @@ -14,41 +14,54 @@ import { MenuButton } from '../button/MenuButton'; const SectionTitle = styled.h1` padding: 0 var(--margins-sm); flex-grow: 1; - color: var(--color-text); + color: var(--text-primary-color); `; -export const LeftPaneSectionHeader = () => { - const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt); - const focusedSection = useSelector(getFocusedSection); - const overlayMode = useSelector(getOverlayMode); +const StyledProgressBarContainer = styled.div` + width: 100%; + height: 5px; + flex-direction: row; + background: var(--border-color); +`; - let label: string | undefined; +const StyledProgressBarInner = styled.div` + background: var(--primary-color); + width: 90%; + transition: width 0.5s ease-in; + height: 100%; +`; - const isMessageSection = focusedSection === SectionType.Message; - const isMessageRequestOverlay = overlayMode && overlayMode === 'message-requests'; +export const StyledBannerTitle = styled.div` + line-height: 1.3; + font-size: var(--font-size-md); + font-weight: bold; + margin: var(--margins-sm) var(--margins-sm) 0 var(--margins-sm); - switch (focusedSection) { - case SectionType.Settings: - label = window.i18n('settingsHeader'); - break; - case SectionType.Message: - label = isMessageRequestOverlay - ? window.i18n('messageRequests') - : window.i18n('messagesHeader'); - break; - default: + span { + color: var(--primary-color); } +`; - return ( - -
- {label} - {isMessageSection && } -
- {showRecoveryPhrasePrompt && } - - ); -}; +export const StyledLeftPaneBanner = styled.div` + background: var(--background-primary-color); + display: flex; + flex-direction: column; + border-bottom: var(--border-color); +`; + +const StyledBannerInner = styled.div` + p { + margin: 0; + } + + .left-pane-banner___phrase { + margin-top: var(--margins-md); + } + + .session-button { + margin-top: var(--margins-sm); + } +`; const BannerInner = () => { const dispatch = useDispatch(); @@ -94,48 +107,35 @@ export const LeftPaneBanner = () => { ); }; -const StyledProgressBarContainer = styled.div` - width: 100%; - height: 5px; - flex-direction: row; - background: var(--color-session-border); -`; - -const StyledProgressBarInner = styled.div` - background: var(--color-accent); - width: 90%; - transition: width 0.5s ease-in; - height: 100%; -`; - -export const StyledBannerTitle = styled.div` - line-height: 1.3; - font-size: var(--font-size-md); - font-weight: bold; - margin: var(--margins-sm) var(--margins-sm) 0 var(--margins-sm); - - span { - color: var(--color-text-accent); - } -`; +export const LeftPaneSectionHeader = () => { + const showRecoveryPhrasePrompt = useSelector(getShowRecoveryPhrasePrompt); + const focusedSection = useSelector(getFocusedSection); + const overlayMode = useSelector(getOverlayMode); -export const StyledLeftPaneBanner = styled.div` - background: var(--color-recovery-phrase-banner-background); - display: flex; - flex-direction: column; - border-bottom: var(--session-border); -`; + let label: string | undefined; -const StyledBannerInner = styled.div` - p { - margin: 0; - } + const isMessageSection = focusedSection === SectionType.Message; + const isMessageRequestOverlay = overlayMode && overlayMode === 'message-requests'; - .left-pane-banner___phrase { - margin-top: var(--margins-md); + switch (focusedSection) { + case SectionType.Settings: + label = window.i18n('settingsHeader'); + break; + case SectionType.Message: + label = isMessageRequestOverlay + ? window.i18n('messageRequests') + : window.i18n('messagesHeader'); + break; + default: } - .session-button { - margin-top: var(--margins-sm); - } -`; + return ( + +
+ {label} + {isMessageSection && } +
+ {showRecoveryPhrasePrompt && } + + ); +}; diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx index 6839f5f16..38894005a 100644 --- a/ts/components/leftpane/MessageRequestsBanner.tsx +++ b/ts/components/leftpane/MessageRequestsBanner.tsx @@ -17,20 +17,20 @@ const StyledMessageRequestBanner = styled.div` padding: 8px 12px; // adjusting for unread border always being active align-items: center; cursor: pointer; - - background: var(--color-request-banner-background); + /* TODO Theming - Discuss with Connnor */ + background: var(--conversation-tab-background-color); transition: var(--default-duration); &:hover { - background: var(--color-clickable-hovered); + background: var(--conversation-tab-background-hover-color); } `; const StyledMessageRequestBannerHeader = styled.span` font-weight: bold; font-size: var(--font-size-md); - color: var(--color-text-subtle); + color: var(--conversation-tab-text-color); padding-left: var(--margins-xs); margin-inline-start: 12px; line-height: 18px; @@ -47,7 +47,8 @@ const StyledCircleIcon = styled.div` const StyledUnreadCounter = styled.div` font-weight: bold; border-radius: var(--margins-sm); - background-color: var(--color-request-banner-unread-background); + background-color: var(--conversation-tab-bubble-background-color); + color: var(--conversation-tab-bubble-text-color); margin-left: 10px; min-width: 20px; height: 20px; @@ -66,7 +67,8 @@ const StyledGridContainer = styled.div` align-items: center; border-radius: 50%; justify-content: center; - background-color: var(--color-request-banner-icon-background); + /* TODO Theming - Is this right? */ + background-color: var(--text-secondary-color); `; export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: SessionIconSize }) => { @@ -78,7 +80,8 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess diff --git a/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx b/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx index 23d901c63..3b8205a40 100644 --- a/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx +++ b/ts/components/leftpane/conversation-list-item/ConversationListItem.tsx @@ -64,7 +64,7 @@ const AvatarItem = () => { } return ( -
+
{ }; const MentionAtSymbol = styled.span` - background-color: var(--color-accent); - - color: black; + background-color: var(--primary-color); + color: var(--conversation-tab-text-color); text-align: center; margin-top: 0px; margin-bottom: 0px; @@ -114,10 +113,10 @@ const MentionAtSymbol = styled.span` height: 16px; min-width: 16px; border-radius: 8px; - /* transition: filter 0.25s linear; */ cursor: pointer; :hover { + /* TODO Theming, should this be changed? */ filter: grayscale(0.7); } `; diff --git a/ts/components/menu/ConversationListItemContextMenu.tsx b/ts/components/menu/ConversationListItemContextMenu.tsx index 7f91d0b62..2c8bc19f7 100644 --- a/ts/components/menu/ConversationListItemContextMenu.tsx +++ b/ts/components/menu/ConversationListItemContextMenu.tsx @@ -29,6 +29,7 @@ export type PropsContextConversationItem = { const ConversationListItemContextMenu = (props: PropsContextConversationItem) => { const { triggerId } = props; + // TODO Theming - Waiting on Session Components for correct colors return ( diff --git a/ts/components/menu/MessageRequestBannerContextMenu.tsx b/ts/components/menu/MessageRequestBannerContextMenu.tsx index d7c3de2de..948e24e76 100644 --- a/ts/components/menu/MessageRequestBannerContextMenu.tsx +++ b/ts/components/menu/MessageRequestBannerContextMenu.tsx @@ -13,6 +13,7 @@ const MessageRequestBannerContextMenu = (props: PropsContextConversationItem) => const { triggerId } = props; return ( + // TODO Theming - Waiting on Session Components for correct colors diff --git a/ts/components/search/MessageSearchResults.tsx b/ts/components/search/MessageSearchResults.tsx index f3d6c1705..f36396358 100644 --- a/ts/components/search/MessageSearchResults.tsx +++ b/ts/components/search/MessageSearchResults.tsx @@ -21,7 +21,7 @@ const StyledConversationTitleResults = styled.div` overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; - color: var(--color-text); + color: var(--conversation-tab-text-color); `; const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults)` @@ -30,7 +30,7 @@ const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults) line-height: 14px; overflow-x: hidden; font-weight: 700; - color: var(--color-text-subtle); + color: var(--conversation-tab-text-color); `; const StyledSearchResulsts = styled.div` @@ -46,7 +46,7 @@ const StyledSearchResulsts = styled.div` cursor: pointer; &:hover { - background-color: var(--color-clickable-hovered); + background-color: var(--conversation-tab-background-hover-color); } `; @@ -143,7 +143,7 @@ const ResultBody = styled.div` font-size: var(--font-size-sm); - color: var(--color-text-subtle); + color: var(--conversation-tab-text-color); max-height: 3.6em; @@ -167,7 +167,7 @@ const StyledTimestampContaimer = styled.div` text-transform: uppercase; - color: var(--color-text-subtle); + color: var(--conversation-tab-text-color); `; export const MessageSearchResult = (props: MessageResultProps) => { diff --git a/ts/components/search/SearchResults.tsx b/ts/components/search/SearchResults.tsx index 668a9aef1..9e6484e4b 100644 --- a/ts/components/search/SearchResults.tsx +++ b/ts/components/search/SearchResults.tsx @@ -18,7 +18,7 @@ const StyledSeparatorSection = styled.div` margin-inline-start: 16px; - color: var(--color-text); + color: var(--text-secondary-color); font-size: var(--font-size-sm); font-weight: 400; @@ -28,7 +28,7 @@ const StyledSeparatorSection = styled.div` const SearchResultsContainer = styled.div` overflow-y: auto; max-height: 100%; - color: var(--color-text); + color: var(--text-secondary-color); flex-grow: 1; width: -webkit-fill-available; `; diff --git a/ts/state/ducks/theme.tsx b/ts/state/ducks/theme.tsx index 8aec1b4c0..b3a9ac3e9 100644 --- a/ts/state/ducks/theme.tsx +++ b/ts/state/ducks/theme.tsx @@ -1,5 +1,6 @@ export const APPLY_THEME = 'APPLY_THEME'; +// TODO Theming - should be classic-light and classic-dark export type ThemeStateType = 'light' | 'dark' | 'ocean-light' | 'ocean-dark'; export const applyTheme = (theme: ThemeStateType) => { diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 2b88aecbf..7dcd4e2e7 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -466,6 +466,7 @@ export const SessionGlobalStyles = createGlobalStyle` /* TODO Theming this should be overridable */ --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; --danger-color: ${COLORS.DANGER.LIGHT}; + --transparent-color: ${COLORS.TRANSPARENT}; /* Backgrounds */ --background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; @@ -488,13 +489,14 @@ export const SessionGlobalStyles = createGlobalStyle` --text-box-border-color: ${THEMES.CLASSIC_LIGHT.COLOR2}; /* Message Bubbles */ - --message-bubbles-outgoing-background-color: var(--primary-color); - --message-bubbles-incoming-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; - --message-bubbles-outgoing-text-color: var(--text-primary-color); - --message-bubbles-incoming-text-color: var(--text-primary-color); + --message-bubbles-sent-background-color: var(--primary-color); + --message-bubbles-received-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; + --message-bubbles-sent-text-color: var(--text-primary-color); + --message-bubbles-received-text-color: var(--text-primary-color); /* Menu Button */ --menu-button-background-color: ${THEMES.CLASSIC_LIGHT.COLOR0}; + --menu-button-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR1}; /* TODO Theming Make a icon fill varible that uses the background color? */ --menu-button-icon-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; @@ -519,7 +521,7 @@ export const SessionGlobalStyles = createGlobalStyle` --button-solid-text-hover-color: var(--text-primary-color); /* Outline */ - --button-outline-background-color: ${COLORS.TRANSPARENT}; + --button-outline-background-color: var(--transparent-color); --button-outline-background-hover-color: rgba(${hexColorToRGB( THEMES.CLASSIC_LIGHT.COLOR0 )}, 0.1); @@ -531,14 +533,14 @@ export const SessionGlobalStyles = createGlobalStyle` --button-outline-disabled-color: var(--text-secondary-color); /* Icons */ - --button-icon-background-color: ${COLORS.TRANSPARENT}; + --button-icon-background-color: var(--transparent-color); --button-icon-stroke-color: var(--text-secondary-color); --button-icon-stroke-hover-color: var(--text-primary-color); --button-icon-stroke-selected-color: var(--text-primary-color); /* TODO Theming Consolidate with code */ /* Conversation Tab */ - /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items etc. */ + /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner etc. */ --conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR5}; --conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; @@ -547,7 +549,6 @@ export const SessionGlobalStyles = createGlobalStyle` --conversation-tab-text-selected-color: var(--text-primary-color); --conversation-tab-text-unread-color: var(--text-primary-color); --conversation-tab-text-secondary-color: var(--text-secondary-color); - --conversation-tab-text-selected-color: var(--text-primary-color); --conversation-tab-bubble-background-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; --conversation-tab-bubble-text-color: var(--text-primary-color); /* TODO Theming account for overriding */ @@ -572,10 +573,10 @@ export const SessionGlobalStyles = createGlobalStyle` /* Toggle Switch */ --toggle-switch-ball-color: ; /* TODO Theming think this should be white instead of transparent */ - --toggle-switch-off-background-color: ${COLORS.TRANSPARENT}; + --toggle-switch-off-background-color: var(--transparent-color); --toggle-switch-off-border-color: var(--border-color); --toggle-switch-on-background-color: var(--primary-color); - --toggle-switch-on-border-color: ${COLORS.TRANSPARENT}; + --toggle-switch-on-border-color: var(--transparent-color); /* TODO Theming Think this is part of the Convesations Tab */ /* Unread Messages Alert */ @@ -586,7 +587,7 @@ export const SessionGlobalStyles = createGlobalStyle` /* Color Mode Button */ --button-color-mode-stroke-color: var(--text-secondary-color); --button-color-mode-hover-color: var(--text-primary-color); - --button-color-mode-fill-color: ${COLORS.TRANSPARENT}; + --button-color-mode-fill-color: var(--transparent-color); /* Path Button */ --button-path-default-color: ${COLORS.PATH.DEFAULT};