+
+
{{ 'user-profile-screen.form.dark-theme' | translate }}
diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts
index 941c9ff75..af9648942 100644
--- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts
+++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts
@@ -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 {
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 bad6fc2da..79ddc9f17 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
@@ -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 {
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss
index f73496ca2..ee5df8933 100644
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.scss
@@ -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;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
index aa6d3e1a6..42741d8ec 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
@@ -21,7 +21,7 @@
transition: background-color 0.2s;
&:hover {
- background-color: var(--iqser-grey-6);
+ background-color: var(--iqser-btn-bg);
}
}
}
diff --git a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
index 1897536ec..97bfc982c 100644
--- a/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/select/select.component.scss
@@ -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 {
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
index 16a2aaf46..02647eb80 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.scss
@@ -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;
diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss
index 850c8b220..83465af66 100644
--- a/apps/red-ui/src/styles.scss
+++ b/apps/red-ui/src/styles.scss
@@ -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
);