From 25df6a9d8f4dc6801eabf2ee3020784031240bc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 27 Jun 2022 21:04:35 +0300 Subject: [PATCH] RED-4397: Dark theme WIP --- apps/red-ui/src/app/app.component.ts | 6 ++- .../notifications.component.scss | 2 +- .../spotlight-search.component.scss | 4 +- ...ttributes-csv-import-dialog.component.scss | 6 +-- .../dossiers-listing-details.component.scss | 2 +- .../dossier-state.component.scss | 2 +- apps/red-ui/src/assets/styles/_variables.scss | 6 --- apps/red-ui/src/styles.scss | 47 +++++++++++++++---- libs/common-ui | 2 +- paligo-styles/search.scss | 2 +- paligo-styles/style.scss | 35 +++++++++----- 11 files changed, 77 insertions(+), 37 deletions(-) diff --git a/apps/red-ui/src/app/app.component.ts b/apps/red-ui/src/app/app.component.ts index 10eefc848..68361d897 100644 --- a/apps/red-ui/src/app/app.component.ts +++ b/apps/red-ui/src/app/app.component.ts @@ -1,8 +1,9 @@ -import { Component, ViewContainerRef } from '@angular/core'; +import { Component, Inject, Renderer2, ViewContainerRef } from '@angular/core'; import { RouterHistoryService } from '@services/router-history.service'; import { UserService } from '@services/user.service'; import { REDDocumentViewer } from './modules/pdf-viewer/services/document-viewer.service'; import { DossiersChangesService } from '@services/dossiers/dossier-changes.service'; +import { DOCUMENT } from '@angular/common'; @Component({ selector: 'redaction-root', @@ -18,7 +19,10 @@ export class AppComponent { private readonly _userService: UserService, readonly documentViewer: REDDocumentViewer, private readonly _dossierChangesService: DossiersChangesService, + @Inject(DOCUMENT) private document: Document, + private renderer: Renderer2, ) { + this.renderer.addClass(this.document.body, 'dark'); // TODO: Find a better place to initialize dossiers refresh if (_userService.currentUser?.isUser) { _dossierChangesService.initializeRefresh(); 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 b0c2303ea..6f896c93a 100644 --- a/apps/red-ui/src/app/components/notifications/notifications.component.scss +++ b/apps/red-ui/src/app/components/notifications/notifications.component.scss @@ -41,7 +41,7 @@ white-space: normal; a { - color: var(--iqser-accent); + color: var(--iqser-text); font-weight: bold; } } diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss index d725c9d04..b5de9680c 100644 --- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss @@ -7,8 +7,8 @@ font-size: 13px; border: none; outline: none; - color: var(--iqser-accent); - background-color: var(--iqser-white); + color: var(--iqser-text); + background-color: var(--iqser-background); } .highlight { 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 2e6df1245..bad6fc2da 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 @@ -54,7 +54,7 @@ .csv-part-header { min-height: 50px; box-sizing: border-box; - background: var(--iqser-white); + background: var(--iqser-background); border-top: 1px solid var(--iqser-separator); border-bottom: 1px solid var(--iqser-separator); display: flex; @@ -82,7 +82,7 @@ } .search-input-container { - background-color: var(--iqser-white); + background-color: var(--iqser-background); border-bottom: 1px solid var(--iqser-separator); padding: 8px 16px; } @@ -133,7 +133,7 @@ min-height: 32px; border-radius: 8px; padding: 10px; - background: var(--iqser-white); + background: var(--iqser-background); cursor: pointer; display: flex; flex-direction: column; diff --git a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss index b5a1b4580..522416718 100644 --- a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss +++ b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss @@ -31,5 +31,5 @@ } .right-chart { - border-left: 1px solid rgba(226, 228, 233, 0.9); + border-left: 1px solid var(--iqser-separator); } diff --git a/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.scss b/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.scss index ce8a15efc..9290cb1ca 100644 --- a/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.scss @@ -10,5 +10,5 @@ redaction-small-chip { .dossier-state-text { font-size: 13px; line-height: 16px; - color: var(--iqser-grey-1); + color: var(--iqser-text); } diff --git a/apps/red-ui/src/assets/styles/_variables.scss b/apps/red-ui/src/assets/styles/_variables.scss index be6a0f8ce..91b1a3ee9 100644 --- a/apps/red-ui/src/assets/styles/_variables.scss +++ b/apps/red-ui/src/assets/styles/_variables.scss @@ -9,9 +9,7 @@ $grey-5: #d3d5da; $grey-6: #f0f1f4; $grey-7: #9398a0; $grey-8: #f9fafb; -$grey-9: #f5f5f7; $grey-10: #313d4e; -$grey-11: #ecedf0; $blue-1: #4875f7; $blue-2: #48c9f7; @@ -34,8 +32,4 @@ $warn: $yellow-2; $light: $white; $dark: $black; -$btn-bg-hover: $grey-4; -$btn-bg: $grey-6; -$quick-filter-border: $grey-5; - $separator: rgba(226, 228, 233, 0.9); diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss index 4b83d585b..6ee1dc0e1 100644 --- a/apps/red-ui/src/styles.scss +++ b/apps/red-ui/src/styles.scss @@ -4,22 +4,22 @@ @use 'common-variables'; @use 'assets/styles/red-theme'; -@include common-variables.configure( +@include common-variables.configureLight( $iqser-primary: vars.$primary, $iqser-primary-rgb: common-functions.hexToRgb(vars.$primary), $iqser-primary-2: vars.$primary-2, $iqser-accent: vars.$accent, $iqser-accent-rgb: common-functions.hexToRgb(vars.$accent), + $iqser-background: vars.$white, + $iqser-text: vars.$accent, + $iqser-text-rgb: common-functions.hexToRgb(vars.$accent), $iqser-disabled: vars.$grey-7, $iqser-not-disabled-table-item: vars.$grey-8, - $iqser-btn-bg-hover: vars.$btn-bg-hover, - $iqser-btn-bg: vars.$btn-bg, + $iqser-btn-bg-hover: vars.$grey-4, + $iqser-btn-bg: vars.$grey-6, + $iqser-side-nav: vars.$grey-2, $iqser-warn: vars.$warn, - $iqser-white: vars.$white, - $iqser-black: vars.$black, - $iqser-light: vars.$light, $iqser-separator: vars.$separator, - $iqser-quick-filter-border: vars.$quick-filter-border, $iqser-grey-2: vars.$grey-2, $iqser-grey-3: vars.$grey-3, $iqser-grey-4: vars.$grey-4, @@ -30,5 +30,36 @@ $iqser-green-2: vars.$green-2, $iqser-yellow-1: vars.$yellow-1, $iqser-yellow-2: vars.$yellow-2, - $iqser-helpmode-primary: vars.$green-2 + $iqser-helpmode-primary: vars.$green-2, + $iqser-inputs-border: vars.$grey-5 +); + +@include common-variables.configureDark( + $iqser-primary: vars.$primary, + $iqser-primary-rgb: common-functions.hexToRgb(vars.$primary), + $iqser-primary-2: vars.$primary-2, + $iqser-accent: vars.$accent, + $iqser-accent-rgb: common-functions.hexToRgb(vars.$accent), + $iqser-background: darken(vars.$accent, 10%), + $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-side-nav: darken(vars.$accent, 8%), + $iqser-warn: vars.$warn, + $iqser-separator: vars.$accent, + $iqser-grey-2: vars.$grey-2, + $iqser-grey-3: vars.$grey-3, + $iqser-grey-4: vars.$grey-4, + $iqser-grey-5: vars.$grey-5, + $iqser-grey-6: vars.$grey-6, + $iqser-grey-7: vars.$grey-7, + $iqser-green-1: vars.$green-1, + $iqser-green-2: vars.$green-2, + $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%) ); diff --git a/libs/common-ui b/libs/common-ui index 45dc0f0f1..f12e9a209 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 45dc0f0f1199bc510d477b1e132e098c4c605e3f +Subproject commit f12e9a20943a8c6cffd1b5c1c2e1ed38e0ab022a diff --git a/paligo-styles/search.scss b/paligo-styles/search.scss index a6789b7f3..920690119 100644 --- a/paligo-styles/search.scss +++ b/paligo-styles/search.scss @@ -2,7 +2,7 @@ @use 'mixin'; .portal-search-result { - background-color: variables.$grey-9; + background-color: variables.$grey-2; } .search-container { diff --git a/paligo-styles/style.scss b/paligo-styles/style.scss index 60bf3b494..f71b6d57f 100644 --- a/paligo-styles/style.scss +++ b/paligo-styles/style.scss @@ -11,15 +11,21 @@ body { color: variables.$accent; - background-color: variables.$grey-9; + background-color: variables.$grey-2; font-family: 'Open Sans', sans-serif; - h1, .h1, - h2, .h2, - h3, .h3, - h4, .h4, - h5, .h5, - h6, .h6, + h1, + .h1, + h2, + .h2, + h3, + .h3, + h4, + .h4, + h5, + .h5, + h6, + .h6, p, pre { margin: 0; @@ -28,23 +34,28 @@ body { @include common-mixins.scroll-bar; - h1, .h1 { + h1, + .h1 { @include mixin.heading-1; } - h2, .h2 { + h2, + .h2 { @include mixin.heading-2; } - h3, .h3 { + h3, + .h3 { @include mixin.heading-3; } - h4, .h4 { + h4, + .h4 { @include mixin.heading-4; } - h5, .h5 { + h5, + .h5 { @include mixin.heading-5; }