RED-5875: Material upgrade - dark theme, other fixes

apps/red-ui/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { BaseScreenComponent } from '@components/base-screen/base-screen.compone
 import { MissingTranslationHandler } from '@ngx-translate/core';
 import {
     CachingModule,
+    ChevronButtonComponent,
     CircleButtonComponent,
     CommonUiModule,
     EmptyStateComponent,
@@ -169,6 +170,7 @@ export const appModuleFactory = (config: AppConfig) => {
             IconButtonComponent,
             TenantPipe,
             MatDividerModule,
+            ChevronButtonComponent,
         ],
         providers: [
             {

apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html

@@ -22,10 +22,11 @@
             </a>
 
             <ng-container *ngIf="is(breadcrumb, 'dropdown')">
-                <button [matMenuTriggerFor]="dropdownMenu" class="dropdown-breadcrumb" mat-button>
-                    <span>{{ breadcrumb.name$ | async }}</span>
-                    <mat-icon svgIcon="iqser:arrow-down"></mat-icon>
-                </button>
+                <iqser-chevron-button
+                    [label]="breadcrumb.name$ | async"
+                    [matMenuTriggerFor]="dropdownMenu"
+                    class="dropdown-breadcrumb"
+                ></iqser-chevron-button>
 
                 <mat-menu #dropdownMenu="matMenu" class="padding-bottom-8">
                     <a

apps/red-ui/src/assets/styles/red-material-theme.scss

@@ -43,7 +43,7 @@ $gn-next-primary: mat.define-palette($primary-palette, default, lighter, darker,
 $gn-next-secondary: mat.define-palette($secondary-palette, default, lighter, darker, text);
 $gn-next-warning: mat.define-palette($red-palette, default, lighter, darker, text);
 
-$gn-next-mat-theme: mat.define-light-theme(
+$light-theme: mat.define-light-theme(
     (
         color: (
             primary: $gn-next-primary,
@@ -53,7 +53,18 @@ $gn-next-mat-theme: mat.define-light-theme(
     )
 );
 
-@include mat.all-component-themes($gn-next-mat-theme);
+$dark-theme: mat.define-dark-theme(
+    (
+        color: (
+            primary: $gn-next-primary,
+            accent: $gn-next-secondary,
+            warn: $gn-next-warning,
+        ),
+    )
+);
+
+@include mat.core-theme($light-theme);
+@include mat.all-component-themes($light-theme);
 
 $custom-typography: mat.define-typography-config(
     $font-family: 'Inter, sans-serif',
@@ -64,20 +75,11 @@ $custom-typography: mat.define-typography-config(
 
 @include mat.all-component-typographies($custom-typography);
 
-.mat-flat-button {
-    min-width: unset !important;
+* {
+    --mdc-theme-text-primary-on-background: var(--iqser-text);
+    --mdc-theme-surface: var(--iqser-popup-background);
 }
 
-.mat-progress-spinner circle,
-.mat-spinner circle {
-    stroke: var(--iqser-primary);
-}
-
-.mat-progress-bar-fill::after {
-    background-color: var(--iqser-primary);
-}
-
-.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background,
-.mat-checkbox-checked.mat-primary .mat-checkbox-background {
-    background-color: var(--iqser-primary);
+.dark {
+    @include mat.all-component-colors($dark-theme);
 }

libs/common-ui

@@ -1 +1 @@
-Subproject commit efa522939167c34abf3200a042f8aa7dc5fe7c93
+Subproject commit 47080bcd8b18ac0a01417d5e5b5a433e8b11f581