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-28 23:25:47 +03:00
parent c072ec2e27
commit 22501aadc5
18 changed files with 86 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,12 +8,12 @@
border: none;
outline: none;
color: var(--iqser-text);
background-color: var(--iqser-background);
background-color: transparent;
}
.highlight {
border-radius: 4px;
background-color: var(--iqser-grey-2);
background-color: var(--iqser-side-nav);
}
.wrapper {

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

@ -16,7 +16,7 @@
.statement {
opacity: 0.7;
color: var(--iqser-grey-1);
color: var(--iqser-text);
font-weight: 500;
padding: 10px 0;
}
@ -40,7 +40,7 @@
padding: 10px 0;
.group-title {
color: var(--iqser-grey-1);
color: var(--iqser-text);
font-weight: 600;
}

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

@ -102,8 +102,8 @@
{{ log.message }}
</div>
<div class="small-label cell">
{{ log.recordDate | date: 'd MMM yyyy, hh:mm a' }}
<div class="cell">
<span class="small-label">{{ log.recordDate | date: 'd MMM yyyy, hh:mm a' }}</span>
</div>
<div class="user-column cell">

8
apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
View File

@ -77,12 +77,12 @@
{{ attribute.label }}
</div>
<div class="cell small-label">
{{ attribute.placeholder }}
<div class="cell">
<span class="small-label">{{ attribute.placeholder }}</span>
</div>
<div class="cell small-label">
{{ translations[attribute.type] | translate }}
<div class="cell">
<span class="small-label">{{ translations[attribute.type] | translate }}</span>
</div>
<div class="cell">

8
apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.html
View File

@ -70,12 +70,12 @@
</div>
</div>
<div class="cell small-label">
<span>{{ state.rank }}</span>
<div class="cell">
<span class="small-label">{{ state.rank }}</span>
</div>
<div class="cell small-label">
<span>{{ state.dossierCount }}</span>
<div class="cell">
<span class="small-label">{{ state.dossierCount }}</span>
</div>
<div class="cell">

2
apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen.component.scss
View File

@ -9,7 +9,7 @@
font-size: 16px;
font-weight: 600;
line-height: 20px;
color: var(--iqser-grey-1);
color: var(--iqser-text);
}
.right-container {

8
apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
View File

@ -96,7 +96,9 @@
<span>{{ attribute.label }}</span>
</div>
<div [translate]="translations[attribute.type]" class="small-label cell"></div>
<div class="cell">
<span [translate]="translations[attribute.type]" class="small-label"></span>
</div>
<div class="center read-only cell">
<mat-icon
@ -107,8 +109,8 @@
></mat-icon>
</div>
<div class="small-label cell">
{{ attribute.csvColumnHeader }}
<div class="cell">
<span class="small-label">{{ attribute.csvColumnHeader }}</span>
</div>
<div class="center cell">

16
apps/red-ui/src/app/modules/admin/screens/license/combo-chart/combo-chart.component.scss
View File

@ -66,7 +66,7 @@
}
.tooltip-anchor {
fill: rgb(0, 0, 0);
fill: var(--iqser-text);
}
.gridline-path {
@ -86,4 +86,18 @@
}
}
}
fill: var(--iqser-text);
}
.chart-legend .legend-labels {
background: var(--iqser-alt-background) !important;
.legend-label .legend-label-text {
color: var(--iqser-text) !important;
&:hover {
color: rgba(var(--iqser-text-rgb), 0.8) !important;
}
}
}

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

@ -27,7 +27,7 @@
&:hover {
> div {
background-color: var(--iqser-grey-2);
background-color: var(--iqser-alt-background);
}
}
}

8
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -74,7 +74,9 @@
<redaction-initials-avatar [showYou]="true" [user]="user" [withName]="true"></redaction-initials-avatar>
</div>
<div class="small-label cell">{{ user.email || '-' }}</div>
<div class="cell">
<span class="small-label">{{ user.email || '-' }}</span>
</div>
<div class="center cell">
<mat-slide-toggle
@ -85,7 +87,9 @@
></mat-slide-toggle>
</div>
<div class="small-label cell">{{ getDisplayRoles(user) }}</div>
<div class="cell">
<span class="small-label">{{ getDisplayRoles(user) }}</span>
</div>
<div class="cell">
<div class="action-buttons">

4
apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.html
View File

@ -2,7 +2,9 @@
<redaction-dossier-name-column [dossierStats]="stats$ | async" [dossier]="dossier"></redaction-dossier-name-column>
</div>
<div class="cell small-label">{{ dossier.archivedTime | date: 'd MMM yyyy' }}</div>
<div class="cell">
<span class="small-label">{{ dossier.archivedTime | date: 'd MMM yyyy' }}</span>
</div>
<div class="cell user-column">
<redaction-initials-avatar [user]="dossier.ownerId" [withName]="true"></redaction-initials-avatar>

