From 07c00463f103eadd24b8673c8612ebfd8580f231 Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 23 Aug 2022 15:47:45 +1000 Subject: [PATCH] reafctors: converted sass colors in _modal.scss updated session white to use css white everywhere and removed unused classes --- stylesheets/_modal.scss | 6 +++--- stylesheets/_session.scss | 6 +++--- stylesheets/_session_constants.scss | 1 - stylesheets/_session_password.scss | 6 +++--- stylesheets/_session_slider.scss | 8 ++++---- stylesheets/_variables.scss | 1 - ts/themes/SessionTheme.tsx | 14 +++++--------- 7 files changed, 18 insertions(+), 24 deletions(-) diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index f7ab93a63..aac78d539 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -14,7 +14,7 @@ max-width: 350px; margin: 100px auto; padding: 1em; - background-color: $color-white; + background-color: white; border-radius: $border-radius; overflow: auto; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); @@ -134,7 +134,7 @@ border: 0; outline: none; border-radius: 4px; - background-color: $color-loki-light-gray; + background-color: var(--color-lighter-gray-color); &:focus { outline: none; @@ -191,7 +191,7 @@ height: 30px; width: 30px; border-radius: 50%; - background-color: $session-color-white; + background-color: white; transition: var(--default-duration); &:hover { diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 9684de65b..0abcac115 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -226,7 +226,7 @@ textarea { } .session-label { - color: $session-color-white; + color: white; padding: var(--margins-sm); width: 100%; border-radius: 2px; @@ -714,7 +714,7 @@ label { height: 135px; border-radius: 3px; padding: var(--margins-xs); - background-color: $session-color-white; + background-color: white; } } @@ -835,7 +835,7 @@ label { width: $session-modal-size-sm; height: $session-modal-size-sm; padding: var(--margins-xs); - background-color: $session-color-white; + background-color: white; border-radius: 3px; } diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss index 1a9e0f315..e8261ab6c 100644 --- a/stylesheets/_session_constants.scss +++ b/stylesheets/_session_constants.scss @@ -115,7 +115,6 @@ $session-shade-16: #979797; $session-shade-17: #a0a0a0; $session-shade-18: #141414; -$session-color-white: #fff; $session-color-light-grey: #a0a0a0; $session-color-dark-grey: #353535; $session-color-black: #000; diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss index 99bd3d1de..1945f0d37 100644 --- a/stylesheets/_session_password.scss +++ b/stylesheets/_session_password.scss @@ -32,7 +32,7 @@ &-error-section { width: 100%; - color: $session-color-white; + color: white; margin: -var(--margins-sm) 0px 2 * $session-margin-lg 0px; .session-label { @@ -46,7 +46,7 @@ &-container { font-family: $session-font-default; - color: $session-color-white; + color: white; display: inline-flex; flex-direction: column; align-items: center; @@ -67,7 +67,7 @@ align-items: center; h1 { - color: $session-color-white; + color: white; } svg { margin-inline-end: var(--margins-lg); diff --git a/stylesheets/_session_slider.scss b/stylesheets/_session_slider.scss index e02bd0aba..a754541d4 100644 --- a/stylesheets/_session_slider.scss +++ b/stylesheets/_session_slider.scss @@ -58,11 +58,11 @@ } .rc-slider-handle:focus { border-color: var(--color-session-green-color); - box-shadow: 0 0 0 5px rgba($session-color-white, 0.2); + box-shadow: 0 0 0 5px rgba(white, 0.2); outline: none; } .rc-slider-handle-click-focused:focus { - border-color: rgba($session-color-white, 0.2); + border-color: rgba(white, 0.2); box-shadow: unset; } .rc-slider-handle:hover { @@ -70,7 +70,7 @@ } .rc-slider-handle:active { border-color: var(--color-session-green-color); - box-shadow: 0 0 5px rgba($session-color-white, 0.2); + box-shadow: 0 0 5px rgba(white, 0.2); cursor: -webkit-grabbing; cursor: grabbing; } @@ -125,7 +125,7 @@ margin-right: -4px; } .rc-slider-disabled { - background-color: #e9e9e9; + background-color: var(--color-lighter-gray-color); } .rc-slider-disabled .rc-slider-handle, .rc-slider-disabled .rc-slider-dot { diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index db06f040e..7114c70c9 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -1,5 +1,4 @@ // Loki colors -$color-loki-light-gray: #e9e9e9; $color-loki-dark-gray: #323232; $color-loki-extra-dark-gray: #101010; $color-loki-green: #3bd110; diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx index 7ab821b66..ccad4d8de 100644 --- a/ts/themes/SessionTheme.tsx +++ b/ts/themes/SessionTheme.tsx @@ -16,7 +16,6 @@ const sessionBlack = '#282829'; const avatarBorderColor = '#00000059'; // Blacks -const blackColor = '#000000'; // Blues const lightBlueColor = '#a2d2f4'; @@ -27,6 +26,7 @@ const sessionGreenColor = accentDarkTheme; // Grays const grayColor = '#616161'; const lightGrayColor = '#8b8e91'; +const lighterGrayColor = '#e9e9e9'; const lightestGrayColor = '#f3f3f3'; // DARK COLORS @@ -97,14 +97,12 @@ export const switchHtmlToDarkTheme = () => { ); document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack); document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor); - document.documentElement.style.setProperty( - '--color-light-black-color', - `rgba(${blackColor}, 0.2)` - ); + document.documentElement.style.setProperty('--color-light-black-color', `rgba(${black}, 0.2)`); document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor); document.documentElement.style.setProperty('--color-gray-color', grayColor); document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor); + document.documentElement.style.setProperty('--color-lighter-gray-color', lighterGrayColor); document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor); document.documentElement.style.setProperty('--color-light-blue-color', lightBlueColor); document.documentElement.style.setProperty( @@ -256,13 +254,11 @@ export const switchHtmlToLightTheme = () => { // TODO: This might be wrong. Didn't merge correctly. document.documentElement.style.setProperty('--color-sent-message-text', black); document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor); - document.documentElement.style.setProperty( - '--color-light-black-color', - `rgba(${blackColor}, 0.2)` - ); + document.documentElement.style.setProperty('--color-light-black-color', `rgba(${black}, 0.2)`); document.documentElement.style.setProperty('--color-session-green-color', sessionGreenColor); document.documentElement.style.setProperty('--color-gray-color', grayColor); document.documentElement.style.setProperty('--color-light-gray-color', lightGrayColor); + document.documentElement.style.setProperty('--color-lighter-gray-color', lighterGrayColor); document.documentElement.style.setProperty('--color-lightest-gray-color', lightestGrayColor); document.documentElement.style.setProperty('--color-light-blue-color', lightBlueColor); document.documentElement.style.setProperty(