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

RED-4397: Dark theme

Browse Source
This commit is contained in:
Adina Țeudan 2022-06-29 19:56:16 +03:00
parent e53a54c0d2
commit 23425d8653
9 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,7 +55,7 @@
} }
&:hover { &:hover {
background-color: var(--iqser-grey-6); background-color: var(--iqser-tab-hover);
.dot { .dot {
background-color: var(--iqser-grey-5); background-color: var(--iqser-grey-5);

3
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html
View File

@ -28,7 +28,8 @@
<div class="iqser-input-group"> <div class="iqser-input-group">
<a [href]="changePasswordUrl" target="_blank"> {{ 'user-profile-screen.actions.change-password' | translate }}</a> <a [href]="changePasswordUrl" target="_blank"> {{ 'user-profile-screen.actions.change-password' | translate }}</a>
</div> </div>
<div class="iqser-input-group">
<div *ngIf="devMode" class="iqser-input-group">
<mat-slide-toggle color="primary" formControlName="darkTheme"> <mat-slide-toggle color="primary" formControlName="darkTheme">
{{ 'user-profile-screen.form.dark-theme' | translate }} {{ 'user-profile-screen.form.dark-theme' | translate }}
</mat-slide-toggle> </mat-slide-toggle>

5
apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts
View File

@ -19,8 +19,9 @@ import { UserPreferenceService } from '@services/user-preference.service';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class UserProfileScreenComponent extends BaseFormComponent implements OnInit { export class UserProfileScreenComponent extends BaseFormComponent implements OnInit {
readonly changePasswordUrl: SafeResourceUrl;
readonly translations = languagesTranslations; readonly translations = languagesTranslations;
readonly devMode = this._userPreferenceService.areDevFeaturesEnabled;
readonly changePasswordUrl: SafeResourceUrl;
#profileModel: IProfile; #profileModel: IProfile;
@ -46,7 +47,7 @@ export class UserProfileScreenComponent extends BaseFormComponent implements OnI
} }
get themeChanged(): boolean { get themeChanged(): boolean {
return this._profileModel['darkTheme'] !== this.form.get('darkTheme').value; return this.#profileModel['darkTheme'] !== this.form.get('darkTheme').value;
} }
get profileChanged(): boolean { get profileChanged(): boolean {

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

@ -100,7 +100,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
color: var(--iqser-grey-7); color: var(--iqser-btn-bg);
line-height: 15px; line-height: 15px;
font-weight: 500; font-weight: 500;
} }
@ -116,14 +116,14 @@
> .left { > .left {
width: 375px; width: 375px;
min-width: 375px; min-width: 375px;
background: var(--iqser-grey-2); background: var(--iqser-alt-background);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.csv-header-pill-content { .csv-header-pill-content {
overflow: auto; overflow: auto;
padding: 7px 0; padding: 7px 0;
background: var(--iqser-grey-2); background: var(--iqser-alt-background);
@include common-mixins.no-scroll-bar; @include common-mixins.no-scroll-bar;
.csv-header-pill-wrapper { .csv-header-pill-wrapper {
@ -169,7 +169,7 @@
min-width: 150px; min-width: 150px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--iqser-grey-2); background: var(--iqser-alt-background);
border-right: 1px solid var(--iqser-separator); border-right: 1px solid var(--iqser-separator);
&:not(.collapsed) iqser-circle-button { &:not(.collapsed) iqser-circle-button {

4
apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss
View File

@ -24,7 +24,7 @@
.template { .template {
padding: 8px 10px; padding: 8px 10px;
background-color: var(--iqser-grey-6); background-color: var(--iqser-btn-bg);
border-radius: 4px; border-radius: 4px;
transition: background-color 0.2s; transition: background-color 0.2s;
position: relative; position: relative;
@ -51,7 +51,7 @@
} }
&:hover { &:hover {
background-color: var(--iqser-grey-4); background-color: var(--iqser-btn-bg-hover);
.actions { .actions {
display: flex; display: flex;

2
apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
View File

@ -21,7 +21,7 @@
transition: background-color 0.2s; transition: background-color 0.2s;
&:hover { &:hover {
background-color: var(--iqser-grey-6); background-color: var(--iqser-btn-bg);
} }
} }
} }

5
apps/red-ui/src/app/modules/shared/components/select/select.component.scss
View File

@ -12,7 +12,6 @@
} }
} }
// https://stackoverflow.com/questions/34641281/how-to-add-class-to-host-element
:host(.fixed-height) { :host(.fixed-height) {
height: var(--height); height: var(--height);
overflow: hidden; overflow: hidden;
@ -76,12 +75,12 @@ mat-chip {
transition: background-color 0.2s; transition: background-color 0.2s;
&:hover { &:hover {
background-color: var(--iqser-grey-8); background-color: var(--iqser-not-disabled-table-item);
} }
} }
.mat-chip.mat-standard-chip::after { .mat-chip.mat-standard-chip::after {
background: var(--iqser-grey-8); background: transparent;
} }
.mat-standard-chip:focus::after { .mat-standard-chip:focus::after {

17
apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
View File

@ -1,15 +1,14 @@
@use 'common-mixins'; @use 'common-mixins';
@use 'variables';
.red-upload-download-overlay { .red-upload-download-overlay {
background: var(--iqser-white); background: var(--iqser-background);
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
box-shadow: 0 3px 12px 5px rgba(var(--iqser-accent-rgb), 0.14);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
width: 400px; width: 400px;
@include common-mixins.drop-shadow;
.red-upload-download-header { .red-upload-download-header {
display: flex; display: flex;
@ -19,14 +18,14 @@
padding: 16px 14px 16px 16px; padding: 16px 14px 16px 16px;
cursor: pointer; cursor: pointer;
color: var(--iqser-accent); color: var(--iqser-text);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
line-height: 16px; line-height: 16px;
mat-icon { mat-icon {
height: 13px; height: 13px;
color: var(--iqser-accent); color: var(--iqser-text);
&.collapse-icon { &.collapse-icon {
height: 15px; height: 15px;
@ -52,7 +51,7 @@
.dossier-name-wrapper { .dossier-name-wrapper {
display: flex; display: flex;
padding: 4px 16px; padding: 4px 16px;
background-color: var(--iqser-grey-2); background-color: var(--iqser-alt-background);
> span { > span {
@include common-mixins.line-clamp(1); @include common-mixins.line-clamp(1);
@ -90,7 +89,7 @@
} }
&.error { &.error {
background-color: rgba(variables.$primary, 0.1); background-color: rgba(var(--iqser-primary-rgb), 0.1);
padding-right: 100px; padding-right: 100px;
.error-message { .error-message {
@ -113,13 +112,13 @@
} }
&:not(.error) { &: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; padding-left: 60px;
} }
} }
&:not(.error):hover { &:not(.error):hover {
background-color: var(--iqser-grey-2); background-color: var(--iqser-alt-background);
.actions { .actions {
display: flex; display: flex;

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

@ -42,7 +42,8 @@
$iqser-annotation-hover: vars.$grey-8, $iqser-annotation-hover: vars.$grey-8,
$iqser-annotation-comments-hover: vars.$grey-4, $iqser-annotation-comments-hover: vars.$grey-4,
$iqser-workload-pages-bg: vars.$grey-8, $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%); $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-hover: $dark-accent-5,
$iqser-annotation-comments-hover: $light-accent-5, $iqser-annotation-comments-hover: $light-accent-5,
$iqser-workload-pages-bg: $dark-accent-8, $iqser-workload-pages-bg: $dark-accent-8,
$iqser-tab-hover: vars.$accent $iqser-tab-hover: vars.$accent,
$iqser-loading-progress: $light-accent-10
); );