From aba18020f15b1529ea0fc52a2ec9f269bce12d4a Mon Sep 17 00:00:00 2001 From: William Grant Date: Wed, 24 Aug 2022 12:23:31 +1000 Subject: [PATCH] refactor: renamed darker-gray to darkest gray and added new darker gray --- stylesheets/_modules.scss | 12 ++++++------ stylesheets/_quote.scss | 8 ++++---- stylesheets/_session_password.scss | 2 +- stylesheets/_theme_dark.scss | 14 +++++++------- ts/themes/SessionTheme.tsx | 4 +++- 5 files changed, 21 insertions(+), 19 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 62f2885d0..a8348c263 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -104,7 +104,7 @@ white-space: nowrap; text-overflow: clip; - color: var(--color-darker-gray-color); + color: var(--color-darkest-gray-color); } .module-message__generic-attachment__text { @@ -115,7 +115,7 @@ } .module-message__generic-attachment__file-name { - color: var(--color-darker-gray-color); + color: var(--color-darkest-gray-color); font-size: 14px; line-height: 18px; font-weight: 300; @@ -208,7 +208,7 @@ } .module-message__link-preview__title { - color: var(--color-darker-gray-color); + color: var(--color-darkest-gray-color); font-size: 16px; font-weight: 300; letter-spacing: 0.15px; @@ -663,7 +663,7 @@ line-height: 16px; border-radius: 8px; - box-shadow: 0px 0px 0px 1px var(--color-darker-gray-color); + box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color); } .module-conversation-list-item__content { @@ -1083,7 +1083,7 @@ white-space: nowrap; text-overflow: clip; - color: var(--color-darker-gray-color); + color: var(--color-darkest-gray-color); } .module-staged-generic-attachment__filename { @@ -1235,7 +1235,7 @@ padding: var(--margins-sm); } .module-staged-link-preview__title { - color: var(--color-darker-gray-color); + color: var(--color-darkest-gray-color); font-weight: 300; font-size: 14px; line-height: 18px; diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index 6051d2353..f626555bb 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -107,7 +107,7 @@ font-size: var(--font-size-sm); line-height: 18px; font-weight: 300; - color: var(--color-darker-gray-color); + color: var(--color-darkest-gray-color); margin-bottom: 5px; overflow-x: hidden; @@ -137,7 +137,7 @@ .module-quote__primary__type-label { font-style: italic; - color: var(--color-darker-gray-color); + color: var(--color-darkest-gray-color); font-size: var(--font-size-sm); line-height: 18px; } @@ -242,7 +242,7 @@ &-file__text { font-size: 14px; line-height: 18px; - color: var(--color-darker-gray-color); + color: var(--color-darkest-gray-color); max-width: calc(100% - 26px); overflow-x: hidden; @@ -272,7 +272,7 @@ &-warning__text { margin-inline-start: 6px; - color: var(--color-darker-gray-color); + color: var(--color-darkest-gray-color); font-size: var(--font-size-sm); line-height: 18px; } diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss index 565198b28..8bc33f0ae 100644 --- a/stylesheets/_session_password.scss +++ b/stylesheets/_session_password.scss @@ -56,7 +56,7 @@ min-width: 420px; padding: 3 * $session-margin-lg 2 * $session-margin-lg; box-sizing: border-box; - background-color: var(--color-darker-gray-color); + background-color: var(--color-darkest-gray-color); border: 1px solid $session-shade-8; border-radius: 2px; diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 18448cedb..9f686d327 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -5,7 +5,7 @@ &.modal { .content { textarea { - background-color: var(--color-darker-gray-color); + background-color: var(--color-darkest-gray-color); border: 1px solid $color-dark-60; color: var(--color-lighter-gray-color); } @@ -15,7 +15,7 @@ .result { .open { border: solid 1px $color-dark-60; - background-color: var(--color-darker-gray-color); + background-color: var(--color-darkest-gray-color); color: var(--color-lighter-gray-color); &:before { @@ -27,7 +27,7 @@ color: var(--color-lighter-gray-color); border: solid 1px $color-dark-60; border-right: none; - background-color: var(--color-darker-gray-color); + background-color: var(--color-darkest-gray-color); } } } @@ -217,7 +217,7 @@ // Module: Media Gallery .module-media-gallery__tab { - background-color: var(--color-darker-gray-color); + background-color: var(--color-darkest-gray-color); } .module-media-gallery__tab--active { @@ -237,7 +237,7 @@ // Module: Media Grid Item .module-media-grid-item { - background-color: var(--color-darker-gray-color); + background-color: var(--color-darkest-gray-color); } .module-media-grid-item__icon-image { @@ -266,7 +266,7 @@ .module-conversation-list-item__unread-count { color: var(--color-white-color); background-color: var(--color-session-green-color); - box-shadow: 0px 0px 0px 1px var(--color-darker-gray-color); + box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color); } .module-conversation-list-item__header__name { @@ -350,7 +350,7 @@ } .module-staged-generic-attachment__icon__extension { - color: var(--color-darker-gray-color); + color: var(--color-darkest-gray-color); } // Module: Staged Placeholder Attachment diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 8576bc05e..75338614b 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -30,7 +30,8 @@ const lightGrayColor = '#8b8e91'; const lighterGrayColor = '#e9e9e9'; const lightestGrayColor = '#f3f3f3'; const darkGrayColor = '#414347'; -const darkerGrayColor = '#17191d'; +const darkerGrayColor = '#2f2f2f'; +const darkestGrayColor = '#17191d'; // DARK COLORS const darkColorAccent = accentDarkTheme; @@ -384,6 +385,7 @@ export const SessionGlobalStyles = createGlobalStyle` --color-lightest-gray-color: ${lightestGrayColor}; --color-dark-gray-color: ${darkGrayColor}; --color-darker-gray-color: ${darkerGrayColor}; + --color-darkest-gray-color: ${darkestGrayColor}; --color-light-blue-color: ${lightBlueColor}; --color-warning: ${warning};