From 6ad17b2c615ef6fd2634cae1632017fcf60c5009 Mon Sep 17 00:00:00 2001 From: Nic <42087659+nicm42@users.noreply.github.com> Date: Thu, 22 Apr 2021 16:36:56 +0100 Subject: [PATCH 1/5] Made sidebar background dark in dark theme --- src/display/shared/sidebar/_styles.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/display/shared/sidebar/_styles.js b/src/display/shared/sidebar/_styles.js index 86e1f4fb..9d0287d9 100644 --- a/src/display/shared/sidebar/_styles.js +++ b/src/display/shared/sidebar/_styles.js @@ -2,9 +2,13 @@ import styled from 'styled-components'; import colors from '../../../infrastructure/constants/colors'; export default styled.div` - color: ${colors.GRAY_400}; - background: ${colors.WHITE}; + color: ${colors.GRAY_100}; + background: ${colors.GRAY_900}; border-right: 1px solid ${colors.GRAY_200}; + .light-theme & { + color: ${colors.GRAY_400}; + background: ${colors.WHITE}; + } .nav { .nav-title { color: ${colors.GRAY_600} From e683c0d08ee538081e49f11e7954b0617d83e839 Mon Sep 17 00:00:00 2001 From: Nic <42087659+nicm42@users.noreply.github.com> Date: Thu, 22 Apr 2021 16:41:24 +0100 Subject: [PATCH 2/5] Made sidebar link colours whiter in dark mode --- src/display/shared/sidebar/_styles.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/display/shared/sidebar/_styles.js b/src/display/shared/sidebar/_styles.js index 9d0287d9..1cda5781 100644 --- a/src/display/shared/sidebar/_styles.js +++ b/src/display/shared/sidebar/_styles.js @@ -15,9 +15,15 @@ export default styled.div` } .nav-item { .nav-link { - color: ${colors.GRAY_600} + color: ${colors.GRAY_100}; + .light-theme & { + color: ${colors.GRAY_600} + } i { - color: ${colors.GRAY_600} + color: ${colors.GRAY_100}; + .light-theme & { + color: ${colors.GRAY_600} + } } &.active { background: ${colors.GRAY_050}; From e351e54e9059629236ab6d7e1e5f5112f8032b1d Mon Sep 17 00:00:00 2001 From: Nic <42087659+nicm42@users.noreply.github.com> Date: Thu, 22 Apr 2021 16:42:32 +0100 Subject: [PATCH 3/5] Made sidebar titles whiter in dark theme --- src/display/shared/sidebar/_styles.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/display/shared/sidebar/_styles.js b/src/display/shared/sidebar/_styles.js index 1cda5781..81e3658f 100644 --- a/src/display/shared/sidebar/_styles.js +++ b/src/display/shared/sidebar/_styles.js @@ -11,7 +11,10 @@ export default styled.div` } .nav { .nav-title { - color: ${colors.GRAY_600} + color: ${colors.GRAY_100}; + .light-theme & { + color: ${colors.GRAY_600} + } } .nav-item { .nav-link { @@ -20,7 +23,7 @@ export default styled.div` color: ${colors.GRAY_600} } i { - color: ${colors.GRAY_100}; + color: ${colors.GRAY_100}; .light-theme & { color: ${colors.GRAY_600} } From 1e353644a94c3f84504485e2b90fe76073e32432 Mon Sep 17 00:00:00 2001 From: Nic <42087659+nicm42@users.noreply.github.com> Date: Thu, 22 Apr 2021 16:48:41 +0100 Subject: [PATCH 4/5] Made sidebar active item less white in dark theme --- src/display/shared/sidebar/_styles.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/display/shared/sidebar/_styles.js b/src/display/shared/sidebar/_styles.js index 81e3658f..c29dddc8 100644 --- a/src/display/shared/sidebar/_styles.js +++ b/src/display/shared/sidebar/_styles.js @@ -29,8 +29,12 @@ export default styled.div` } } &.active { - background: ${colors.GRAY_050}; - color: ${colors.GRAY_600}; + background: ${colors.GRAY_600}; + color: ${colors.GRAY_050}; + .light-theme & { + background: ${colors.GRAY_050}; + color: ${colors.GRAY_600}; + } i { color: ${colors.LIGHT_BLUE}; } From 98820f8ef458865d58195a6a7a00ec212011611b Mon Sep 17 00:00:00 2001 From: Nic <42087659+nicm42@users.noreply.github.com> Date: Fri, 23 Apr 2021 17:27:22 +0100 Subject: [PATCH 5/5] Update sidebar border colour --- src/display/shared/sidebar/_styles.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/display/shared/sidebar/_styles.js b/src/display/shared/sidebar/_styles.js index c29dddc8..89c53c7e 100644 --- a/src/display/shared/sidebar/_styles.js +++ b/src/display/shared/sidebar/_styles.js @@ -4,10 +4,11 @@ import colors from '../../../infrastructure/constants/colors'; export default styled.div` color: ${colors.GRAY_100}; background: ${colors.GRAY_900}; - border-right: 1px solid ${colors.GRAY_200}; + border-right: 1px solid ${colors.GRAY_400}; .light-theme & { color: ${colors.GRAY_400}; background: ${colors.WHITE}; + border-right: 1px solid ${colors.GRAY_200}; } .nav { .nav-title {