From 23425d865383bc08ec83213c143602c3b83ef83d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 29 Jun 2022 19:56:16 +0300 Subject: [PATCH] RED-4397: Dark theme --- .../notifications/notifications.component.scss | 2 +- .../user-profile-screen.component.html | 3 ++- .../user-profile-screen.component.ts | 5 +++-- ...-attributes-csv-import-dialog.component.scss | 8 ++++---- .../reports-screen.component.scss | 4 ++-- .../dossier-details-stats.component.scss | 2 +- .../components/select/select.component.scss | 5 ++--- .../upload-status-overlay.component.scss | 17 ++++++++--------- apps/red-ui/src/styles.scss | 6 ++++-- 9 files changed, 27 insertions(+), 25 deletions(-) diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.scss b/apps/red-ui/src/app/components/notifications/notifications.component.scss index 6f896c93a..23a290b31 100644 --- a/apps/red-ui/src/app/components/notifications/notifications.component.scss +++ b/apps/red-ui/src/app/components/notifications/notifications.component.scss @@ -55,7 +55,7 @@ } &:hover { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-tab-hover); .dot { background-color: var(--iqser-grey-5); diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html index 4d6c2172c..250f76949 100644 --- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html @@ -28,7 +28,8 @@
{{ 'user-profile-screen.actions.change-password' | translate }}
-
+ +
{{ 'user-profile-screen.form.dark-theme' | translate }} diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts index 941c9ff75..af9648942 100644 --- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts @@ -19,8 +19,9 @@ import { UserPreferenceService } from '@services/user-preference.service'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class UserProfileScreenComponent extends BaseFormComponent implements OnInit { - readonly changePasswordUrl: SafeResourceUrl; readonly translations = languagesTranslations; + readonly devMode = this._userPreferenceService.areDevFeaturesEnabled; + readonly changePasswordUrl: SafeResourceUrl; #profileModel: IProfile; @@ -46,7 +47,7 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI } get themeChanged(): boolean { - return this._profileModel['darkTheme'] !== this.form.get('darkTheme').value; + return this.#profileModel['darkTheme'] !== this.form.get('darkTheme').value; } get profileChanged(): boolean { diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss index bad6fc2da..79ddc9f17 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss @@ -100,7 +100,7 @@ align-items: center; justify-content: center; text-align: center; - color: var(--iqser-grey-7); + color: var(--iqser-btn-bg); line-height: 15px; font-weight: 500; } @@ -116,14 +116,14 @@ > .left { width: 375px; min-width: 375px; - background: var(--iqser-grey-2); + background: var(--iqser-alt-background); display: flex; flex-direction: column; .csv-header-pill-content { overflow: auto; padding: 7px 0; - background: var(--iqser-grey-2); + background: var(--iqser-alt-background); @include common-mixins.no-scroll-bar; .csv-header-pill-wrapper { @@ -169,7 +169,7 @@ min-width: 150px; display: flex; flex-direction: column; - background: var(--iqser-grey-2); + background: var(--iqser-alt-background); border-right: 1px solid var(--iqser-separator); &:not(.collapsed) iqser-circle-button { diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss index f73496ca2..ee5df8933 100644 --- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss @@ -24,7 +24,7 @@ .template { padding: 8px 10px; - background-color: var(--iqser-grey-6); + background-color: var(--iqser-btn-bg); border-radius: 4px; transition: background-color 0.2s; position: relative; @@ -51,7 +51,7 @@ } &:hover { - background-color: var(--iqser-grey-4); + background-color: var(--iqser-btn-bg-hover); .actions { display: flex; diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss index aa6d3e1a6..42741d8ec 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss +++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss @@ -21,7 +21,7 @@ transition: background-color 0.2s; &:hover { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-btn-bg); } } } diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss index 1897536ec..97bfc982c 100644 --- a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss @@ -12,7 +12,6 @@ } } -// https://stackoverflow.com/questions/34641281/how-to-add-class-to-host-element :host(.fixed-height) { height: var(--height); overflow: hidden; @@ -76,12 +75,12 @@ mat-chip { transition: background-color 0.2s; &:hover { - background-color: var(--iqser-grey-8); + background-color: var(--iqser-not-disabled-table-item); } } .mat-chip.mat-standard-chip::after { - background: var(--iqser-grey-8); + background: transparent; } .mat-standard-chip:focus::after { 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 16a2aaf46..02647eb80 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 @@ -1,15 +1,14 @@ @use 'common-mixins'; -@use 'variables'; .red-upload-download-overlay { - background: var(--iqser-white); + background: var(--iqser-background); position: fixed; bottom: 20px; right: 20px; - box-shadow: 0 3px 12px 5px rgba(var(--iqser-accent-rgb), 0.14); border-radius: 8px; overflow: hidden; width: 400px; + @include common-mixins.drop-shadow; .red-upload-download-header { display: flex; @@ -19,14 +18,14 @@ padding: 16px 14px 16px 16px; cursor: pointer; - color: var(--iqser-accent); + color: var(--iqser-text); font-size: 13px; font-weight: 600; line-height: 16px; mat-icon { height: 13px; - color: var(--iqser-accent); + color: var(--iqser-text); &.collapse-icon { height: 15px; @@ -52,7 +51,7 @@ .dossier-name-wrapper { display: flex; padding: 4px 16px; - background-color: var(--iqser-grey-2); + background-color: var(--iqser-alt-background); > span { @include common-mixins.line-clamp(1); @@ -90,7 +89,7 @@ } &.error { - background-color: rgba(variables.$primary, 0.1); + background-color: rgba(var(--iqser-primary-rgb), 0.1); padding-right: 100px; .error-message { @@ -113,13 +112,13 @@ } &:not(.error) { - background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, variables.$grey-2 35%); + background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-alt-background) 35%); padding-left: 60px; } } &:not(.error):hover { - background-color: var(--iqser-grey-2); + background-color: var(--iqser-alt-background); .actions { display: flex; diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss index 850c8b220..83465af66 100644 --- a/apps/red-ui/src/styles.scss +++ b/apps/red-ui/src/styles.scss @@ -42,7 +42,8 @@ $iqser-annotation-hover: vars.$grey-8, $iqser-annotation-comments-hover: vars.$grey-4, $iqser-workload-pages-bg: vars.$grey-8, - $iqser-tab-hover: vars.$grey-6 + $iqser-tab-hover: vars.$grey-6, + $iqser-loading-progress: vars.$grey-7 ); $light-accent-5: lighten(vars.$accent, 5%); @@ -90,5 +91,6 @@ $dark-accent-10: darken(vars.$accent, 10%); $iqser-annotation-hover: $dark-accent-5, $iqser-annotation-comments-hover: $light-accent-5, $iqser-workload-pages-bg: $dark-accent-8, - $iqser-tab-hover: vars.$accent + $iqser-tab-hover: vars.$accent, + $iqser-loading-progress: $light-accent-10 );