From ea95f78c5a8fb4284f116d8486b27787aa5a8710 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 27 Sep 2022 14:39:54 +1000 Subject: [PATCH] feat: updated colors context menu --- ts/components/SessionContextMenuContainer.tsx | 16 ++- ts/themes/SessionTheme.tsx | 17 ++- ts/themes/switchTheme.tsx | 104 ++++++++++++++++++ 3 files changed, 127 insertions(+), 10 deletions(-) diff --git a/ts/components/SessionContextMenuContainer.tsx b/ts/components/SessionContextMenuContainer.tsx index 4cc1a39c9..1aaacc48a 100644 --- a/ts/components/SessionContextMenuContainer.tsx +++ b/ts/components/SessionContextMenuContainer.tsx @@ -7,27 +7,25 @@ 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); + box-shadow: 0px 0px 10px var(--context-menu-shadow-color) !important; + background-color: var(--context-menu-background-color); &.react-contexify__theme--dark { - background-color: var(--color-received-message-background); + background-color: var(--context-menu-background-color); } .react-contexify__item { - background: var(--color-received-message-background); + background: var(--context-menu-background-color); } .react-contexify__item:not(.react-contexify__item--disabled):hover > .react-contexify__item__content { - background: var(--color-accent); - color: var(--color-text-menu-highlighted); + background: var(--context-menu-background-hover-color); + color: var(--context-menu-text-hover-color); } .react-contexify__item__content { transition: var(--default-duration); - color: var(--color-text); + color: var(--context-menu-text-color); } &.react-contexify__submenu { diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 2f643647a..772664f31 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -505,6 +505,8 @@ export const SessionGlobalStyles = createGlobalStyle` /* Chat (Interaction) Buttons */ /* Also used for Reaction Bar Buttons */ + /* Used for Link Preview Attachment Icons */ + /* Used for Media Grid Item Play Button */ --chat-buttons-background-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --chat-buttons-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR3}; --chat-buttons-icon-color: var(--text-primary-color); @@ -553,7 +555,7 @@ export const SessionGlobalStyles = createGlobalStyle` /* TODO Theming Consolidate with code */ /* Conversation Tab */ - /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item etc. */ + /* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item, Contact List Items etc. */ --conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; --conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; --conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4}; @@ -635,6 +637,19 @@ export const SessionGlobalStyles = createGlobalStyle` --session-logo-text-dark-filter: none; --session-logo-text-current-filter: var(--session-logo-text-light-filter); + /* Right Click / Context Menu) */ + --context-menu-background-color: var(--background-primary-color); + --context-menu-background-hover-color: var(--primary-color); + --context-menu-text-color: var(--text-primary-color); + --context-menu-text-hover-color: var(--black-color); + --context-menu-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22); + + /* Message Link Preview */ + /* Also used for Images */ + /* Also used for the Media Grid Items */ + /* Also used for Staged Generic Attachments */ + /* Same for all Themes */ + --message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06); }; `; diff --git a/ts/themes/switchTheme.tsx b/ts/themes/switchTheme.tsx index d42ecf406..bfabb01ac 100644 --- a/ts/themes/switchTheme.tsx +++ b/ts/themes/switchTheme.tsx @@ -357,6 +357,32 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) { '--session-logo-text-current-filter', 'var(--session-logo-text-light-filter)' ); + + document.documentElement.style.setProperty( + '--context-menu-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-background-hover-color', + 'var(--primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-color', + 'var(--text-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-hover-color', + 'var(--black-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-shadow-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)` + ); + + document.documentElement.style.setProperty( + '--message-link-preview-background-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)` + ); } function loadClassicDark(primaryColor?: PrimaryColorStateType) { @@ -703,6 +729,32 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) { '--session-logo-text-current-filter', 'var(--session-logo-text-light-filter)' ); + + document.documentElement.style.setProperty( + '--context-menu-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-background-hover-color', + 'var(--primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-color', + 'var(--text-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-hover-color', + 'var(--black-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-shadow-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)` + ); + + document.documentElement.style.setProperty( + '--message-link-preview-background-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)` + ); } function loadOceanLight(primaryColor?: PrimaryColorStateType) { @@ -1055,6 +1107,32 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) { '--session-logo-text-current-filter', 'var(--session-logo-text-light-filter)' ); + + document.documentElement.style.setProperty( + '--context-menu-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-background-hover-color', + 'var(--primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-color', + 'var(--text-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-hover-color', + 'var(--black-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-shadow-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)` + ); + + document.documentElement.style.setProperty( + '--message-link-preview-background-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)` + ); } function loadOceanDark(primaryColor?: PrimaryColorStateType) { @@ -1397,6 +1475,32 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) { '--session-logo-text-current-filter', 'var(--session-logo-text-light-filter)' ); + + document.documentElement.style.setProperty( + '--context-menu-background-color', + 'var(--background-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-background-hover-color', + 'var(--primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-color', + 'var(--text-primary-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-text-hover-color', + 'var(--black-color)' + ); + document.documentElement.style.setProperty( + '--context-menu-shadow-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)` + ); + + document.documentElement.style.setProperty( + '--message-link-preview-background-color', + `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)` + ); } export async function switchTheme(theme: ThemeStateType) {