diff --git a/ts/components/conversation/SessionEmojiPanel.tsx b/ts/components/conversation/SessionEmojiPanel.tsx index 88e086ff0..5eddc6fb0 100644 --- a/ts/components/conversation/SessionEmojiPanel.tsx +++ b/ts/components/conversation/SessionEmojiPanel.tsx @@ -103,7 +103,7 @@ export const SessionEmojiPanel = forwardRef((props: Props switch (theme) { case 'ocean-dark': setPanelBackgroundRGB(hexColorToRGB(THEMES.OCEAN_DARK.COLOR1)); - setPanelTextRGB(hexColorToRGB(THEMES.OCEAN_DARK.COLOR6)); + setPanelTextRGB(hexColorToRGB(THEMES.OCEAN_DARK.COLOR7!)); break; case 'ocean-light': setPanelBackgroundRGB(hexColorToRGB(THEMES.OCEAN_LIGHT.COLOR7!)); diff --git a/ts/themes/colors.tsx b/ts/themes/colors.tsx index bf4e4c590..d4e9bf209 100644 --- a/ts/themes/colors.tsx +++ b/ts/themes/colors.tsx @@ -169,7 +169,8 @@ const oceanDark2 = '#252735'; const oceanDark3 = '#2B2D40'; const oceanDark4 = '#3D4A5D'; const oceanDark5 = '#A6A9CE'; -const oceanDark6 = '#FFFFFF'; +const oceanDark6 = '#5CAACC'; +const oceanDark7 = '#FFFFFF'; const THEMES: Themes = { CLASSIC_LIGHT: { @@ -220,6 +221,7 @@ const THEMES: Themes = { COLOR4: oceanDark4, COLOR5: oceanDark5, COLOR6: oceanDark6, + COLOR7: oceanDark7, }, }; diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index de3e2e90d..8d82d0189 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -580,7 +580,6 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) { '--button-solid-text-hover-color', 'var(--text-primary-color)' ); - // TODO Theming - Confirm this document.documentElement.style.setProperty( '--button-solid-disabled-color', THEMES.CLASSIC_DARK.COLOR4 @@ -1312,7 +1311,7 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { THEMES.OCEAN_DARK.COLOR2 ); - document.documentElement.style.setProperty('--text-primary-color', THEMES.OCEAN_DARK.COLOR6); + document.documentElement.style.setProperty('--text-primary-color', THEMES.OCEAN_DARK.COLOR7!); document.documentElement.style.setProperty('--text-secondary-color', THEMES.OCEAN_DARK.COLOR5); document.documentElement.style.setProperty('--border-color', THEMES.OCEAN_DARK.COLOR4); @@ -1352,12 +1351,11 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { '--menu-button-background-color', 'var(--primary-color)' ); - // TODO Theming - Update with new color #5CAACC document.documentElement.style.setProperty( '--menu-button-background-hover-color', - THEMES.OCEAN_DARK.COLOR4 + THEMES.OCEAN_DARK.COLOR6 ); - document.documentElement.style.setProperty('--menu-button-icon-color', THEMES.OCEAN_DARK.COLOR6); + document.documentElement.style.setProperty('--menu-button-icon-color', THEMES.OCEAN_DARK.COLOR7!); document.documentElement.style.setProperty( '--chat-buttons-background-color', @@ -1367,7 +1365,10 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { '--chat-buttons-background-hover-color', THEMES.OCEAN_DARK.COLOR4 ); - document.documentElement.style.setProperty('--chat-buttons-icon-color', THEMES.OCEAN_DARK.COLOR6); + document.documentElement.style.setProperty( + '--chat-buttons-icon-color', + THEMES.OCEAN_DARK.COLOR7! + ); document.documentElement.style.setProperty( '--settings-tab-background-color', @@ -1377,7 +1378,6 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { '--settings-tab-background-hover-color', THEMES.OCEAN_DARK.COLOR3 ); - // TODO Theming - Confirm document.documentElement.style.setProperty( '--settings-tab-background-selected-color', THEMES.OCEAN_DARK.COLOR3 @@ -1393,7 +1393,7 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { ); document.documentElement.style.setProperty( '--button-outline-background-hover-color', - `rgba(${hexColorToRGB(THEMES.OCEAN_DARK.COLOR6)}, 0.3)` + `rgba(${hexColorToRGB(THEMES.OCEAN_DARK.COLOR7!)}, 0.3)` ); document.documentElement.style.setProperty('--button-outline-text-color', 'var(--primary-color)'); document.documentElement.style.setProperty( @@ -1429,7 +1429,6 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { '--button-solid-text-hover-color', 'var(--text-primary-color)' ); - // TODO Theming - Confirm this document.documentElement.style.setProperty( '--button-solid-disabled-color', THEMES.OCEAN_DARK.COLOR4