From c072ec2e27534996165f6f466d35d99255b577d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Tue, 28 Jun 2022 12:02:57 +0300 Subject: [PATCH] RED-4397: Dark theme WIP --- .../base-screen/base-screen.component.html | 2 +- .../base-account-screen-component.scss | 2 +- .../user-profile-screen.component.scss | 2 +- .../entities/screens/info/info.component.scss | 2 +- .../general-config-screen.component.scss | 2 +- .../dashboard-screen.component.scss | 2 +- .../donut-chart/donut-chart.component.scss | 2 +- .../upload-status-overlay.component.scss | 2 +- apps/red-ui/src/assets/styles/red-editor.scss | 5 +++-- apps/red-ui/src/styles.scss | 14 ++++++++++---- 10 files changed, 21 insertions(+), 14 deletions(-) diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index 006247efa..187f411d6 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -22,7 +22,7 @@ [placeholder]="'search.placeholder' | translate" iqserHelpMode="search_in_entire_application" > - + diff --git a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss index b8778a2b1..d94a3f70d 100644 --- a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss +++ b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss @@ -1,7 +1,7 @@ @use 'common-mixins'; .content-container { - background-color: var(--iqser-grey-2); + background-color: var(--iqser-alt-background); justify-content: center; @include common-mixins.scroll-bar; overflow: auto; diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.scss b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.scss index e1573c569..0c1bd8a5f 100644 --- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.scss +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.scss @@ -1,3 +1,3 @@ a { - color: black; + color: var(--iqser-text); } diff --git a/apps/red-ui/src/app/modules/admin/screens/entities/screens/info/info.component.scss b/apps/red-ui/src/app/modules/admin/screens/entities/screens/info/info.component.scss index 6e7689711..5226a6f9e 100644 --- a/apps/red-ui/src/app/modules/admin/screens/entities/screens/info/info.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/entities/screens/info/info.component.scss @@ -18,7 +18,7 @@ padding: 30px; overflow: auto; @include common-mixins.scroll-bar; - background-color: var(--iqser-grey-2); + background-color: var(--iqser-alt-background); justify-content: center; .dialog { diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss index fc571e7bc..3a1c27dab 100644 --- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.scss @@ -1,7 +1,7 @@ @use 'common-mixins'; .content-container { - background-color: var(--iqser-grey-2); + background-color: var(--iqser-alt-background); display: flex; flex-direction: column; align-items: center; diff --git a/apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.scss b/apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.scss index f646df137..b782d561c 100644 --- a/apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.scss +++ b/apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.scss @@ -1,6 +1,6 @@ :host { align-items: center; - background-color: var(--iqser-grey-2); + background-color: var(--iqser-alt-background); .container { padding: 32px; diff --git a/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.scss b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.scss index 773493760..1bfd8851a 100644 --- a/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.scss @@ -62,7 +62,7 @@ } &:hover:not(.active):not(.filter-disabled) { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-btn-bg); } &.active { diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss index c2569c204..16a2aaf46 100644 --- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss +++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss @@ -6,7 +6,7 @@ position: fixed; bottom: 20px; right: 20px; - box-shadow: 0 3px 12px 5px rgba(40, 50, 65, 0.14); + box-shadow: 0 3px 12px 5px rgba(var(--iqser-accent-rgb), 0.14); border-radius: 8px; overflow: hidden; width: 400px; diff --git a/apps/red-ui/src/assets/styles/red-editor.scss b/apps/red-ui/src/assets/styles/red-editor.scss index 4f1a692d1..5c8c49ba6 100644 --- a/apps/red-ui/src/assets/styles/red-editor.scss +++ b/apps/red-ui/src/assets/styles/red-editor.scss @@ -1,4 +1,5 @@ @use 'variables'; +@use 'common-mixins'; .monaco-diff-editor { .editor.original { @@ -60,9 +61,9 @@ right: 40px; border-radius: 8px; padding: 16px 32px 16px 16px; - background-color: var(--iqser-white); - box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3); + background-color: var(--iqser-background); z-index: 5000; + @include common-mixins.drop-shadow; > *:not(:last-child) { margin-right: 24px; diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss index 6ee1dc0e1..f08dc7461 100644 --- a/apps/red-ui/src/styles.scss +++ b/apps/red-ui/src/styles.scss @@ -11,6 +11,7 @@ $iqser-accent: vars.$accent, $iqser-accent-rgb: common-functions.hexToRgb(vars.$accent), $iqser-background: vars.$white, + $iqser-alt-background: vars.$grey-2, $iqser-text: vars.$accent, $iqser-text-rgb: common-functions.hexToRgb(vars.$accent), $iqser-disabled: vars.$grey-7, @@ -31,7 +32,9 @@ $iqser-yellow-1: vars.$yellow-1, $iqser-yellow-2: vars.$yellow-2, $iqser-helpmode-primary: vars.$green-2, - $iqser-inputs-border: vars.$grey-5 + $iqser-inputs-border: vars.$grey-5, + $iqser-popup-background: vars.$white, + $iqser-shadow: vars.$grey-4 ); @include common-variables.configureDark( @@ -41,12 +44,13 @@ $iqser-accent: vars.$accent, $iqser-accent-rgb: common-functions.hexToRgb(vars.$accent), $iqser-background: darken(vars.$accent, 10%), + $iqser-alt-background: darken(vars.$accent, 5%), $iqser-text: vars.$white, $iqser-text-rgb: common-functions.hexToRgb(vars.$white), $iqser-disabled: vars.$grey-7, $iqser-not-disabled-table-item: darken(vars.$accent, 5%), - $iqser-btn-bg-hover: darken(vars.$accent, 5%), - $iqser-btn-bg: darken(vars.$accent, 5%), + $iqser-btn-bg-hover: vars.$accent, + $iqser-btn-bg: darken(vars.$accent, 8%), $iqser-side-nav: darken(vars.$accent, 8%), $iqser-warn: vars.$warn, $iqser-separator: vars.$accent, @@ -61,5 +65,7 @@ $iqser-yellow-1: vars.$yellow-1, $iqser-yellow-2: vars.$yellow-2, $iqser-helpmode-primary: vars.$green-2, - $iqser-inputs-border: lighten(vars.$accent, 10%) + $iqser-inputs-border: lighten(vars.$accent, 10%), + $iqser-popup-background: darken(vars.$accent, 5%), + $iqser-shadow: #00000060 );