From e53a54c0d2d18f39adef1a51a0e65706e065deb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Wed, 29 Jun 2022 03:20:11 +0300 Subject: [PATCH] RED-4397: Dark theme WIP --- .../dossier-details.component.scss | 2 +- .../annotation-details.component.scss | 2 +- .../annotation-wrapper.component.scss | 4 ++-- .../file-workload.component.scss | 4 ++-- .../page-indicator.component.scss | 8 ++++---- .../file-preview-screen.component.scss | 2 +- .../paginator/paginator.component.scss | 5 +++-- .../src/assets/icons/general/reference.svg | 10 ++++++---- apps/red-ui/src/assets/pdftron/stylesheet.css | 5 +++++ apps/red-ui/src/assets/styles/_variables.scss | 2 -- .../src/assets/styles/red-components.scss | 2 +- apps/red-ui/src/styles.scss | 20 +++++++++++++------ 12 files changed, 40 insertions(+), 26 deletions(-) diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.scss index 73039cfb8..e415ad1bc 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.scss +++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.scss @@ -29,7 +29,7 @@ padding: 3px 8px; &:hover { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-tab-hover); } &.active { diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss index a3b6a8184..1110e38ca 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.scss @@ -28,7 +28,7 @@ height: 24px; &:hover { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-tab-hover); border-radius: 12px; mat-icon { diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.scss index a6653f9b5..6817bb6ea 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.scss @@ -52,7 +52,7 @@ } &:hover { - background-color: var(--iqser-grey-4); + background-color: var(--iqser-annotation-comments-hover); } } } @@ -60,7 +60,7 @@ &:hover, &.help-mode { - background-color: var(--iqser-grey-8); + background-color: var(--iqser-annotation-hover); ::ng-deep .annotation-actions { display: flex; diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss index c7ddef779..855230586 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss @@ -78,7 +78,7 @@ outline: none; &.active-panel { - background-color: #fafafa; + background-color: var(--iqser-workload-pages-bg); } } @@ -98,7 +98,7 @@ transition: background-color 0.25s; &:not(.disabled):hover { - background-color: var(--iqser-grey-6); + background-color: var(--iqser-tab-hover); } mat-icon { diff --git a/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.scss b/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.scss index 818da8a29..e248fd1fa 100644 --- a/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.scss @@ -1,12 +1,12 @@ .page-wrapper { - color: var(--iqser-accent); + color: var(--iqser-text); position: relative; padding: 12px 14px 12px 8px; cursor: pointer; border-left: 4px solid transparent; &:hover { - background-color: var(--iqser-grey-2); + background-color: var(--iqser-alt-background); } &.active { @@ -33,10 +33,10 @@ } &.read { - color: var(--iqser-grey-5); + color: var(--iqser-inputs-outline); .text { - color: var(--iqser-accent); + color: var(--iqser-text); } } diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss index f149bcbab..e658d2b05 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss +++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss @@ -1,7 +1,7 @@ .vertical-line { width: 1px; height: 30px; - background-color: var(--iqser-grey-4); + background-color: var(--iqser-separator); margin: 0 16px; } diff --git a/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss b/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss index 21be9c450..7a34c7e8e 100644 --- a/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss +++ b/apps/red-ui/src/app/modules/pdf-viewer/components/paginator/paginator.component.scss @@ -4,7 +4,7 @@ bottom: 20px; left: calc(50% - (var(--workload-width) / 2)); transform: translate(-50%); - background: var(--iqser-white); + background: var(--iqser-background); color: var(--iqser-grey-7); border: 1px solid var(--iqser-grey-7); border-radius: 8px; @@ -32,6 +32,7 @@ margin: 0; } + background-color: var(--iqser-background); color: var(--iqser-grey-7); text-decoration: none; outline: none; @@ -55,7 +56,7 @@ padding-right: 4px; &:hover { - color: var(--iqser-accent); + color: var(--iqser-text); } } } diff --git a/apps/red-ui/src/assets/icons/general/reference.svg b/apps/red-ui/src/assets/icons/general/reference.svg index 77e985170..1b88e7b29 100644 --- a/apps/red-ui/src/assets/icons/general/reference.svg +++ b/apps/red-ui/src/assets/icons/general/reference.svg @@ -1,10 +1,12 @@ - - - + + + - + diff --git a/apps/red-ui/src/assets/pdftron/stylesheet.css b/apps/red-ui/src/assets/pdftron/stylesheet.css index 65408fd9a..1003f8cc9 100644 --- a/apps/red-ui/src/assets/pdftron/stylesheet.css +++ b/apps/red-ui/src/assets/pdftron/stylesheet.css @@ -37,3 +37,8 @@ .excluded-page { border: 2px solid #dd4d5080; } + +.AnnotationPopup { + --component-background: white; + --popup-button-hover: #e7edf3; +} diff --git a/apps/red-ui/src/assets/styles/_variables.scss b/apps/red-ui/src/assets/styles/_variables.scss index 91b1a3ee9..41fec2923 100644 --- a/apps/red-ui/src/assets/styles/_variables.scss +++ b/apps/red-ui/src/assets/styles/_variables.scss @@ -31,5 +31,3 @@ $accent: $grey-1; $warn: $yellow-2; $light: $white; $dark: $black; - -$separator: rgba(226, 228, 233, 0.9); diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index 78d3c5e9e..e4155f00d 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -88,7 +88,7 @@ display: flex; align-items: center; justify-content: space-between; - background-color: var(--iqser-grey-6); + background-color: var(--iqser-btn-bg); > div { display: flex; diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss index 665f6cbe4..850c8b220 100644 --- a/apps/red-ui/src/styles.scss +++ b/apps/red-ui/src/styles.scss @@ -20,7 +20,7 @@ $iqser-btn-bg: vars.$grey-6, $iqser-side-nav: vars.$grey-2, $iqser-warn: vars.$warn, - $iqser-separator: vars.$separator, + $iqser-separator: rgba(vars.$grey-4, 0.9), $iqser-grey-2: vars.$grey-2, $iqser-grey-3: vars.$grey-3, $iqser-grey-4: vars.$grey-4, @@ -32,13 +32,17 @@ $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-outline: vars.$grey-5, $iqser-popup-background: vars.$white, $iqser-shadow: vars.$grey-4, $iqser-toggle-bg: vars.$grey-4, $iqser-file-drop-drag-over: #e2eefd, $iqser-user-avatar-1: vars.$grey-6, - $iqser-user-avatar-2: vars.$grey-4 + $iqser-user-avatar-2: vars.$grey-4, + $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 ); $light-accent-5: lighten(vars.$accent, 5%); @@ -61,7 +65,7 @@ $dark-accent-10: darken(vars.$accent, 10%); $iqser-disabled: vars.$grey-7, $iqser-not-disabled-table-item: $dark-accent-5, $iqser-btn-bg-hover: vars.$accent, - $iqser-btn-bg: $dark-accent-8, + $iqser-btn-bg: $dark-accent-5, $iqser-side-nav: $dark-accent-8, $iqser-warn: vars.$warn, $iqser-separator: vars.$accent, @@ -76,11 +80,15 @@ $dark-accent-10: darken(vars.$accent, 10%); $iqser-yellow-1: vars.$yellow-1, $iqser-yellow-2: vars.$yellow-2, $iqser-helpmode-primary: vars.$green-2, - $iqser-inputs-border: $light-accent-10, + $iqser-inputs-outline: $light-accent-10, $iqser-popup-background: $dark-accent-5, $iqser-shadow: rgba(0, 0, 0, 0.4), $iqser-toggle-bg: $light-accent-5, $iqser-file-drop-drag-over: $light-accent-10, $iqser-user-avatar-1: $light-accent-5, - $iqser-user-avatar-2: $light-accent-10 + $iqser-user-avatar-2: $light-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 );