From 9062d2c6095060b2f68e42b9bc1e49162d69dc10 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 14:39:00 +1100 Subject: [PATCH 01/10] feat: removed old themes and switching functions --- ts/components/button/MenuButton.tsx | 15 +- ts/themes/SessionTheme.tsx | 345 ---------------------------- ts/themes/switchTheme.tsx | 5 - 3 files changed, 2 insertions(+), 363 deletions(-) diff --git a/ts/components/button/MenuButton.tsx b/ts/components/button/MenuButton.tsx index 254e0a732..2cff26532 100644 --- a/ts/components/button/MenuButton.tsx +++ b/ts/components/button/MenuButton.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import styled, { CSSProperties } from 'styled-components'; +import styled from 'styled-components'; import { resetOverlayMode, setOverlayMode } from '../../state/ducks/section'; import { getOverlayMode } from '../../state/selectors/section'; import { SessionIcon } from '../icon'; @@ -41,18 +41,7 @@ export const MenuButton = () => { dispatch(isToggled ? resetOverlayMode() : setOverlayMode('choose-action')); return ( - + { - document.documentElement.style.setProperty('--color-accent', darkColorAccent); - document.documentElement.style.setProperty('--color-accent-rgb', darkColorAccentRGB); - document.documentElement.style.setProperty('--color-accent-button', darkColorAccentButton); - document.documentElement.style.setProperty('--color-text', darkColorText); - document.documentElement.style.setProperty('--color-text-rgb', darkColorTextRGB); - document.documentElement.style.setProperty('--color-text-menu-highlighted', lightColorText); - document.documentElement.style.setProperty('--color-text-subtle', darkColorTextSubtle); - document.documentElement.style.setProperty('--color-text-accent', darkColorTextAccent); - document.documentElement.style.setProperty('--color-text-opposite', darkColorTextOpposite); - document.documentElement.style.setProperty('--color-session-shadow', darkColorSessionShadow); - document.documentElement.style.setProperty( - '--color-compose-view-button-background', - darkColorComposeViewBg - ); - document.documentElement.style.setProperty( - '--color-sent-message-background', - darkColorSentMessageBg - ); - document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack); - document.documentElement.style.setProperty( - '--color-clickable-hovered', - darkColorClickableHovered - ); - document.documentElement.style.setProperty('--color-session-border', darkColorSessionBorder); - document.documentElement.style.setProperty('--color-session-border', darkColorSessionBorderColor); - document.documentElement.style.setProperty( - '--color-recovery-phrase-banner-background', - darkColorRecoveryPhraseBannerBg - ); - document.documentElement.style.setProperty('--color-pill-divider', darkColorPillDivider); - document.documentElement.style.setProperty( - '--color-last-seen-indicator', - darkColorLastSeenIndicator - ); - document.documentElement.style.setProperty( - '--color-quote-bottom-bar-background', - darkColorQuoteBottomBarBg - ); - document.documentElement.style.setProperty('--color-cell-background', darkColorCellBackground); - document.documentElement.style.setProperty( - '--color-received-message-text', - darkColorReceivedMessageText - ); - document.documentElement.style.setProperty( - '--color-received-message-background', - darkColorReceivedMessageBg - ); - document.documentElement.style.setProperty('--color-pill-divider-text', darkColorPillDividerText); - document.documentElement.style.setProperty('--color-input-background', darkInputBackground); - - document.documentElement.style.setProperty('--filter-session-text', darkFilterSessionText); - document.documentElement.style.setProperty('--border-unread', darkUnreadBorder); - - document.documentElement.style.setProperty('--color-scroll-bar-thumb', darkScrollbarThumb); - document.documentElement.style.setProperty( - '--color-fake-chat-bubble-background', - darkFakeChatBubbleBg - ); - document.documentElement.style.setProperty('--color-inbox-background', darkInboxBackground); - document.documentElement.style.setProperty( - '--color-left-pane-overlay-background', - darkLeftPaneOverlayBg - ); - document.documentElement.style.setProperty( - '--color-conversation-item-selected', - darkConversationItemSelected - ); - document.documentElement.style.setProperty( - '--color-conversation-item-has-unread', - darkConversationItemHasUnread - ); - document.documentElement.style.setProperty('--color-conversation-list', darkConversationList); - - document.documentElement.style.setProperty('--color-text-highlight', darkTextHighlight); - document.documentElement.style.setProperty('--color-foreground-primary', darkForegroundPrimary); - document.documentElement.style.setProperty('--color-background-primary', darkBackgroundPrimary); - document.documentElement.style.setProperty('--color-button-green', darkButtonGreen); - document.documentElement.style.setProperty('--color-modal-background', darkModalBackground); - document.documentElement.style.setProperty('--border-session', darkColorSessionBorder); - - document.documentElement.style.setProperty( - '--color-request-banner-background', - darkMessageRequestBannerBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-icon-background', - darkMessageRequestBannerIconBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-unread-background', - darkMessageRequestBannerUnreadBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-icon', - darkMessageRequestBannerIcon - ); -}; - -// LIGHT COLORS -const lightColorAccent = accentLightTheme; -const lightColorAccentRGB = '0, 233, 123'; -const lightColorAccentButton = blackColor; -const lightColorText = blackColor; -const lightColorTextRGB = blackColorRGB; -const lightColorTextOpposite = whiteColor; -const lightColorTextSubtle = `${blackColor}99`; -const lightColorTextAccent = accentLightTheme; -const lightColorSessionShadow = `0 0 4px 0 ${blackColor}5E`; -const lightColorComposeViewBg = '#efefef'; -export const lightColorSentMessageBg = accentLightTheme; -const lightColorClickableHovered = '#dfdfdf'; -const lightColorSessionBorderColor = borderLightThemeColor; -const lightColorSessionBorder = `1px solid ${lightColorSessionBorderColor}`; -const lightColorRecoveryPhraseBannerBg = whiteColor; -const lightColorPillDivider = `${blackColor}1A`; -const lightColorLastSeenIndicator = blackColor; -const lightColorQuoteBottomBarBg = '#f0f0f0'; -const lightColorCellBackground = '#f9f9f9'; -export const lightColorReceivedMessageBg = '#f5f5f5'; -const lightColorReceivedMessageText = blackColor; - -const lightColorPillDividerText = '#555555'; - -const lightInputBackground = '#efefef'; -const lightFilterSessionText = 'brightness(0) saturate(100%)'; -const lightUnreadBorder = `4px solid ${accentLightTheme}`; - -const lightScrollbarThumb = darkGrayColor; -const lightFakeChatBubbleBg = '#f5f5f5'; - -const lightInboxBackground = whiteColor; -const lightLeftPaneOverlayBg = lightInboxBackground; -const lightConversationItemSelected = '#f0f0f0'; -const lightConversationItemHasUnread = '#fcfcfc'; -const lightConversationList = '#f9f9f9'; - -const lightTextHighlight = `${blackColor}88`; -const lightForegroundPrimary = whiteColor; -const lightBackgroundPrimary = '#272726'; -const lightButtonGreen = '#272726'; -const lightModalBackground = '#fcfcfc'; - -const lightMessageRequestBannerBackground = lightColorQuoteBottomBarBg; -const lightMessageRequestBannerIconBackground = '#585858'; -const lightMessageRequestBannerUnreadBackground = lightColorClickableHovered; -const lightMessageRequestBannerIcon = whiteColor; - -export const switchHtmlToLightTheme = () => { - document.documentElement.style.setProperty('--color-accent', lightColorAccent); - document.documentElement.style.setProperty('--color-accent-rgb', lightColorAccentRGB); - document.documentElement.style.setProperty('--color-accent-button', lightColorAccentButton); - document.documentElement.style.setProperty('--color-text', lightColorText); - document.documentElement.style.setProperty('--color-text-rgb', lightColorTextRGB); - document.documentElement.style.setProperty('--color-text-menu-highlighted', lightColorText); - document.documentElement.style.setProperty('--color-text-subtle', lightColorTextSubtle); - document.documentElement.style.setProperty('--color-text-accent', lightColorTextAccent); - document.documentElement.style.setProperty('--color-text-opposite', lightColorTextOpposite); - - document.documentElement.style.setProperty('--color-session-shadow', lightColorSessionShadow); - document.documentElement.style.setProperty( - '--color-compose-view-button-background', - lightColorComposeViewBg - ); - document.documentElement.style.setProperty( - '--color-sent-message-background', - lightColorSentMessageBg - ); - // TODO: This might be wrong. Didn't merge correctly. - document.documentElement.style.setProperty('--color-sent-message-text', blackColor); - document.documentElement.style.setProperty( - '--color-clickable-hovered', - lightColorClickableHovered - ); - document.documentElement.style.setProperty('--color-session-border', lightColorSessionBorder); - document.documentElement.style.setProperty( - '--color-session-border', - lightColorSessionBorderColor - ); - document.documentElement.style.setProperty( - '--color-recovery-phrase-banner-background', - lightColorRecoveryPhraseBannerBg - ); - document.documentElement.style.setProperty('--color-pill-divider', lightColorPillDivider); - document.documentElement.style.setProperty( - '--color-last-seen-indicator', - lightColorLastSeenIndicator - ); - document.documentElement.style.setProperty( - '--color-quote-bottom-bar-background', - lightColorQuoteBottomBarBg - ); - document.documentElement.style.setProperty('--color-cell-background', lightColorCellBackground); - document.documentElement.style.setProperty( - '--color-received-message-text', - lightColorReceivedMessageText - ); - document.documentElement.style.setProperty( - '--color-received-message-background', - lightColorReceivedMessageBg - ); - document.documentElement.style.setProperty( - '--color-pill-divider-text', - lightColorPillDividerText - ); - document.documentElement.style.setProperty('--color-input-background', lightInputBackground); - document.documentElement.style.setProperty('--filter-session-text', lightFilterSessionText); - document.documentElement.style.setProperty('--border-unread', lightUnreadBorder); - - document.documentElement.style.setProperty('--color-scroll-bar-thumb', lightScrollbarThumb); - document.documentElement.style.setProperty( - '--color-fake-chat-bubble-background', - lightFakeChatBubbleBg - ); - document.documentElement.style.setProperty('--color-inbox-background', lightInboxBackground); - document.documentElement.style.setProperty( - '--color-left-pane-overlay-background', - lightLeftPaneOverlayBg - ); - document.documentElement.style.setProperty( - '--color-conversation-item-selected', - lightConversationItemSelected - ); - document.documentElement.style.setProperty( - '--color-conversation-item-has-unread', - lightConversationItemHasUnread - ); - document.documentElement.style.setProperty('--color-conversation-list', lightConversationList); - - document.documentElement.style.setProperty('--color-text-highlight', lightTextHighlight); - document.documentElement.style.setProperty('--color-foreground-primary', lightForegroundPrimary); - document.documentElement.style.setProperty('--color-background-primary', lightBackgroundPrimary); - document.documentElement.style.setProperty('--color-button-green', lightButtonGreen); - document.documentElement.style.setProperty('--color-modal-background', lightModalBackground); - document.documentElement.style.setProperty('--border-session', lightColorSessionBorder); - document.documentElement.style.setProperty( - '--color-request-banner-background', - lightMessageRequestBannerBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-icon-background', - lightMessageRequestBannerIconBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-unread-background', - lightMessageRequestBannerUnreadBackground - ); - document.documentElement.style.setProperty( - '--color-request-banner-icon', - lightMessageRequestBannerIcon - ); -}; - // default to classic light theme export const SessionGlobalStyles = createGlobalStyle` html { @@ -381,13 +77,6 @@ export const SessionGlobalStyles = createGlobalStyle` /* ANIMATIONS */ --default-duration: 0.25s; - /* FILTERS */ - --filter-session-text: ${lightFilterSessionText}; - - /* BORDERS */ - --border-unread: ${lightUnreadBorder}; - --border-session: ${lightColorSessionBorder}; - /* CONSTANTS */ --composition-container-height: 60px; --search-input-height: 34px; @@ -423,41 +112,7 @@ export const SessionGlobalStyles = createGlobalStyle` --color-destructive-alt: ${destructiveAltColor}; --color-destructive-alt-rgb: ${destructiveAltColorRGB}; /* COLORS */ - --color-accent: ${lightColorAccent}; - --color-accent-rgb: ${lightColorAccentRGB}; - --color-accent-button: ${lightColorAccentButton}; - - --color-text: ${lightColorText}; - --color-text-rgb: ${lightColorTextRGB}; - --color-text-subtle: ${lightColorTextSubtle}; - --color-text-accent: ${lightColorTextAccent}; - --color-text-opposite: ${lightColorTextOpposite}; - --color-session-shadow: ${lightColorSessionShadow}; - --color-compose-view-button-background: ${lightColorComposeViewBg}; - --color-sent-message-background: ${lightColorSentMessageBg}; - --color-sent-message-text: ${blackColor}; - --color-clickable-hovered: ${lightColorClickableHovered}; - --color-session-border: ${lightColorSessionBorderColor}; - --color-recovery-phrase-banner-background: ${lightColorRecoveryPhraseBannerBg}; - --color-pill-divider: ${lightColorPillDivider}; - --color-last-seen-indicator: ${lightColorLastSeenIndicator}; - --color-quote-bottom-bar-background: ${lightColorQuoteBottomBarBg}; - --color-cell-background: ${lightColorCellBackground}; - --color-pill-divider-text: ${lightColorPillDividerText}; - --color-input-background: ${lightInputBackground}; - --color-scroll-bar-thumb: ${lightScrollbarThumb}; - --color-fake-chat-bubble-background: ${lightFakeChatBubbleBg}; - --color-inbox-background: ${lightInboxBackground}; - --color-left-pane-overlay-background: ${lightLeftPaneOverlayBg}; - --color-conversation-item-selected: ${lightConversationItemSelected}; - --color-conversation-item-has-unread: ${lightConversationItemHasUnread}; - --color-conversation-list: ${lightConversationList}; - --color-text-highlight: ${lightTextHighlight}; - --color-foreground-primary: ${lightForegroundPrimary}; - --color-background-primary: ${lightBackgroundPrimary}; - --color-button-green: ${lightButtonGreen}; - --color-modal-background: ${lightModalBackground}; --color-avatar-border-color: ${avatarBorderColor}; /* New Theme */ diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index 8ffa29e80..ad29e6d26 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -2,7 +2,6 @@ import { Dispatch } from 'redux'; import { applyTheme } from '../state/ducks/theme'; import { classicDark, classicLight, oceanDark, oceanLight } from '.'; import { convertThemeStateToName, THEMES, ThemeStateType } from './constants/colors'; -import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from './SessionTheme'; import { loadThemeColors } from './variableColors'; import { findPrimaryColorId, switchPrimaryColorTo } from './switchPrimaryColor'; @@ -19,22 +18,18 @@ export async function switchThemeTo(props: SwitchThemeProps) { switch (theme) { case 'classic-dark': - switchHtmlToDarkTheme(); loadThemeColors(classicDark); newTheme = 'classic-dark'; break; case 'classic-light': - switchHtmlToLightTheme(); loadThemeColors(classicLight); newTheme = 'classic-light'; break; case 'ocean-dark': - switchHtmlToDarkTheme(); loadThemeColors(oceanDark); newTheme = 'ocean-dark'; break; case 'ocean-light': - switchHtmlToLightTheme(); loadThemeColors(oceanLight); newTheme = 'ocean-light'; break; From 43f8c66801b6c42f0a463917e8ea4f17813af18c Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 14:57:33 +1100 Subject: [PATCH 02/10] fix: more sass cleanup --- stylesheets/_global.scss | 120 +------------------------------- stylesheets/_mixins.scss | 25 ------- stylesheets/_modal.scss | 4 +- stylesheets/_session_theme.scss | 1 - stylesheets/_variables.scss | 9 --- stylesheets/manifest.scss | 3 +- ts/themes/SessionTheme.tsx | 1 + 7 files changed, 7 insertions(+), 156 deletions(-) delete mode 100644 stylesheets/_variables.scss diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index fcc3e6be2..3dc56d7df 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -4,7 +4,8 @@ html { height: 100%; - background-color: white; + // Default theme is Classic Dark + background-color: black; } body { @@ -40,15 +41,6 @@ audio { max-width: 100%; } -.clearfix:before, -.clearfix:after { - display: table; - content: ' '; -} -.clearfix:after { - clear: both; -} - .hide { display: none; } @@ -67,118 +59,12 @@ button { } } } -button.grey { - border-radius: $border-radius; - border: solid 1px var(--color-light-gray-color); - cursor: pointer; - margin: 1em auto; - padding: 1em; - font-family: inherit; - color: var(--color-gray-color); - background: var(--color-lightest-gray-color); - box-shadow: 0 0 10px -5px rgba(var(--color-gray-color-rgb), 0.5); - - &:hover { - box-shadow: 0 0 10px -3px rgba(var(--color-gray-color-rgb), 0.7); - } - - &[disabled='disabled'] { - &, - &:hover { - opacity: 0.5; - box-shadow: none; - cursor: default; - } - } -} a { cursor: pointer; user-select: text; } -.file-input { - position: relative; - .choose-file { - cursor: pointer; - } - - input[type='file'] { - // Must be displayed in order to programmatically - // insert file paths) - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - cursor: pointer; - z-index: -100; - } -} - -.banner { - z-index: 100; - - // what's the right color? - background-color: var(--color-light-blue-color); - color: black; - box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); - - position: absolute; - top: 25px; - right: 30px; - left: 30px; - - padding: 5px 25px 5px 10px; - - text-align: center; - border-radius: 10px; - - cursor: pointer; - - .warning { - width: 18px; - height: 18px; - display: inline-block; - vertical-align: text-bottom; - @include color-svg('../images/warning.svg', black); - } - - .dismiss { - position: absolute; - right: 3px; - top: 3px; - - height: 23px; - width: 23px; - @include color-svg('../images/x.svg', black); - } -} - -$loading-height: 16px; - -.loading { - position: relative; - &::before { - display: block; - margin: 0px auto; - content: ' '; - height: $loading-height; - width: $loading-height; - border-radius: 2 * $loading-height; - border: solid 3px; - border-color: var(--color-light-blue-color) var(--color-light-blue-color) - var(--color-lightest-gray-color) var(--color-lightest-gray-color) !important; - animation: rotate 1s linear infinite; - } - - @keyframes rotate { - to { - transform: rotate(360deg); - } - } -} - @keyframes loading { 50% { transform: scale(1); @@ -199,7 +85,7 @@ $loading-height: 16px; display: flex; align-items: center; user-select: none; - // force this to black, to stay consistent with the password prompt being in dark mode too. + // Default theme is Classic Dark so we force this for the password prompt background-color: black; .content { diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss index f47a758e0..e58cdb70a 100644 --- a/stylesheets/_mixins.scss +++ b/stylesheets/_mixins.scss @@ -1,30 +1,5 @@ -@mixin button-reset { - background: none; - color: inherit; - border: none; - padding: 0; - font: inherit; - cursor: pointer; - outline: inherit; -} - @mixin color-svg($svg, $color) { -webkit-mask: url($svg) no-repeat center; -webkit-mask-size: 100%; background-color: $color; } - -@mixin header-icon-white($svg) { - @include color-svg($svg, rgba(255, 255, 255, 0.8)); - &:focus, - &:hover { - @include color-svg($svg, white); - } -} -@mixin header-icon-black($svg) { - @include color-svg($svg, rgba(0, 0, 0, 0.5)); - &:focus, - &:hover { - @include color-svg($svg, black); - } -} diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index 9e3df3e82..1fcc0ef5e 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -15,7 +15,7 @@ margin: 100px auto; padding: 1em; background-color: var(--modal-background-content-color); - border-radius: $border-radius; + border-radius: var(--border-radius); overflow: auto; box-shadow: var(--modal-drop-shadow); } @@ -101,7 +101,7 @@ min-width: 60%; padding: 1em; background: var(--modal-background-content-color); - border-radius: $border-radius; + border-radius: var(--border-radius); overflow: auto; box-shadow: 0px 0px 15px 0px var(--modal-background-color); } diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 1bc8d3aaf..15c5c65a7 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -87,7 +87,6 @@ @include fontAccentBold(); } -// TODO Theming - Confirm this works h1 { @include session-h-title; color: var(--text-secondary-color); diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss deleted file mode 100644 index 0f75af332..000000000 --- a/stylesheets/_variables.scss +++ /dev/null @@ -1,9 +0,0 @@ -// A few layout variables used cross-file - -$header-height: 55px; -$button-height: 24px; - -$border-radius: 5px; - -$font-size: 14px; -$font-size-small: calc(13 / 14) + em; diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index e660524f3..14fcfa59a 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -7,9 +7,8 @@ @import '../node_modules/sanitize.css/forms.css'; @import '../node_modules/sanitize.css/typography.css'; -// Global Settings, Variables, and Mixins +// Global Settings and Mixins @import 'session_constants'; -@import 'variables'; @import 'mixins'; @import 'global'; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 4e99faa18..03ab0bc63 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -70,6 +70,7 @@ export const SessionGlobalStyles = createGlobalStyle` --padding-message-content: 7px 13px; --padding-link-preview: -7px -13px 7px -13px; // bottom has positive value because a link preview has always a body below --border-radius-message-box: 16px; + --border-radius: 5px; /* SIZES */ --main-view-header-height: 63px; From a33e0345aab569f9148bb78be5375294d492f63d Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 15:11:58 +1100 Subject: [PATCH 03/10] fix: outline button colors in dark themes --- ts/themes/classicDark.ts | 4 ++-- ts/themes/oceanDark.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts index a2b27ee19..29c771b3f 100644 --- a/ts/themes/classicDark.ts +++ b/ts/themes/classicDark.ts @@ -42,9 +42,9 @@ const classicDark: ThemeColorVariables = { '--button-outline-background-hover-color': `rgba(${hexColorToRGB( THEMES.CLASSIC_DARK.COLOR6 )}, 0.3)`, - '--button-outline-text-color': 'var(--text-primary-color)', + '--button-outline-text-color': 'var(--primary-color)', '--button-outline-text-hover-color': 'var(--text-primary-color)', - '--button-outline-border-color': 'var(--text-primary-color)', + '--button-outline-border-color': 'var(--primary-color)', '--button-outline-border-hover-color': 'var(--text-primary-color)', '--button-outline-disabled-color': 'var(--disabled-color)', diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts index 479c9b337..c51f83288 100644 --- a/ts/themes/oceanDark.ts +++ b/ts/themes/oceanDark.ts @@ -42,7 +42,7 @@ const oceanDark: ThemeColorVariables = { '--button-outline-background-hover-color': `rgba(${hexColorToRGB( THEMES.OCEAN_DARK.COLOR7! )}, 0.3)`, - '--button-outline-text-color': 'var(--text-primary-color)', + '--button-outline-text-color': 'var(--primary-color)', '--button-outline-text-hover-color': 'var(--text-primary-color)', '--button-outline-border-color': 'var(--primary-color)', '--button-outline-border-hover-color': 'var(--text-primary-color)', From 948a531eed89cf5d2144832beaafd041046b5437 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 15:13:52 +1100 Subject: [PATCH 04/10] feat: more cleanup and added grey to COLORS --- stylesheets/_lightbox.scss | 6 ++-- ts/themes/SessionTheme.tsx | 61 ---------------------------------- ts/themes/constants/colors.tsx | 5 +++ ts/themes/globals.tsx | 5 +++ 4 files changed, 13 insertions(+), 64 deletions(-) diff --git a/stylesheets/_lightbox.scss b/stylesheets/_lightbox.scss index 0e454af01..22a1af32c 100644 --- a/stylesheets/_lightbox.scss +++ b/stylesheets/_lightbox.scss @@ -33,18 +33,18 @@ } &:hover { - background: var(--color-gray-color); + background: var(--gray-color); } &.save { &:before { - @include color-svg('../images/save.svg', white); + @include color-svg('../images/save.svg', var(--white-color)); } } &.close { &:before { - @include color-svg('../images/x.svg', white); + @include color-svg('../images/x.svg', var(--white-color)); } } } diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 03ab0bc63..a73ce0254 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -4,45 +4,12 @@ import { createGlobalStyle } from 'styled-components'; import { classicLight } from './'; import { declareCSSVariables, THEME_GLOBALS } from './globals'; -export const whiteColor = '#ffffff'; const whiteColorRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba -const blackColor = '#000000'; -const blackColorRGB = '0, 0, 0'; // we need rgb values if we want css variables within rgba -const warning = '#e7b100'; -const destructive = '#ff453a'; -const destructiveAltColor = '#ff4538'; const destructiveAltColorRGB = '255, 69, 56'; -const accentLightTheme = '#00e97b'; -const accentDarkTheme = '#00f782'; -const borderLightThemeColor = '#f1f1f1'; -const borderDarkThemeColor = '#ffffff0F'; // THEME INDEPEDENT COLORS const avatarBorderColor = '#00000059'; -// Blacks - -// Blues -const lightBlueColor = '#a2d2f4'; -const darkBlueColor = '#2090ea'; - -// Greens -const sessionGreenColor = accentDarkTheme; - -// Grays -const grayColor = '#616161'; -const grayColorRBG = '97, 97, 97'; -const lightGrayColor = '#8b8e91'; -const lighterGrayColor = '#e9e9e9'; -const lightestGrayColor = '#f3f3f3'; -const darkGrayColor = '#414347'; -const darkGrayColorRGB = '65, 67, 71'; -const darkerGrayColor = '#2f2f2f'; -const darkestGrayColor = '#17191d'; - -// Transparent -const transparentColor = 'transparent'; - // default to classic light theme export const SessionGlobalStyles = createGlobalStyle` html { @@ -83,37 +50,9 @@ export const SessionGlobalStyles = createGlobalStyle` --search-input-height: 34px; /* COLORS NOT CHANGING BETWEEN THEMES */ - --color-black-color: ${blackColor}; - --color-black-color-rgb: ${blackColorRGB}; - --color-light-black-color: ${`rgba(${blackColorRGB}, 0.2)`}; - --color-lighter-black-color: ${`rgba(${blackColorRGB}, 0.15)`}; - --color-darkest-black-color: ${`rgba(${blackColorRGB}, 0.6)`}; - --color-session-green-color: ${sessionGreenColor}; - --color-white-color: ${whiteColor}; --color-white-color-rgb: ${whiteColorRGB}; - --color-lighter-white-color: ${`rgba(${whiteColorRGB}, 0.15)`}; - --color-darkest-white-color: ${`rgba(${whiteColorRGB}, 0.85)`}; - - --color-gray-color: ${grayColor}; - --color-gray-color-rgb: ${grayColorRBG}; - --color-light-gray-color: ${lightGrayColor}; - --color-lighter-gray-color: ${lighterGrayColor}; - --color-lightest-gray-color: ${lightestGrayColor}; - --color-dark-gray-color: ${darkGrayColor}; - --color-dark-gray-color-rgb: ${darkGrayColorRGB}; - --color-darker-gray-color: ${darkerGrayColor}; - --color-darkest-gray-color: ${darkestGrayColor}; - --color-light-blue-color: ${lightBlueColor}; - --color-dark-blue-color: ${darkBlueColor}; - --color-transparent-color: ${transparentColor}; - - --color-warning: ${warning}; - --color-destructive: ${destructive}; - --color-destructive-alt: ${destructiveAltColor}; --color-destructive-alt-rgb: ${destructiveAltColorRGB}; - /* COLORS */ - --color-avatar-border-color: ${avatarBorderColor}; /* New Theme */ diff --git a/ts/themes/constants/colors.tsx b/ts/themes/constants/colors.tsx index fbafa6ebd..996637788 100644 --- a/ts/themes/constants/colors.tsx +++ b/ts/themes/constants/colors.tsx @@ -23,6 +23,7 @@ type Colors = { TRANSPARENT: string; WHITE: string; BLACK: string; + GREY: string; }; // Session Brand Color @@ -59,6 +60,9 @@ const white = '#FFFFFF'; // Black const black = '#000000'; +// Grey +const grey = '#616161'; + const COLORS: Colors = { PRIMARY: { GREEN: primaryGreen, @@ -78,6 +82,7 @@ const COLORS: Colors = { TRANSPARENT: transparent, WHITE: white, BLACK: black, + GREY: grey, }; export type PrimaryColorStateType = diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index 001cc22c9..db9756900 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -14,6 +14,7 @@ export type ThemeGlobals = { '--transparent-color': string; '--white-color': string; '--black-color': string; + '--grey-color': string; /* Shadows */ '--shadow-color': string; @@ -47,6 +48,7 @@ export const THEME_GLOBALS: ThemeGlobals = { '--transparent-color': COLORS.TRANSPARENT, '--white-color': COLORS.WHITE, '--black-color': COLORS.BLACK, + '--grey-color': COLORS.GREY, '--shadow-color': 'var(--black-color)', '--drop-shadow': `0 0 4px 0 var(--shadow-color)`, @@ -62,6 +64,9 @@ export const THEME_GLOBALS: ThemeGlobals = { '--lightbox-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`, '--lightbox-caption-background-color': 'rgba(192, 192, 192, .40)', '--lightbox-icon-stroke-color': 'var(--white-color)', + + // TODO Theming - Add selection colors for dark and light themes + // Current light uses #00000088 and dark uses #FFFFFF88 }; // These should only be needed for the global style (at root). From a5a48e0ae7706979ce26ec5264e6e7b0003d1505 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 15:32:34 +1100 Subject: [PATCH 05/10] fix: updated avatar border color --- stylesheets/_avatar.scss | 3 +-- stylesheets/_session_conversation.scss | 15 --------------- .../AvatarPlaceHolder/AvatarPlaceHolder.tsx | 8 +++----- 3 files changed, 4 insertions(+), 22 deletions(-) diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss index 8ca4873f8..743cb203e 100644 --- a/stylesheets/_avatar.scss +++ b/stylesheets/_avatar.scss @@ -9,8 +9,7 @@ img { object-fit: cover; border-radius: 50%; - // TODO Theming update - border: 1px solid var(--color-avatar-border-color); + border: 1px solid var(--avatar-border-color); } } diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index b74995e93..12539b210 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -18,21 +18,6 @@ } } -@keyframes pulseLight { - 0% { - box-shadow: 0px 0px 0px 0px var(--danger-color); - } - - // TODO Theming - Needs fixing - 50% { - box-shadow: 0px 0px 12px 0px rgba(var(--color-destructive-alt-rgb), 1); - } - - 100% { - box-shadow: 0px 0px 0px 0px rgba(var(--color-destructive-alt-rgb), 1); - } -} - .conversation-item__options-pane { position: absolute; height: 100%; diff --git a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx index c51fe3412..dee98804c 100644 --- a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx +++ b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx @@ -21,7 +21,7 @@ const sha512FromPubkey = async (pubkey: string): Promise => { // key is the pubkey, value is the hash const cachedHashes = new Map(); -const avatarPlaceholderColors = Object.values(COLORS.PRIMARY); +const avatarPlaceholderColors: Array = Object.values(COLORS.PRIMARY); function useHashBasedOnPubkey(pubkey: string) { const [hash, setHash] = useState(undefined); @@ -80,7 +80,6 @@ export const AvatarPlaceHolder = (props: Props) => { if (loading || !hash) { // return grey circle - // TODO Theming update return ( @@ -90,7 +89,7 @@ export const AvatarPlaceHolder = (props: Props) => { r={rWithoutBorder} fill="#d2d2d3" shapeRendering="geometricPrecision" - stroke={'var(--color-avatar-border-color)'} + stroke={'var(--avatar-border-color)'} strokeWidth="1" /> @@ -106,7 +105,6 @@ export const AvatarPlaceHolder = (props: Props) => { const bgColor = avatarPlaceholderColors[bgColorIndex]; - // TODO Theming Update return ( @@ -116,7 +114,7 @@ export const AvatarPlaceHolder = (props: Props) => { r={rWithoutBorder} fill={bgColor} shapeRendering="geometricPrecision" - stroke={'var(--color-avatar-border-color)'} + stroke={'var(--avatar-border-color)'} strokeWidth="1" /> Date: Tue, 11 Oct 2022 15:34:06 +1100 Subject: [PATCH 06/10] feat: moved remaning old theme globals to new globals --- stylesheets/_session.scss | 6 ++-- ts/themes/SessionTheme.tsx | 51 +------------------------- ts/themes/globals.tsx | 73 ++++++++++++++++++++++++++++++++++++-- 3 files changed, 75 insertions(+), 55 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 4ef3669c4..518e83e03 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -40,7 +40,8 @@ textarea { } ::selection { - background: var(--color-text-highlight); + // TODO Theming - See color + // background: var(--color-text-highlight); } .shadowed { @@ -160,8 +161,7 @@ label { .conversation-header { .module-avatar img { - // TODO Theming Update - box-shadow: 0px 0px 5px 0px rgba(var(--color-white-color-rgb), 0.2); + box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2); } .search-icon { diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index a73ce0254..9806360cc 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -4,58 +4,9 @@ import { createGlobalStyle } from 'styled-components'; import { classicLight } from './'; import { declareCSSVariables, THEME_GLOBALS } from './globals'; -const whiteColorRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba -const destructiveAltColorRGB = '255, 69, 56'; - -// THEME INDEPEDENT COLORS -const avatarBorderColor = '#00000059'; - -// default to classic light theme +// Defaults to Classic Dark theme export const SessionGlobalStyles = createGlobalStyle` html { - /* FONTS */ - --font-default: 'Roboto'; - --font-font-accent: 'Loor'; - --font-font-mono: 'SpaceMono'; - --font-size-xs: 11px; - --font-size-sm: 13px; - --font-size-md: 15px; - --font-size-lg: 17px; - --font-size-h1: 30px; - --font-size-h2: 24px; - --font-size-h3: 20px; - --font-size-h4: 16px; - - /* MARGINS */ - --margins-xs: 5px; - --margins-sm: 10px; - --margins-md: 15px; - --margins-lg: 20px; - - /* PADDING */ - // TODO Theming - review and update after Audric has done link preview fix - --padding-message-content: 7px 13px; - --padding-link-preview: -7px -13px 7px -13px; // bottom has positive value because a link preview has always a body below - --border-radius-message-box: 16px; - --border-radius: 5px; - - /* SIZES */ - --main-view-header-height: 63px; - - /* ANIMATIONS */ - --default-duration: 0.25s; - - /* CONSTANTS */ - --composition-container-height: 60px; - --search-input-height: 34px; - - /* COLORS NOT CHANGING BETWEEN THEMES */ - - --color-white-color-rgb: ${whiteColorRGB}; - --color-destructive-alt-rgb: ${destructiveAltColorRGB}; - --color-avatar-border-color: ${avatarBorderColor}; - - /* New Theme */ ${declareCSSVariables(THEME_GLOBALS)} ${declareCSSVariables(classicLight)} }; diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index db9756900..bf32e2c72 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -1,9 +1,44 @@ import { hexColorToRGB } from '../util/hexColorToRGB'; import { COLORS } from './constants/colors'; -// For now this only keeps the colors -// TODO Theming add margin, padding, font, variables here. +// These variables are independant of the current theme export type ThemeGlobals = { + /* Fonts */ + '--font-default': string; + '--font-font-accent': string; + '--font-font-mono': string; + '--font-size-xs': string; + '--font-size-sm': string; + '--font-size-md': string; + '--font-size-lg': string; + '--font-size-h1': string; + '--font-size-h2': string; + '--font-size-h3': string; + '--font-size-h4': string; + + /* Margins */ + '--margins-xs': string; + '--margins-sm': string; + '--margins-md': string; + '--margins-lg': string; + + /* Padding */ + '--padding-message-content': string; + '--padding-link-preview': string; + + /* Border Radius */ + '--border-radius': string; + '--border-radius-message-box': string; + + /* Sizes */ + '--main-view-header-height': string; + '--composition-container-height': string; + '--search-input-height': string; + + /* Animations */ + '--default-duration': string; + + /* Colors */ '--green-color': string; '--blue-color': string; '--yellow-color': string; @@ -34,10 +69,42 @@ export type ThemeGlobals = { '--lightbox-background-color': string; '--lightbox-caption-background-color': string; '--lightbox-icon-stroke-color': string; + + /* Avatar Border */ + '--avatar-border-color': string; }; // These are only set once in the global style (at root). export const THEME_GLOBALS: ThemeGlobals = { + '--font-default': 'Roboto', + '--font-font-accent': 'Loor', + '--font-font-mono': 'SpaceMono', + '--font-size-xs': '11px', + '--font-size-sm': '13px', + '--font-size-md': '15px', + '--font-size-lg': '17px', + '--font-size-h1': '30px', + '--font-size-h2': '24px', + '--font-size-h3': '20px', + '--font-size-h4': '16px', + + '--margins-xs': '5px', + '--margins-sm': '10px', + '--margins-md': '15px', + '--margins-lg': '20px', + + '--padding-message-content': '7px 13px', + '--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below + + '--border-radius': '5px', + '--border-radius-message-box': '16px', + + '--main-view-header-height': '63px', + '--composition-container-height': '60px', + '--search-input-height': '34px', + + '--default-duration': '0.25s', + '--green-color': COLORS.PRIMARY.GREEN, '--blue-color': COLORS.PRIMARY.BLUE, '--yellow-color': COLORS.PRIMARY.YELLOW, @@ -65,6 +132,8 @@ export const THEME_GLOBALS: ThemeGlobals = { '--lightbox-caption-background-color': 'rgba(192, 192, 192, .40)', '--lightbox-icon-stroke-color': 'var(--white-color)', + '--avatar-border-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.59)`, + // TODO Theming - Add selection colors for dark and light themes // Current light uses #00000088 and dark uses #FFFFFF88 }; From 456a386cfa155af4b9699268a460863812090224 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 15:58:43 +1100 Subject: [PATCH 07/10] feat: added text selection color to themes --- stylesheets/_session.scss | 3 +-- ts/themes/classicDark.ts | 1 + ts/themes/classicLight.ts | 1 + ts/themes/globals.tsx | 4 ---- ts/themes/oceanDark.ts | 1 + ts/themes/oceanLight.ts | 1 + ts/themes/variableColors.tsx | 1 + 7 files changed, 6 insertions(+), 6 deletions(-) diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 518e83e03..370129e7a 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -40,8 +40,7 @@ textarea { } ::selection { - // TODO Theming - See color - // background: var(--color-text-highlight); + background: var(--text-selection-color); } .shadowed { diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts index 29c771b3f..041182857 100644 --- a/ts/themes/classicDark.ts +++ b/ts/themes/classicDark.ts @@ -12,6 +12,7 @@ const classicDark: ThemeColorVariables = { '--text-primary-color': THEMES.CLASSIC_DARK.COLOR6, '--text-secondary-color': THEMES.CLASSIC_DARK.COLOR5, + '--text-selection-color': `rgba(${hexColorToRGB(THEMES.CLASSIC_DARK.COLOR6)}, 0.5)`, '--border-color': THEMES.CLASSIC_DARK.COLOR3, diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts index 361314059..17999f57e 100644 --- a/ts/themes/classicLight.ts +++ b/ts/themes/classicLight.ts @@ -12,6 +12,7 @@ const classicLight: ThemeColorVariables = { '--text-primary-color': THEMES.CLASSIC_LIGHT.COLOR0, '--text-secondary-color': THEMES.CLASSIC_LIGHT.COLOR1, + '--text-selection-color': `rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.5)`, '--border-color': THEMES.CLASSIC_LIGHT.COLOR3, diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index bf32e2c72..defb0768e 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -133,16 +133,12 @@ export const THEME_GLOBALS: ThemeGlobals = { '--lightbox-icon-stroke-color': 'var(--white-color)', '--avatar-border-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.59)`, - - // TODO Theming - Add selection colors for dark and light themes - // Current light uses #00000088 and dark uses #FFFFFF88 }; // These should only be needed for the global style (at root). export function declareCSSVariables(variables: Record) { let output = ''; for (const [key, value] of Object.entries(variables)) { - console.log(`${key}: ${value}`); output += `${key}: ${value};\n`; } return output; diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts index c51f83288..a4202cb33 100644 --- a/ts/themes/oceanDark.ts +++ b/ts/themes/oceanDark.ts @@ -12,6 +12,7 @@ const oceanDark: ThemeColorVariables = { '--text-primary-color': THEMES.OCEAN_DARK.COLOR7!, '--text-secondary-color': THEMES.OCEAN_DARK.COLOR5, + '--text-selection-color': `rgba(${hexColorToRGB(THEMES.OCEAN_DARK.COLOR7!)}, 0.5)`, '--border-color': THEMES.OCEAN_DARK.COLOR4, diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts index 9b48b0e1c..bc754a13a 100644 --- a/ts/themes/oceanLight.ts +++ b/ts/themes/oceanLight.ts @@ -12,6 +12,7 @@ const oceanLight: ThemeColorVariables = { '--text-primary-color': THEMES.OCEAN_LIGHT.COLOR1, '--text-secondary-color': THEMES.OCEAN_LIGHT.COLOR2, + '--text-selection-color': `rgba(${hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR1)}, 0.5)`, '--border-color': THEMES.OCEAN_LIGHT.COLOR3, diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx index c32408dcd..6d1dabdc0 100644 --- a/ts/themes/variableColors.tsx +++ b/ts/themes/variableColors.tsx @@ -11,6 +11,7 @@ export type ThemeColorVariables = { /* Text */ '--text-primary-color': string; '--text-secondary-color': string; + '--text-selection-color': string; /* Borders */ '--border-color': string; From 1f7e95680124aa0a578f5169aa6487d2ca28a89b Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 16:06:00 +1100 Subject: [PATCH 08/10] fix: made --message-link-preview-background-color global --- ts/themes/classicDark.ts | 2 -- ts/themes/classicLight.ts | 2 -- ts/themes/globals.tsx | 10 ++++++++++ ts/themes/oceanDark.ts | 2 -- ts/themes/oceanLight.ts | 2 -- ts/themes/variableColors.tsx | 19 ------------------- 6 files changed, 10 insertions(+), 27 deletions(-) diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts index 041182857..ac386661b 100644 --- a/ts/themes/classicDark.ts +++ b/ts/themes/classicDark.ts @@ -130,8 +130,6 @@ const classicDark: ThemeColorVariables = { '--context-menu-text-color': 'var(--text-primary-color)', '--context-menu-text-hover-color': 'var(--black-color)', - '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, - '--suggestions-background-color': THEMES.CLASSIC_DARK.COLOR2, '--suggestions-background-hover-color': THEMES.CLASSIC_DARK.COLOR3, '--suggestions-text-color': 'var(--text-primary-color)', diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts index 17999f57e..8234ff952 100644 --- a/ts/themes/classicLight.ts +++ b/ts/themes/classicLight.ts @@ -130,8 +130,6 @@ const classicLight: ThemeColorVariables = { '--context-menu-text-color': 'var(--text-primary-color)', '--context-menu-text-hover-color': 'var(--black-color)', - '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, - '--suggestions-background-color': 'var(--background-secondary-color)', '--suggestions-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4, '--suggestions-text-color': 'var(--text-primary-color)', diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index defb0768e..623e5930e 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -72,6 +72,14 @@ export type ThemeGlobals = { /* Avatar Border */ '--avatar-border-color': string; + + /* Message Link Preview */ + /* Also used for Images */ + /* Also used for the Media Grid Items */ + /* Also used for Staged Generic Attachments */ + /* Also used for FileDropZone */ + /* Used for Quote References Not Found */ + '--message-link-preview-background-color': string; }; // These are only set once in the global style (at root). @@ -133,6 +141,8 @@ export const THEME_GLOBALS: ThemeGlobals = { '--lightbox-icon-stroke-color': 'var(--white-color)', '--avatar-border-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.59)`, + + '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, }; // These should only be needed for the global style (at root). diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts index a4202cb33..ecfba9bd4 100644 --- a/ts/themes/oceanDark.ts +++ b/ts/themes/oceanDark.ts @@ -130,8 +130,6 @@ const oceanDark: ThemeColorVariables = { '--context-menu-text-color': 'var(--text-primary-color)', '--context-menu-text-hover-color': 'var(--black-color)', - '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, - '--suggestions-background-color': 'var(--background-secondary-color)', '--suggestions-background-hover-color': THEMES.OCEAN_DARK.COLOR4, '--suggestions-text-color': 'var(--text-primary-color)', diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts index bc754a13a..a5d2f6fe8 100644 --- a/ts/themes/oceanLight.ts +++ b/ts/themes/oceanLight.ts @@ -130,8 +130,6 @@ const oceanLight: ThemeColorVariables = { '--context-menu-text-color': 'var(--text-primary-color)', '--context-menu-text-hover-color': 'var(--black-color)', - '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`, - '--suggestions-background-color': 'var(--background-secondary-color)', '--suggestions-background-hover-color': THEMES.OCEAN_LIGHT.COLOR4, '--suggestions-text-color': 'var(--text-primary-color)', diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx index 6d1dabdc0..085dbb998 100644 --- a/ts/themes/variableColors.tsx +++ b/ts/themes/variableColors.tsx @@ -31,7 +31,6 @@ export type ThemeColorVariables = { /* Menu Button */ '--menu-button-background-color': string; '--menu-button-background-hover-color': string; - /* TODO Theming Make a icon fill varible that uses the background color? */ '--menu-button-icon-color': string; /* Chat (Interaction) Buttons */ @@ -48,20 +47,17 @@ export type ThemeColorVariables = { '--settings-tab-background-selected-color': string; '--settings-tab-text-color': string; - /* TODO Theming probably consolidate this */ /* Buttons */ /* Outline (Default) */ '--button-outline-background-color': string; '--button-outline-background-hover-color': string; '--button-outline-text-color': string; - /* TODO Theming we might not need this */ '--button-outline-text-hover-color': string; '--button-outline-border-color': string; '--button-outline-border-hover-color': string; '--button-outline-disabled-color': string; /* Solid */ - /* TODO Theming - Should Pills have their own colors */ /* Also used for Pills */ '--button-solid-background-color': string; '--button-solid-background-hover-color': string; @@ -69,7 +65,6 @@ export type ThemeColorVariables = { '--button-solid-text-hover-color': string; /* Solid buttons stay the same and rely on the disabled pointer */ '--button-solid-disabled-color': string; - /* TODO Theming - Only light themes have shadows? */ '--button-solid-shadow-color': string; /* Simple */ @@ -116,18 +111,15 @@ export type ThemeColorVariables = { /* Toggle Switch */ '--toggle-switch-ball-color': string; '--toggle-switch-ball-shadow-color': string; - /* TODO Theming think this should be white instead of transparent */ '--toggle-switch-off-background-color': string; '--toggle-switch-off-border-color': string; '--toggle-switch-on-background-color': string; '--toggle-switch-on-border-color': string; - /* TODO Theming Think this is part of the Convesations Tab */ /* Unread Messages Alert */ '--unread-messages-alert-background-color': string; '--unread-messages-alert-text-color': string; - /* toggles between the Light and Dark mode for a Theme */ /* Color Mode Button */ '--button-color-mode-stroke-color': string; '--button-color-mode-hover-color': string; @@ -139,8 +131,6 @@ export type ThemeColorVariables = { '--emoji-reaction-bar-icon-background-color': string; '--emoji-reaction-bar-icon-color': string; - /* TODO Theming - Should Pills have their own colors? */ - /* Modals */ '--modal-background-content-color': string; '--modal-text-color': string; @@ -170,15 +160,6 @@ export type ThemeColorVariables = { '--context-menu-text-color': string; '--context-menu-text-hover-color': string; - /* Message Link Preview */ - /* Also used for Images */ - /* Also used for the Media Grid Items */ - /* Also used for Staged Generic Attachments */ - /* Also used for FileDropZone */ - /* Used for Quote References Not Found */ - /* Same for all Themes */ - '--message-link-preview-background-color': string; - /* Suggestions i.e. Mentions and Emojis */ '--suggestions-background-color': string; '--suggestions-background-hover-color': string; From cf8a66a82b421057ae5f77ed9764798dfe2d3a09 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 16:26:15 +1100 Subject: [PATCH 09/10] fix: resolved all outstanding theming todos --- stylesheets/_modules.scss | 4 +--- stylesheets/_session_left_pane.scss | 2 -- stylesheets/_session_signin.scss | 3 +-- ts/components/avatar/Avatar.tsx | 3 +-- ts/components/calling/InConversationCallContainer.tsx | 4 +--- ts/components/conversation/ConversationRequestInfo.tsx | 1 - ts/components/dialog/SessionModal.tsx | 2 +- ts/components/icon/SessionNotificationCount.tsx | 1 - ts/components/leftpane/MessageRequestsBanner.tsx | 7 +------ .../leftpane/conversation-list-item/HeaderItem.tsx | 1 - ts/components/menu/MessageRequestBannerContextMenu.tsx | 1 - ts/interactions/conversationInteractions.ts | 1 - ts/types/Reaction.ts | 1 - 13 files changed, 6 insertions(+), 25 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 579d17c3a..fd52ce5b8 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -968,8 +968,7 @@ } // Module: Caption Editor -// TODO Theming We don't seem to use this can we delete?' -// TODO we will probably remove this and the related component. +// NOTE This is currently not in use .module-caption-editor { background-color: rgba(0, 0, 0, 0.8); z-index: 20; @@ -1139,7 +1138,6 @@ outline: none; } -// TODO Theming - Needs Improvement // Module H5AudioPlayer .module-message__container--outgoing { .rhap_container { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 6a42b5d9d..7559e64ae 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -12,8 +12,6 @@ $session-compose-margin: 20px; &-list-item { background: var(--conversation-tab-background-color); - // TODO Theming, make everything have the default duration for transitioning colors - // transition: var(--default-duration); &:hover { background: var(--conversation-tab-background-hover-color); diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index d1da8a5f1..f173a0805 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -179,8 +179,7 @@ &-description-long { padding-top: 0; padding-bottom: 20px; - // TODO Theming needs to be updated - color: rgba(var(--black-color), 0.6); + color: var(--text-secondary-color); text-align: center; font-size: 12px; line-height: 20px; diff --git a/ts/components/avatar/Avatar.tsx b/ts/components/avatar/Avatar.tsx index c088a53ab..e073ce270 100644 --- a/ts/components/avatar/Avatar.tsx +++ b/ts/components/avatar/Avatar.tsx @@ -55,8 +55,7 @@ const CrownWrapper = styled.div` color: #f7c347; background: var(--background-primary-color); border-radius: 50%; - /* TODO Theming update? */ - filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3)); + box-shadow: var(--drop-shadow); `; export const CrownIcon = () => { diff --git a/ts/components/calling/InConversationCallContainer.tsx b/ts/components/calling/InConversationCallContainer.tsx index 731a1d957..46f7919fc 100644 --- a/ts/components/calling/InConversationCallContainer.tsx +++ b/ts/components/calling/InConversationCallContainer.tsx @@ -34,7 +34,6 @@ const InConvoCallWindow = styled.div` padding: 1rem; display: flex; - /* TODO Theming - Update? */ background-color: hsl(0, 0%, 15.7%); flex-shrink: 1; @@ -69,9 +68,8 @@ const StyledCenteredLabel = styled.div` transform: translateX(-50%); height: min-content; white-space: nowrap; - /* TODO Theming - Update? */ color: var(--white-color); - text-shadow: 0px 0px 8px white; + text-shadow: 0px 0px 8px var(--white-color); z-index: 5; `; diff --git a/ts/components/conversation/ConversationRequestInfo.tsx b/ts/components/conversation/ConversationRequestInfo.tsx index fb9ad94e1..9867daa05 100644 --- a/ts/components/conversation/ConversationRequestInfo.tsx +++ b/ts/components/conversation/ConversationRequestInfo.tsx @@ -14,7 +14,6 @@ const ConversationRequestTextBottom = styled.div` padding: var(--margins-lg); `; -// TODO Theming - Confirm this is correct? const ConversationRequestTextInner = styled.div` color: var(--text-secondary-color); text-align: center; diff --git a/ts/components/dialog/SessionModal.tsx b/ts/components/dialog/SessionModal.tsx index 9fb8bae37..dafe1f05b 100644 --- a/ts/components/dialog/SessionModal.tsx +++ b/ts/components/dialog/SessionModal.tsx @@ -27,7 +27,7 @@ interface State { isVisible: boolean; } -// TODO Theming - Can we remove this. +// NOTE This is currently unused. export class SessionModal extends React.PureComponent { public static defaultProps = { showExitIcon: true, diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx index 8084164e5..d0ec15217 100644 --- a/ts/components/icon/SessionNotificationCount.tsx +++ b/ts/components/icon/SessionNotificationCount.tsx @@ -20,7 +20,6 @@ const StyledCountContainer = styled.div<{ shouldRender: boolean }>` font-family: var(--font-default); border-radius: 50%; font-weight: 700; - /* TODO Theming Update */ background: var(--unread-messages-alert-background-color); transition: var(--default-duration); opacity: ${props => (props.shouldRender ? 1 : 0)}; diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx index 5f721d799..7c4a71587 100644 --- a/ts/components/leftpane/MessageRequestsBanner.tsx +++ b/ts/components/leftpane/MessageRequestsBanner.tsx @@ -17,11 +17,8 @@ const StyledMessageRequestBanner = styled.div` padding: 8px 12px; // adjusting for unread border always being active align-items: center; cursor: pointer; - /* TODO Theming - Discuss with Connnor */ background: var(--conversation-tab-background-color); - transition: var(--default-duration); - &:hover { background: var(--conversation-tab-background-hover-color); } @@ -30,7 +27,7 @@ const StyledMessageRequestBanner = styled.div` const StyledMessageRequestBannerHeader = styled.span` font-weight: bold; font-size: var(--font-size-md); - color: var(--conversation-tab-text-color); + color: var(--text-primary-color); padding-left: var(--margins-xs); margin-inline-start: 12px; line-height: 18px; @@ -66,7 +63,6 @@ const StyledGridContainer = styled.div` align-items: center; border-radius: 50%; justify-content: center; - /* TODO Theming - Is this right? */ background-color: var(--text-secondary-color); `; @@ -79,7 +75,6 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx index 4badf4950..1a45cf2c9 100644 --- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx +++ b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx @@ -116,7 +116,6 @@ const MentionAtSymbol = styled.span` cursor: pointer; :hover { - /* TODO Theming, should this be changed? */ filter: grayscale(0.7); } `; diff --git a/ts/components/menu/MessageRequestBannerContextMenu.tsx b/ts/components/menu/MessageRequestBannerContextMenu.tsx index 948e24e76..d7c3de2de 100644 --- a/ts/components/menu/MessageRequestBannerContextMenu.tsx +++ b/ts/components/menu/MessageRequestBannerContextMenu.tsx @@ -13,7 +13,6 @@ const MessageRequestBannerContextMenu = (props: PropsContextConversationItem) => const { triggerId } = props; return ( - // TODO Theming - Waiting on Session Components for correct colors diff --git a/ts/interactions/conversationInteractions.ts b/ts/interactions/conversationInteractions.ts index 1455c01bb..bb7059e56 100644 --- a/ts/interactions/conversationInteractions.ts +++ b/ts/interactions/conversationInteractions.ts @@ -491,7 +491,6 @@ export async function showLinkSharingConfirmationModalDialog(e: any) { const alreadyDisplayedPopup = (await Data.getItemById(hasLinkPreviewPopupBeenDisplayed))?.value || false; if (!alreadyDisplayedPopup) { - // TODO Theming possibly update window.inboxStore?.dispatch( updateConfirmModal({ shouldShowConfirm: diff --git a/ts/types/Reaction.ts b/ts/types/Reaction.ts index 01ada6352..89bf0a361 100644 --- a/ts/types/Reaction.ts +++ b/ts/types/Reaction.ts @@ -58,7 +58,6 @@ export interface NativeEmojiData { export interface FixedPickerProps { autoFocus?: boolean | undefined; title?: string | undefined; - // TODO Theming - Add Ocean Colors theme?: 'auto' | 'light' | 'dark' | undefined; perLine?: number | undefined; stickySearch?: boolean | undefined; From 99ff6243edd89c1227ace5bc7e221bf4a2f8e734 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Oct 2022 16:32:50 +1100 Subject: [PATCH 10/10] fix: the color mode button must not reset the primary color --- ts/components/leftpane/ActionsPanel.tsx | 2 ++ ts/themes/classicDark.ts | 1 - ts/themes/classicLight.ts | 1 - ts/themes/oceanDark.ts | 1 - ts/themes/oceanLight.ts | 1 - ts/themes/variableColors.tsx | 1 - 6 files changed, 2 insertions(+), 5 deletions(-) diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx index c17088ca1..67f842633 100644 --- a/ts/components/leftpane/ActionsPanel.tsx +++ b/ts/components/leftpane/ActionsPanel.tsx @@ -73,9 +73,11 @@ const Section = (props: { type: SectionType }) => { ? currentTheme.replace('light', 'dark') : currentTheme.replace('dark', 'light')) as ThemeStateType; + // We want to persist the primary color when using the color mode button await switchThemeTo({ theme: newTheme, mainWindow: true, + usePrimaryColor: true, dispatch, }); } else if (type === SectionType.PathIndicator) { diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts index ac386661b..c3d8825a9 100644 --- a/ts/themes/classicDark.ts +++ b/ts/themes/classicDark.ts @@ -3,7 +3,6 @@ import { COLORS, THEMES } from './constants/colors'; import { ThemeColorVariables } from './variableColors'; const classicDark: ThemeColorVariables = { - '--primary-color': THEMES.CLASSIC_DARK.PRIMARY, '--danger-color': THEMES.CLASSIC_DARK.DANGER, '--disabled-color': THEMES.CLASSIC_DARK.DISABLED, diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts index 8234ff952..29ec09d96 100644 --- a/ts/themes/classicLight.ts +++ b/ts/themes/classicLight.ts @@ -3,7 +3,6 @@ import { COLORS, THEMES } from './constants/colors'; import { ThemeColorVariables } from './variableColors'; const classicLight: ThemeColorVariables = { - '--primary-color': THEMES.CLASSIC_LIGHT.PRIMARY, '--danger-color': THEMES.CLASSIC_LIGHT.DANGER, '--disabled-color': THEMES.CLASSIC_LIGHT.DISABLED, diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts index ecfba9bd4..ce76e250c 100644 --- a/ts/themes/oceanDark.ts +++ b/ts/themes/oceanDark.ts @@ -3,7 +3,6 @@ import { COLORS, THEMES } from './constants/colors'; import { ThemeColorVariables } from './variableColors'; const oceanDark: ThemeColorVariables = { - '--primary-color': THEMES.OCEAN_DARK.PRIMARY, '--danger-color': THEMES.OCEAN_DARK.DANGER, '--disabled-color': THEMES.OCEAN_DARK.DISABLED, diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts index a5d2f6fe8..d6a9be588 100644 --- a/ts/themes/oceanLight.ts +++ b/ts/themes/oceanLight.ts @@ -3,7 +3,6 @@ import { COLORS, THEMES } from './constants/colors'; import { ThemeColorVariables } from './variableColors'; const oceanLight: ThemeColorVariables = { - '--primary-color': THEMES.OCEAN_LIGHT.PRIMARY, '--danger-color': THEMES.OCEAN_LIGHT.DANGER, '--disabled-color': THEMES.OCEAN_LIGHT.DISABLED, diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx index 085dbb998..5cefad6bc 100644 --- a/ts/themes/variableColors.tsx +++ b/ts/themes/variableColors.tsx @@ -1,6 +1,5 @@ // Default Theme should be Classic Dark export type ThemeColorVariables = { - '--primary-color': string; '--danger-color': string; '--disabled-color': string;