From 7773228ffc3c91170bd0f98d69f186bab85d92d9 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Mon, 13 May 2024 12:28:05 -0500 Subject: [PATCH 1/2] #226 - Dark Mode Bug Fixes --- .../df-welcome-page.component.html | 4 +- .../df-side-nav/df-side-nav.component.html | 102 +++++----- .../df-side-nav/df-side-nav.component.scss | 176 +++++++++++++++--- .../df-theme-toggle.component.ts | 3 +- src/app/shared/utilities/route.ts | 2 - src/dark-style.scss | 13 +- 6 files changed, 214 insertions(+), 86 deletions(-) diff --git a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html index 29d84ae6..ab3fdd8f 100644 --- a/src/app/adf-home/df-welcome-page/df-welcome-page.component.html +++ b/src/app/adf-home/df-welcome-page/df-welcome-page.component.html @@ -59,7 +59,7 @@

- + diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html index 0ac72dc8..c8195d7c 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.html +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html @@ -5,13 +5,20 @@ [class.logged-in]="isLoggedIn$ | async"> - - +
+ + +
+
+ + +

- - - + +
+
- -
-
@@ -152,7 +147,12 @@

class="nav-item" [class.active]="isActive(item)" (click)="handleNavClick(item)"> - {{ navLabel(item.path) | transloco }} + + + + + {{ navLabel(item.path) | transloco }} + @@ -161,7 +161,11 @@

