From 831cdee0f1082d27446fa7a7b6e2d3198bd61808 Mon Sep 17 00:00:00 2001 From: William Grant Date: Fri, 16 Sep 2022 14:47:22 +1000 Subject: [PATCH] feat: updated danger color setup updated inbox color and added modal colors to SessionTheme --- stylesheets/_index.scss | 2 +- stylesheets/_session_conversation.scss | 2 +- stylesheets/_session_theme.scss | 4 ++-- ts/components/SessionInboxView.tsx | 1 - .../message-content/MessageReactions.tsx | 2 +- ts/themes/SessionTheme.tsx | 9 +++++++- ts/themes/colors.tsx | 22 ++++++++++++------- 7 files changed, 27 insertions(+), 15 deletions(-) diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index e9b15666a..7c361171c 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -6,7 +6,7 @@ .inbox.index { display: flex; - background-color: var(--color-inbox-background); + background-color: var(--background-primary-color); } .edit-profile-dialog, diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss index a8e6b86ae..a0e42e2bd 100644 --- a/stylesheets/_session_conversation.scss +++ b/stylesheets/_session_conversation.scss @@ -137,7 +137,7 @@ &.show { display: flex; - background: var(--color-inbox-background); + background: var(--background-primary-color); } } } diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index c8044f435..67306a5b0 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -78,8 +78,8 @@ } .inbox { - background: var(--color-inbox-background); - color: var(--color-text); + background: var(--background-primary-color); + color: var(--text-primary-color); } .conversation { diff --git a/ts/components/SessionInboxView.tsx b/ts/components/SessionInboxView.tsx index 034c56f97..165704e3a 100644 --- a/ts/components/SessionInboxView.tsx +++ b/ts/components/SessionInboxView.tsx @@ -47,7 +47,6 @@ type State = { const StyledGutter = styled.div` width: 380px !important; transition: none; - background: var(--color-cell-background); `; export class SessionInboxView extends React.Component { diff --git a/ts/components/conversation/message/message-content/MessageReactions.tsx b/ts/components/conversation/message/message-content/MessageReactions.tsx index d42f79cef..977cdd0db 100644 --- a/ts/components/conversation/message/message-content/MessageReactions.tsx +++ b/ts/components/conversation/message/message-content/MessageReactions.tsx @@ -37,7 +37,7 @@ const StyledReactionOverflow = styled.button` span { background-color: var(--color-received-message-background); - border: 1px solid var(--color-inbox-background); + border: 1px solid var(--border-color); border-radius: 50%; overflow: hidden; margin-right: -9px; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index ea41be377..072e3cba3 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -465,9 +465,10 @@ export const SessionGlobalStyles = createGlobalStyle` --red-color: ${COLORS.PRIMARY.RED}; /* TODO Theming this should be overridable */ --primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY}; - --danger-color: ${COLORS.DANGER.LIGHT}; + --danger-color: ${THEMES.CLASSIC_LIGHT.DANGER}; --transparent-color: ${COLORS.TRANSPARENT}; --white-color: ${COLORS.WHITE}; + --black-color: ${COLORS.BLACK}; /* Backgrounds */ --background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; @@ -611,6 +612,12 @@ export const SessionGlobalStyles = createGlobalStyle` --emoji-reaction-bar-icon-color: var(--text-primary-color); /* TODO Theming - Should Pills have their own colors? */ + + /* Modals */ + --modal-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6}; + --modal-text-color: var(--text-primary-color); + --modal-text-danger-color: var(--danger-color); + }; `; diff --git a/ts/themes/colors.tsx b/ts/themes/colors.tsx index ffaa015c3..a736856d1 100644 --- a/ts/themes/colors.tsx +++ b/ts/themes/colors.tsx @@ -14,10 +14,6 @@ type Colors = { ORANGE: string; RED: string; }; - DANGER: { - LIGHT: string; - DARK: string; - }; PATH: { DEFAULT: string; CONNECTING: string; @@ -26,6 +22,7 @@ type Colors = { SESSION: string; TRANSPARENT: string; WHITE: string; + BLACK: string; }; // Session Brand Color @@ -55,6 +52,9 @@ const transparent = 'transparent'; // White const white = '#FFFFFF'; +// Black +const black = '#000000'; + const COLORS: Colors = { PRIMARY: { GREEN: primaryGreen, @@ -65,10 +65,6 @@ const COLORS: Colors = { ORANGE: primaryOrange, RED: primaryRed, }, - DANGER: { - LIGHT: dangerLight, - DARK: dangerDark, - }, PATH: { DEFAULT: pathDefault, CONNECTING: pathConnecting, @@ -77,12 +73,14 @@ const COLORS: Colors = { SESSION: sessionGreen, TRANSPARENT: transparent, WHITE: white, + BLACK: black, }; // Themes type ThemeNames = 'CLASSIC_LIGHT' | 'CLASSIC_DARK' | 'OCEAN_LIGHT' | 'OCEAN_DARK'; type ThemeColors = { PRIMARY: string; + DANGER: string; COLOR0: string; COLOR1: string; COLOR2: string; @@ -95,6 +93,7 @@ type Themes = Record; // Classic Light const classicLightPrimary = '#31F196'; +const classicLightDanger = dangerDark; const classicLight0 = '#000000'; const classicLight1 = '#6D6D6D'; const classicLight2 = '#A1A2A1'; @@ -105,6 +104,7 @@ const classicLight6 = '#FFFFFF'; // Classic Dark const classicDarkPrimary = '#31F196'; +const classicDarkDanger = dangerLight; const classicDark0 = '#000000'; const classicDark1 = '#1B1B1B'; const classicDark2 = '#2D2D2D'; @@ -115,6 +115,7 @@ const classicDark6 = '#FFFFFF'; // Ocean Light const oceanLightPrimary = '#57C9FA'; +const oceanLightDanger = dangerDark; const oceanLight0 = '#000000'; const oceanLight1 = '#1A1C28'; const oceanLight2 = '#252735'; @@ -125,6 +126,7 @@ const oceanLight6 = '#FFFFFF'; // Ocean Dark const oceanDarkPrimary = '#57C9FA'; +const oceanDarkDanger = dangerLight; const oceanDark0 = '#19345D'; const oceanDark1 = '#6A6E90'; const oceanDark2 = '#5CAACC'; @@ -136,6 +138,7 @@ const oceanDark6 = '#FCFFFF'; const THEMES: Themes = { CLASSIC_LIGHT: { PRIMARY: classicLightPrimary, + DANGER: classicLightDanger, COLOR0: classicLight0, COLOR1: classicLight1, COLOR2: classicLight2, @@ -146,6 +149,7 @@ const THEMES: Themes = { }, CLASSIC_DARK: { PRIMARY: classicDarkPrimary, + DANGER: classicDarkDanger, COLOR0: classicDark0, COLOR1: classicDark1, COLOR2: classicDark2, @@ -156,6 +160,7 @@ const THEMES: Themes = { }, OCEAN_LIGHT: { PRIMARY: oceanLightPrimary, + DANGER: oceanLightDanger, COLOR0: oceanLight0, COLOR1: oceanLight1, COLOR2: oceanLight2, @@ -166,6 +171,7 @@ const THEMES: Themes = { }, OCEAN_DARK: { PRIMARY: oceanDarkPrimary, + DANGER: oceanDarkDanger, COLOR0: oceanDark0, COLOR1: oceanDark1, COLOR2: oceanDark2,