From 1b4d35a32480e55b9b815cbdd25628be3441ed72 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 19 Oct 2022 13:08:15 +1100 Subject: [PATCH 1/2] fix: add shadow to session scroll button for better visibility --- ts/components/SessionScrollButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx index 94606b593..df79228e3 100644 --- a/ts/components/SessionScrollButton.tsx +++ b/ts/components/SessionScrollButton.tsx @@ -13,6 +13,7 @@ const SessionScrollButtonDiv = styled.div` .session-icon-button { background-color: var(--message-bubbles-received-background-color); + box-shadow: var(--drop-shadow); } `; From ddfaad5220c1f828c8dd077c86289267686e9c28 Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 19 Oct 2022 13:28:13 +1100 Subject: [PATCH 2/2] fix: added a unique shadow variable for the scroll button --- ts/components/SessionScrollButton.tsx | 2 +- ts/interactions/conversationInteractions.ts | 1 - ts/themes/globals.tsx | 4 +++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/ts/components/SessionScrollButton.tsx b/ts/components/SessionScrollButton.tsx index df79228e3..4019faaf2 100644 --- a/ts/components/SessionScrollButton.tsx +++ b/ts/components/SessionScrollButton.tsx @@ -13,7 +13,7 @@ const SessionScrollButtonDiv = styled.div` .session-icon-button { background-color: var(--message-bubbles-received-background-color); - box-shadow: var(--drop-shadow); + box-shadow: var(--scroll-button-shadow); } `; diff --git a/ts/interactions/conversationInteractions.ts b/ts/interactions/conversationInteractions.ts index 6c13eafa9..6b4cd2898 100644 --- a/ts/interactions/conversationInteractions.ts +++ b/ts/interactions/conversationInteractions.ts @@ -255,7 +255,6 @@ export function showInviteContactByConvoId(conversationId: string) { window.inboxStore?.dispatch(updateInviteContactModal({ conversationId })); } - export function showAddModeratorsByConvoId(conversationId: string) { window.inboxStore?.dispatch(updateAddModeratorsModal({ conversationId })); } diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx index 98760c6b3..4c1bb5022 100644 --- a/ts/themes/globals.tsx +++ b/ts/themes/globals.tsx @@ -55,6 +55,7 @@ export type ThemeGlobals = { '--shadow-color': string; '--drop-shadow': string; '--context-menu-shadow-color': string; + '--scroll-button-shadow': string; /* Path Button */ '--button-path-default-color': string; @@ -128,13 +129,14 @@ export const THEME_GLOBALS: ThemeGlobals = { '--shadow-color': 'var(--black-color)', '--drop-shadow': '0 0 4px 0 var(--shadow-color)', '--context-menu-shadow-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`, + '--scroll-button-shadow': `0 0 7px 0 rgba(${hexColorToRGB(COLORS.BLACK)}, 0.5)`, '--button-path-default-color': COLORS.PATH.DEFAULT, '--button-path-connecting-color': COLORS.PATH.CONNECTING, '--button-path-error-color': COLORS.PATH.ERROR, '--modal-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.3)`, - '--modal-drop-shadow': `0px 0px 10px rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`, + '--modal-drop-shadow': `0px 0px 10px rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`, '--lightbox-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`, '--lightbox-caption-background-color': 'rgba(192, 192, 192, .40)',