From 5cdb25ca0073a1eead190c77108076ebbff05d35 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 24 Aug 2020 19:11:26 +1000 Subject: [PATCH] themify widget selection, compose and slider --- stylesheets/_session-slider.scss | 4 +- stylesheets/_session.scss | 58 +++++++++++++------ stylesheets/_session_left_pane.scss | 14 +++-- stylesheets/themes.scss | 8 +-- .../settings/SessionSettingListItem.tsx | 2 +- 5 files changed, 59 insertions(+), 27 deletions(-) diff --git a/stylesheets/_session-slider.scss b/stylesheets/_session-slider.scss index 85aa3f3f9..74241c942 100644 --- a/stylesheets/_session-slider.scss +++ b/stylesheets/_session-slider.scss @@ -34,7 +34,9 @@ .rc-slider-rail { position: absolute; width: 100%; - background-color: $session-shade-6; + @include themify($themes) { + background: themed('inputBackground'); + } height: 8px; border-radius: 6px; margin: 0px 0px 0px -1px; diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 1822faa56..388f095a0 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -578,8 +578,8 @@ label { @include themify($themes) { background-color: themed('modalBackground'); color: themed('textColor'); + border: 1px solid themed('modalBorder'); } - border: 1px solid $session-shade-8; overflow: hidden; display: flex; flex-direction: column; @@ -962,7 +962,7 @@ label { text-align: center; font-size: $session-font-md; @include themify($themes) { - background: themed('searchBarBackground'); + background: themed('inputBackground'); } } @@ -1100,9 +1100,10 @@ label { flex-direction: row; justify-content: center; align-items: center; - background-color: $session-shade-6; height: $main-view-header-height; - + @include themify($themes) { + background: themed('cellBackground'); + } &-title { line-height: $main-view-header-height; font-weight: bold; @@ -1119,13 +1120,14 @@ label { &-item { font-size: $session-font-md; - color: $session-color-white; - background-color: $session-shade-1; - padding: $session-margin-lg; margin-bottom: 20px; border-bottom: 1px solid $session-shade-5; + @include themify($themes) { + background: themed('cellBackground'); + color: themed('textColor'); + } &.inline { display: flex; align-items: center; @@ -1147,12 +1149,21 @@ label { font-size: $session-font-sm; font-weight: 100; max-width: 700px; - @include session-color-subtle($session-color-white); + @include themify($themes) { + @include session-color-subtle(themed('textColor')); + } } &__content { label { - @include session-color-subtle($session-color-white); + @include themify($themes) { + @include session-color-subtle(themed('textColor')); + } + } + } + &__selection { + .session-toggle { + transition: $session-transition-duration; } } } @@ -1170,7 +1181,7 @@ label { justify-content: space-between; padding: $session-margin-sm $session-margin-md; - background-color: $session-shade-5; + background: none; font-size: $session-font-xs; span { @@ -1279,7 +1290,9 @@ label { } textarea.send-message { - background-color: $session-shade-4; + @include themify($themes) { + background: themed('composeViewBackground'); + } border: none; margin: 0px; padding: 0px $session-margin-lg; @@ -1293,7 +1306,9 @@ label { .bottom-bar form { &.send { - background-color: $session-shade-4; + @include themify($themes) { + background: themed('composeViewBackground'); + } } &.active textarea { @@ -1302,7 +1317,9 @@ label { } .dark-theme .bottom-bar .send-message[disabled='disabled'] { - background: $session-shade-4 !important; + @include themify($themes) { + background: themed('composeViewBackground'); + } } .session-radio-group fieldset { @@ -1338,17 +1355,24 @@ label { vertical-align: -3px; border: 2px solid rgba($session-color-white, 0.6); padding: 0.2em; - background-color: transparent; + @include themify($themes) { + background: none; + border-color: themed('accent'); + } background-clip: content-box; + transition: $session-transition-duration; } input:hover + label:before { - border-color: $session-color-white; + @include themify($themes) { + background: themed('accent'); + } } input:checked + label:before { - background-color: $session-color-white; - border-color: $session-color-white; + @include themify($themes) { + background: themed('accent'); + } } } diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 4829a6330..37d2ed0a2 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -341,7 +341,9 @@ $session-compose-margin: 20px; font-family: $session-font-default; text-overflow: ellipsis; background: none; - + @include themify($themes) { + color: themed('textColor'); + } &:focus { outline: none !important; } @@ -464,7 +466,7 @@ $session-compose-margin: 20px; } &-category-list-item { - @include session-dark-background; + background: none; display: flex; flex-direction: row; justify-content: space-between; @@ -481,11 +483,15 @@ $session-compose-margin: 20px; } &.active { - background-color: $session-shade-5; + @include themify($themes) { + background: themed('conversationItemSelected'); + } } &:hover { - background-color: $session-shade-6; + @include themify($themes) { + background: themed('clickableHovered'); + } } &__buttons { diff --git a/stylesheets/themes.scss b/stylesheets/themes.scss index 41a5f4033..2ea44c84d 100644 --- a/stylesheets/themes.scss +++ b/stylesheets/themes.scss @@ -8,8 +8,6 @@ $themes: ( unimportantButtonBackground: #0000, border: #979797, cellBackground: #fcfcfc, - searchBarPlaceholder: #8e8e93, - searchBarBackground: #8e8e931f, separator: #36383c, buttonBackground: #fcfcfc, modalBackground: #fcfcfc, @@ -17,6 +15,8 @@ $themes: ( fakeChatBubbleBackground: #f5f5f5, fakeChatBubbleText: #000, newConversationButtonShadow: hsl(151, 89%, 26%), + // input + inputBackground: #8e8e931f, // text textColor: #000, textColorSubtle: #a0a0a0, @@ -55,8 +55,6 @@ $themes: ( unimportantButtonBackground: #323232, border: #979797, cellBackground: #1b1b1b, - searchBarPlaceholder: #8e8e93, - searchBarBackground: #8e8e931f, separator: #36383c, buttonBackground: #1b1b1b, modalBackground: #101011, @@ -64,6 +62,8 @@ $themes: ( fakeChatBubbleBackground: #3f4146, fakeChatBubbleText: #000, newConversationButtonShadow: #077c44, + // input + inputBackground: #8e8e931f, // text textColor: #fff, textColorSubtle: #a0a0a0, diff --git a/ts/components/session/settings/SessionSettingListItem.tsx b/ts/components/session/settings/SessionSettingListItem.tsx index fd7ea27d9..13fd3179a 100644 --- a/ts/components/session/settings/SessionSettingListItem.tsx +++ b/ts/components/session/settings/SessionSettingListItem.tsx @@ -61,7 +61,7 @@ export class SessionSettingListItem extends React.Component {
{type === SessionSettingType.Toggle && ( -
+