2
apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.scss
View File

@ -17,7 +17,7 @@
&:not(.empty) {
&:hover {
background-color: var(--iqser-grey-2);
background-color: var(--iqser-side-nav);
.heading {
text-decoration: underline;

4
apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.scss
View File

@ -1,8 +1,8 @@
@use 'libs/common-ui/src/assets/styles/common-mixins';
@use 'common-mixins';
.file-actions {
display: flex;
color: var(--iqser-grey-1);
color: var(--iqser-text);
> *:not(:last-child) {
margin-right: 2px;

25
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.html
View File

@ -24,19 +24,18 @@
></redaction-team-members>
</ng-container>
<ng-container *ngIf="(selectedReviewers$ | async)?.length">
<div class="all-caps-label mt-16" id="reviewersLabel" translate="assign-dossier-owner.dialog.reviewers"></div>
<redaction-team-members
(remove)="toggleSelected($event)"
[canAdd]="false"
[canRemove]="hasOwner && !disabled"
[dossierId]="dossier.id"
[largeSpacing]="true"
[memberIds]="selectedReviewers$ | async"
[perLine]="13"
[unremovableMembers]="[selectedOwnerId]"
></redaction-team-members>
</ng-container>
<div class="all-caps-label mt-16" id="reviewersLabel" translate="assign-dossier-owner.dialog.reviewers"></div>
<redaction-team-members
(remove)="toggleSelected($event)"
[canAdd]="false"
[canRemove]="hasOwner && !disabled"
[dossierId]="dossier.id"
[largeSpacing]="true"
[memberIds]="selectedReviewers$ | async"
[perLine]="13"
[unremovableMembers]="[selectedOwnerId]"
></redaction-team-members>
<ng-container *ngIf="!(selectedReviewers$ | async)?.length">
<div class="info mt-4">{{ 'assign-dossier-owner.dialog.no-reviewers' | translate }}</div>

2
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
View File

@ -54,7 +54,7 @@ redaction-team-members {
&.selected,
&:hover {
background-color: var(--iqser-grey-2);
background-color: var(--iqser-alt-background);
.actions {
display: flex;

2
apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.scss
View File

@ -18,6 +18,6 @@ mat-slide-toggle {
}
&[disabled] {
color: rgba(var(--iqser-accent-rgb), 0.3);
color: rgba(var(--iqser-text-rgb), 0.3);
}
}

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

@ -65,13 +65,13 @@ mat-chip {
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
background-color: var(--iqser-grey-6);
color: var(--iqser-accent);
background-color: var(--iqser-btn-bg);
color: var(--iqser-text);
}
.mat-chip.mat-standard-chip {
background-color: var(--iqser-white);
color: var(--iqser-accent);
background-color: var(--iqser-background);
color: var(--iqser-text);
margin: 0 0 2px 0;
transition: background-color 0.2s;

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

@ -34,24 +34,33 @@
$iqser-helpmode-primary: vars.$green-2,
$iqser-inputs-border: vars.$grey-5,
$iqser-popup-background: vars.$white,
$iqser-shadow: vars.$grey-4
$iqser-shadow: vars.$grey-4,
$iqser-toggle-bg: vars.$grey-4,
$iqser-file-drop-drag-over: #e2eefd
);
$light-accent-5: lighten(vars.$accent, 5%);
$light-accent-10: lighten(vars.$accent, 10%);
$dark-accent-5: darken(vars.$accent, 5%);
$dark-accent-8: darken(vars.$accent, 8%);
$dark-accent-10: darken(vars.$accent, 10%);
@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-alt-background: darken(vars.$accent, 5%),
$iqser-background: $dark-accent-10,
$iqser-alt-background: $dark-accent-5,
$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-not-disabled-table-item: $dark-accent-5,
$iqser-btn-bg-hover: vars.$accent,
$iqser-btn-bg: darken(vars.$accent, 8%),
$iqser-side-nav: darken(vars.$accent, 8%),
$iqser-btn-bg: $dark-accent-8,
$iqser-side-nav: $dark-accent-8,
$iqser-warn: vars.$warn,
$iqser-separator: vars.$accent,
$iqser-grey-2: vars.$grey-2,
@ -65,7 +74,9 @@
$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%),
$iqser-popup-background: darken(vars.$accent, 5%),
$iqser-shadow: #00000060
$iqser-inputs-border: $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
);