Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

RED-4397: Dark theme WIP

Browse Source
This commit is contained in:
Adina Țeudan 2022-06-27 21:04:35 +03:00
parent a2779a4d65
commit 25df6a9d8f
11 changed files with 77 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/red-ui/src/app/app.component.ts
View File

@ -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();

2
apps/red-ui/src/app/components/notifications/notifications.component.scss
View File

@ -41,7 +41,7 @@
white-space: normal;
a {
color: var(--iqser-accent);
color: var(--iqser-text);
font-weight: bold;
}
}

4
apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss
View File

@ -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 {

6
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
View File

@ -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;

2
apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss
View File

@ -31,5 +31,5 @@
}
.right-chart {
border-left: 1px solid rgba(226, 228, 233, 0.9);
border-left: 1px solid var(--iqser-separator);
}

2
apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.scss
View File

@ -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);
}

6
apps/red-ui/src/assets/styles/_variables.scss
View File

@ -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);

47
apps/red-ui/src/styles.scss
View File

@ -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%)
);

2
libs/common-ui

@ -1 +1 @@
Subproject commit 45dc0f0f1199bc510d477b1e132e098c4c605e3f
Subproject commit f12e9a20943a8c6cffd1b5c1c2e1ed38e0ab022a

2
paligo-styles/search.scss
View File

@ -2,7 +2,7 @@
@use 'mixin';
.portal-search-result {
background-color: variables.$grey-9;
background-color: variables.$grey-2;
}
.search-container {

35
paligo-styles/style.scss
View File

@ -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;
}