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 {
background-color: var(--iqser-grey-6);
background-color: var(--iqser-tab-hover);
.dot {
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">
<a [href]="changePasswordUrl" target="_blank"> {{ 'user-profile-screen.actions.change-password' | translate }}</a>
</div>
<div class="iqser-input-group">
<div *ngIf="devMode" class="iqser-input-group">
<mat-slide-toggle color="primary" formControlName="darkTheme">
{{ 'user-profile-screen.form.dark-theme' | translate }}
</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,
})
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 {

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

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

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

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;
&: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) {
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 {

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

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

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