[class.mat-elevation-z0]="true" [expanded]="isActive(item)"> - {{ navLabel(item.path) | transloco }} + + + {{ navLabel(item.path) | transloco }} + .mat-expansion-indicator::after { -// color: unset !important; -// } +.breadcrumb-link { + color: white; +} .dark-theme { .tool-bar, @@ -200,15 +262,51 @@ $red-palette: mat.define-palette(mat.$red-palette); 1003 ) !important; } - .nav-item { - &.active { + + .parent-route { background-color: mat.get-color-from-palette( $df-purple-palette, - 600 + 1003 ) !important; } + + .nav-item { + ::ng-deep .mat-mdc-button-touch-target { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1003 + ) !important; + } + } + &.active { + ::ng-deep .mat-mdc-button-touch-target { + background-color: #e3dfff; + border-top-right-radius: 50px; + border-bottom-right-radius: 50px; + } + } + + .nav-item { + &.active { + ::ng-deep .mat-mdc-button-touch-target { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 600 + ) !important; + } + ::ng-deep .mdc-button__label > span { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 600 + ) !important; + } + } + + img { + filter: invert(1) !important; + + } } - .sidenav-content, .banner, .main { background-color: mat.get-color-from-palette( @@ -220,4 +318,22 @@ $red-palette: mat.define-palette(mat.$red-palette); color: mat.get-color-from-palette($df-purple-palette, 10) !important; } } + .sidenav-content { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1003 + ) !important; + color: white; + .page-header { + color: mat.get-color-from-palette($df-purple-palette, 10) !important; + } + } + + + .content-wrapper { + padding: 2px; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important; + background-color: mat.get-color-from-palette($df-purple-palette, 1002) !important; + border-radius: 6px !important; + } } diff --git a/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts index 4a5e309f..23407c1e 100644 --- a/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts +++ b/src/app/shared/components/df-theme-toggle/df-theme-toggle.component.ts @@ -6,12 +6,11 @@ import { BehaviorSubject } from 'rxjs'; @Component({ selector: 'df-theme-toggle', templateUrl: './df-theme-toggle.component.html', - // styleUrls: ['./df-theme-toggle.component.scss'], standalone: true, imports: [MatSlideToggleModule], }) export class DfThemeToggleComponent { - isDarkMode$: BehaviorSubject = new BehaviorSubject(true); + isDarkMode$: BehaviorSubject = new BehaviorSubject(false); themeService = inject(DfThemeService); toggle() { diff --git a/src/app/shared/utilities/route.ts b/src/app/shared/utilities/route.ts index a433cd44..489d2f19 100644 --- a/src/app/shared/utilities/route.ts +++ b/src/app/shared/utilities/route.ts @@ -56,8 +56,6 @@ const findIconForRoute = (routeName: any) => { } else { return ''; } - // Replace parts of route names to match them to icon filenames if needed - // return `assets/img/nav/${routeName?.path}.svg`; }; export function accessibleRoutes( diff --git a/src/dark-style.scss b/src/dark-style.scss index 1c57a7d9..f121c438 100644 --- a/src/dark-style.scss +++ b/src/dark-style.scss @@ -57,7 +57,18 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .mat-step-label { color: white !important; } - +.parent-route, .mat-expansion-panel-body { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1003 + ) !important; + } + .nav-item .active>.mdc-button__label> .mat-mdc-button-touch-target{ + background-color: mat.get-color-from-palette( + $df-purple-palette, + 700 + ) !important; + } // Radio Button .mat-mdc-radio-button .mdc-radio From 8bde03f1669d0460618a84d4f8468c1d5cc65160 Mon Sep 17 00:00:00 2001 From: Yi-Jacob Date: Mon, 13 May 2024 12:29:20 -0500 Subject: [PATCH 2/2] more fixes --- .../df-side-nav/df-side-nav.component.scss | 45 ++++++++++--------- src/dark-style.scss | 5 ++- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.scss b/src/app/shared/components/df-side-nav/df-side-nav.component.scss index d9879683..6318f803 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.scss +++ b/src/app/shared/components/df-side-nav/df-side-nav.component.scss @@ -184,7 +184,7 @@ $red-palette: mat.define-palette(mat.$red-palette); background: #f6f2fa; .content-wrapper { padding: 2px; - border: 1px solid #f6f2fa; + border: 1px solid #f6f2fa; background-color: #f6f2fa; border-radius: 6px !important; } @@ -263,29 +263,29 @@ $red-palette: mat.define-palette(mat.$red-palette); ) !important; } - .parent-route { + .parent-route { + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1003 + ) !important; + } + + .nav-item { + ::ng-deep .mat-mdc-button-touch-target { background-color: mat.get-color-from-palette( $df-purple-palette, 1003 ) !important; } - - .nav-item { - ::ng-deep .mat-mdc-button-touch-target { - background-color: mat.get-color-from-palette( - $df-purple-palette, - 1003 - ) !important; - } - } - &.active { - ::ng-deep .mat-mdc-button-touch-target { - background-color: #e3dfff; - border-top-right-radius: 50px; - border-bottom-right-radius: 50px; - } + } + &.active { + ::ng-deep .mat-mdc-button-touch-target { + background-color: #e3dfff; + border-top-right-radius: 50px; + border-bottom-right-radius: 50px; } - + } + .nav-item { &.active { ::ng-deep .mat-mdc-button-touch-target { @@ -304,7 +304,6 @@ $red-palette: mat.define-palette(mat.$red-palette); img { filter: invert(1) !important; - } } .banner, @@ -329,11 +328,13 @@ $red-palette: mat.define-palette(mat.$red-palette); } } - .content-wrapper { padding: 2px; - border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important; - background-color: mat.get-color-from-palette($df-purple-palette, 1002) !important; + border: 1px solid mat.get-color-from-palette($df-purple-palette, 1001) !important; + background-color: mat.get-color-from-palette( + $df-purple-palette, + 1002 + ) !important; border-radius: 6px !important; } } diff --git a/src/dark-style.scss b/src/dark-style.scss index f121c438..f361b0a5 100644 --- a/src/dark-style.scss +++ b/src/dark-style.scss @@ -57,13 +57,14 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette); .mat-step-label { color: white !important; } -.parent-route, .mat-expansion-panel-body { + .parent-route, + .mat-expansion-panel-body { background-color: mat.get-color-from-palette( $df-purple-palette, 1003 ) !important; } - .nav-item .active>.mdc-button__label> .mat-mdc-button-touch-target{ + .nav-item .active > .mdc-button__label > .mat-mdc-button-touch-target { background-color: mat.get-color-from-palette( $df-purple-palette, 700