From 9daba69247cb298d9091f0d2ddc5d763bc2ffccb Mon Sep 17 00:00:00 2001 From: Sharon Kennedy Date: Tue, 25 Feb 2020 20:21:09 -0500 Subject: [PATCH] fix color inconsistencies --- src/components/_chat.scss | 6 +++--- src/components/_dark_mode.scss | 13 +++++++++++++ src/components/_variables.scss | 6 ++++-- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/components/_chat.scss b/src/components/_chat.scss index dfb30e4..a28153b 100644 --- a/src/components/_chat.scss +++ b/src/components/_chat.scss @@ -85,7 +85,7 @@ #open-chatbox-label, .label-icon { border: 1px solid $dark-color; box-shadow: inset 0px 0px 0px 1px $dark-color; - background-color: transparentize($theme-color, 0.15); + background-color: $theme-highlight-color; } } } @@ -325,7 +325,7 @@ display: flex; flex: 1 1 auto; border: 1px solid $dark-color; - background: $light-color; + background: $white; color: $dark-color; font-family: $theme-font; margin-right: 0.2rem; @@ -367,7 +367,7 @@ outline: none; border: 1px solid $dark-color; box-shadow: inset 0px 0px 0px 1px $dark-color; - background-color: transparentize($theme-color, 0.15); + background-color: $theme-highlight-color; } } } diff --git a/src/components/_dark_mode.scss b/src/components/_dark_mode.scss index 57ea3e0..b55678f 100644 --- a/src/components/_dark_mode.scss +++ b/src/components/_dark_mode.scss @@ -4,6 +4,19 @@ color: $dark-theme-color; } + .dock { + #open-chatbox-label, .label-icon { + border-color: $white; + } + + &:hover { + #open-chatbox-label, .label-icon { + border: 1px solid $dark-color; + box-shadow: inset 0px 0px 0px 1px $dark-color; + } + } + } + .widget-header-minimize, .widget-header-close { background: $dark-background-color; color: $light-text-color; diff --git a/src/components/_variables.scss b/src/components/_variables.scss index 8784eb1..5281a8c 100644 --- a/src/components/_variables.scss +++ b/src/components/_variables.scss @@ -1,7 +1,8 @@ @import url('https://fonts.googleapis.com/css?family=Assistant&display=swap'); $purple: #785BEC; -$light-purple: #f1eefd; +$light-purple: #ebe6fc; +$medium-purple: #4D3A97; $charcoal: #828282; $light-color: #F2F2F2; $gray-color: $charcoal; @@ -13,7 +14,8 @@ $highlight-color: $yellow; $theme-color: $purple; $theme-light-color: $light-purple; $theme-font: 'Assistant', 'Helvetica', sans-serif; -$drop-shadow-color: #BDBEBF; +$theme-highlight-color: $medium-purple; + /* Dark mode colors */