From 7591b3ffc188ced68164d821a252215c889367cd Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 11 Aug 2024 15:19:36 +0200
Subject: [PATCH 01/18] Migrate from M2 to M3

---
 apps/client/src/app/app.component.ts |   2 +
 apps/client/src/styles/m3-theme.scss | 155 ++++++++++++++++
 apps/client/src/styles/theme.scss    | 255 +++++++++++++++++----------
 3 files changed, 319 insertions(+), 93 deletions(-)
 create mode 100644 apps/client/src/styles/m3-theme.scss

diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index e7d0960e2..a9cc587f7 100644
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@@ -366,7 +366,9 @@ export class AppComponent implements OnDestroy, OnInit {
 
     if (isDarkTheme) {
       this.document.body.classList.add('theme-dark');
+      this.document.body.classList.remove('theme-light');
     } else {
+      this.document.body.classList.add('theme-light');
       this.document.body.classList.remove('theme-dark');
     }
 
diff --git a/apps/client/src/styles/m3-theme.scss b/apps/client/src/styles/m3-theme.scss
new file mode 100644
index 000000000..69be1fd7c
--- /dev/null
+++ b/apps/client/src/styles/m3-theme.scss
@@ -0,0 +1,155 @@
+// This file was generated by running 'ng generate @angular/material:m3-theme'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #36cfcc, secondary: #3686cf
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #00201f,
+    20: #003736,
+    25: #004342,
+    30: #00504e,
+    35: #005d5b,
+    40: #006a68,
+    50: #008583,
+    60: #00a19f,
+    70: #11bebc,
+    80: #47dbd7,
+    90: #6bf7f4,
+    95: #affffc,
+    98: #e3fffd,
+    99: #f2fffe,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #001d36,
+    20: #003258,
+    25: #003d6a,
+    30: #00497c,
+    35: #00558f,
+    40: #0061a3,
+    50: #267bc3,
+    60: #4895df,
+    70: #66b0fb,
+    80: #9ecaff,
+    90: #d1e4ff,
+    95: #e9f1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  tertiary: (
+    0: #000000,
+    10: #031d35,
+    20: #1b324b,
+    25: #273d57,
+    30: #324863,
+    35: #3e546f,
+    40: #4a607b,
+    50: #637995,
+    60: #7c92b0,
+    70: #97adcc,
+    80: #b2c8e8,
+    90: #d2e4ff,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c1c,
+    20: #2d3131,
+    25: #383c3c,
+    30: #444747,
+    35: #4f5353,
+    40: #5b5f5e,
+    50: #747877,
+    60: #8e9191,
+    70: #a9acab,
+    80: #c4c7c6,
+    90: #e0e3e2,
+    95: #eff1f0,
+    98: #f7faf9,
+    99: #fafdfc,
+    100: #ffffff,
+    4: #0b0f0f,
+    6: #101414,
+    12: #1d2020,
+    17: #272b2a,
+    22: #323535,
+    24: #363a39,
+    87: #d8dada,
+    92: #e6e9e8,
+    94: #eceeed,
+    96: #f2f4f3
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #141d1d,
+    20: #293232,
+    25: #343d3d,
+    30: #3f4948,
+    35: #4a5454,
+    40: #566060,
+    50: #6f7978,
+    60: #889392,
+    70: #a3adac,
+    80: #bec9c7,
+    90: #dae5e3,
+    95: #e8f3f2,
+    98: #f1fbfa,
+    99: #f4fefd,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff
+  )
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error)
+);
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+$light-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: light,
+      primary: $_primary,
+      tertiary: $_tertiary
+    )
+  )
+);
+$dark-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: dark,
+      primary: $_primary,
+      tertiary: $_tertiary
+    )
+  )
+);
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index fe9fd44a5..b2903445b 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -1,112 +1,181 @@
 @use '@angular/material' as mat;
+@use 'sass:map';
 
 $dark-primary-text: rgba(black, 0.87);
 $light-primary-text: white;
 
-$mat-css-dark-theme-selector: '.theme-dark';
-
-$gf-primary: (
-  50: var(--gf-theme-primary-50),
-  100: var(--gf-theme-primary-100),
-  200: var(--gf-theme-primary-200),
-  300: var(--gf-theme-primary-300),
-  400: var(--gf-theme-primary-400),
-  500: var(--gf-theme-primary-500),
-  600: var(--gf-theme-primary-600),
-  700: var(--gf-theme-primary-700),
-  800: var(--gf-theme-primary-800),
-  900: var(--gf-theme-primary-900),
-  A100: var(--gf-theme-primary-A100),
-  A200: var(--gf-theme-primary-A200),
-  A400: var(--gf-theme-primary-A400),
-  A700: var(--gf-theme-primary-A700),
-  contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $light-primary-text,
-    400: $light-primary-text,
-    500: $light-primary-text,
-    600: $light-primary-text,
-    700: $light-primary-text,
-    800: $light-primary-text,
-    900: $light-primary-text,
-    A100: $dark-primary-text,
-    A200: $light-primary-text,
-    A400: $light-primary-text,
-    A700: $light-primary-text
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #00201f,
+    20: #003736,
+    25: #004342,
+    30: #00504e,
+    35: #005d5b,
+    40: #006a68,
+    50: #008583,
+    60: #00a19f,
+    70: #11bebc,
+    80: #47dbd7,
+    90: #6bf7f4,
+    95: #affffc,
+    98: #e3fffd,
+    99: #f2fffe,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #001d36,
+    20: #003258,
+    25: #003d6a,
+    30: #00497c,
+    35: #00558f,
+    40: #0061a3,
+    50: #267bc3,
+    60: #4895df,
+    70: #66b0fb,
+    80: #9ecaff,
+    90: #d1e4ff,
+    95: #e9f1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  tertiary: (
+    0: #000000,
+    10: #031d35,
+    20: #1b324b,
+    25: #273d57,
+    30: #324863,
+    35: #3e546f,
+    40: #4a607b,
+    50: #637995,
+    60: #7c92b0,
+    70: #97adcc,
+    80: #b2c8e8,
+    90: #d2e4ff,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c1c,
+    20: #2d3131,
+    25: #383c3c,
+    30: #444747,
+    35: #4f5353,
+    40: #5b5f5e,
+    50: #747877,
+    60: #8e9191,
+    70: #a9acab,
+    80: #c4c7c6,
+    90: #e0e3e2,
+    95: #eff1f0,
+    98: #f7faf9,
+    99: #fafdfc,
+    100: #ffffff,
+    4: #0b0f0f,
+    6: #101414,
+    12: #1d2020,
+    17: #272b2a,
+    22: #323535,
+    24: #363a39,
+    87: #d8dada,
+    92: #e6e9e8,
+    94: #eceeed,
+    96: #f2f4f3
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #141d1d,
+    20: #293232,
+    25: #343d3d,
+    30: #3f4948,
+    35: #4a5454,
+    40: #566060,
+    50: #6f7978,
+    60: #889392,
+    70: #a3adac,
+    80: #bec9c7,
+    90: #dae5e3,
+    95: #e8f3f2,
+    98: #f1fbfa,
+    99: #f4fefd,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff
   )
 );
 
-$gf-secondary: (
-  50: var(--gf-theme-secondary-50),
-  100: var(--gf-theme-secondary-100),
-  200: var(--gf-theme-secondary-200),
-  300: var(--gf-theme-secondary-300),
-  400: var(--gf-theme-secondary-400),
-  500: var(--gf-theme-secondary-500),
-  600: var(--gf-theme-secondary-600),
-  700: var(--gf-theme-secondary-700),
-  800: var(--gf-theme-secondary-800),
-  900: var(--gf-theme-secondary-900),
-  A100: var(--gf-theme-secondary-A100),
-  A200: var(--gf-theme-secondary-A200),
-  A400: var(--gf-theme-secondary-A400),
-  A700: var(--gf-theme-secondary-A700),
-  contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $light-primary-text,
-    400: $light-primary-text,
-    500: $light-primary-text,
-    600: $light-primary-text,
-    700: $light-primary-text,
-    800: $light-primary-text,
-    900: $light-primary-text,
-    A100: $dark-primary-text,
-    A200: $light-primary-text,
-    A400: $light-primary-text,
-    A700: $light-primary-text
-  )
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error)
 );
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
-$gf-typography: mat.m2-define-typography-config();
+@include mat.app-background();
+@include mat.button-density(0);
+@include mat.elevation-classes();
+@include mat.table-density(-1);
 
-// Create default theme
-$gf-theme-default: mat.m2-define-light-theme(
-  (
-    color: (
-      accent: mat.m2-define-palette($gf-secondary, 500, 900, A100),
-      primary: mat.m2-define-palette($gf-primary)
-    ),
-    density: -3,
-    typography: $gf-typography
-  )
-);
+// $gf-typography: mat.m2-define-typography-config();
 
-@include mat.all-component-themes($gf-theme-default);
+.theme-light {
+  $gf-theme-default: mat.define-theme(
+    (
+      color: (
+        primary: $_primary,
+        theme-type: light,
+        tertiary: $_tertiary
+      ),
+      density: (
+        scale: -3
+      ),
+      // typography: $gf-typography
+    )
+  );
 
-// Create dark theme
-$gf-theme-dark: mat.m2-define-dark-theme(
-  (
-    color: (
-      accent: mat.m2-define-palette($gf-secondary, 500, 900, A100),
-      primary: mat.m2-define-palette($gf-primary)
-    ),
-    density: -3,
-    typography: $gf-typography
-  )
-);
+  @include mat.all-component-themes($gf-theme-default);
+}
 
 .theme-dark {
-  @include mat.all-component-colors($gf-theme-dark);
-}
+  $gf-theme-dark: mat.define-theme(
+    (
+      color: (
+        primary: $_primary,
+        theme-type: dark,
+        tertiary: $_tertiary
+      ),
+      density: (
+        scale: -3
+      ),
+      // typography: $gf-typography
+    )
+  );
 
-@include mat.button-density(0);
-@include mat.elevation-classes();
-@include mat.app-background();
-@include mat.table-density(-1);
+  @include mat.all-component-themes($gf-theme-dark);
+}
 
 :root {
   --gf-theme-alpha-hover: 0.04;

From 121d6dada463eaa7828090c179adc4f878deec6a Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 11 Aug 2024 15:20:36 +0200
Subject: [PATCH 02/18] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 160ec0e47..00f75b73e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1680,6 +1680,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Refactored the dark theme CSS selector
+- Migrated from _Material Design_ 2 to _Material Design_ 3
 - Improved the language localization for German (`de`)
 - Upgraded `date-fns` from version `2.29.3` to `3.6.0`
 - Upgraded `zone.js` from version `0.14.7` to `0.14.10`

From 328b47537b546cca59814ae40fedcb0394dc81d9 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 26 Oct 2024 11:46:53 +0200
Subject: [PATCH 03/18] Improve header

---
 .../components/header/header.component.html   | 28 +++++++++----------
 .../components/header/header.component.scss   |  1 +
 apps/client/src/styles/theme.scss             |  4 +++
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index dc9a3af0f..b9d903aa3 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -17,7 +17,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold':
               currentRoute === internalRoutes.home.path ||
@@ -34,7 +34,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === internalRoutes.portfolio.path,
             'text-decoration-underline':
@@ -48,7 +48,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === internalRoutes.accounts.path,
             'text-decoration-underline':
@@ -63,7 +63,7 @@
           <a
             class="d-none d-sm-block"
             i18n
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold':
                 currentRoute === internalRoutes.adminControl.path,
@@ -79,7 +79,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeResources,
             'text-decoration-underline': currentRoute === routeResources
@@ -94,7 +94,7 @@
         <li class="list-inline-item">
           <a
             class="d-none d-sm-block"
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
               'text-decoration-underline': currentRoute === routePricing
@@ -114,7 +114,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeAbout,
             'text-decoration-underline': currentRoute === routeAbout
@@ -164,7 +164,7 @@
       <li class="list-inline-item">
         <button
           class="no-min-width px-1"
-          mat-flat-button
+          mat-button
           [matMenuTriggerFor]="accountMenu"
           (menuClosed)="onMenuClosed()"
           (menuOpened)="onMenuOpened()"
@@ -352,7 +352,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeFeatures,
             'text-decoration-underline': currentRoute === routeFeatures
@@ -365,7 +365,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeAbout,
             'text-decoration-underline': currentRoute === routeAbout
@@ -378,7 +378,7 @@
         <li class="list-inline-item">
           <a
             class="d-sm-block"
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
               'text-decoration-underline': currentRoute === routePricing
@@ -399,7 +399,7 @@
           <a
             class="d-none d-sm-block"
             i18n
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routeMarkets,
               'text-decoration-underline': currentRoute === routeMarkets
@@ -413,12 +413,12 @@
         <a
           class="d-none d-sm-block no-min-width p-1"
           href="https://github.com/ghostfolio/ghostfolio"
-          mat-flat-button
+          mat-button
           ><ion-icon name="logo-github"></ion-icon
         ></a>
       </li>
       <li class="list-inline-item">
-        <button class="d-sm-block" mat-flat-button (click)="openLoginDialog()">
+        <button class="d-sm-block" mat-button (click)="openLoginDialog()">
           <ng-container i18n>Sign in</ng-container>
         </button>
       </li>
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index 97f8cd354..9a8d85863 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@@ -24,6 +24,7 @@
     }
 
     .mdc-button {
+      color: var(--mdc-text-button-label-text-color);
       height: 100%;
 
       &:not(.mat-primary) {
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index b2903445b..9add22d6a 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -157,6 +157,8 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
   );
 
   @include mat.all-component-themes($gf-theme-default);
+
+  --mdc-outlined-card-container-color: unset;
 }
 
 .theme-dark {
@@ -175,6 +177,8 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
   );
 
   @include mat.all-component-themes($gf-theme-dark);
+
+  --mdc-outlined-card-container-color: unset;
 }
 
 :root {

From dda8263f9873eb65b7830e8ee72b8a8566348a93 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 2 Aug 2025 09:28:54 +0200
Subject: [PATCH 04/18] Update changelog

---
 CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00f75b73e..160ec0e47 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1680,7 +1680,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Refactored the dark theme CSS selector
-- Migrated from _Material Design_ 2 to _Material Design_ 3
 - Improved the language localization for German (`de`)
 - Upgraded `date-fns` from version `2.29.3` to `3.6.0`
 - Upgraded `zone.js` from version `0.14.7` to `0.14.10`

From d4ca8e9723a8222643e9be90d6d50a74a72ca5f2 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 3 Aug 2025 09:32:25 +0200
Subject: [PATCH 05/18] Feature/revert style of slide toggle components (#5311)

* Revert style
---
 apps/client/src/styles.scss | 33 ---------------------------------
 1 file changed, 33 deletions(-)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 6c9742f23..5f76ffd2e 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -267,30 +267,6 @@ body {
       background-color: rgba(var(--palette-foreground-base-dark), 0.02);
     }
 
-    .mat-mdc-slide-toggle {
-      .mdc-switch__track {
-        --mat-slide-toggle-selected-focus-track-color: rgba(
-          255,
-          255,
-          255,
-          0.12
-        );
-        --mat-slide-toggle-selected-hover-track-color: rgba(
-          255,
-          255,
-          255,
-          0.12
-        );
-        --mat-slide-toggle-selected-pressed-track-color: rgba(
-          255,
-          255,
-          255,
-          0.12
-        );
-        --mat-slide-toggle-selected-track-color: rgba(255, 255, 255, 0.12);
-      }
-    }
-
     .mdc-button {
       &.mat-accent,
       &.mat-primary {
@@ -512,15 +488,6 @@ ngx-skeleton-loader {
   }
 }
 
-.mat-mdc-slide-toggle {
-  .mdc-switch__track {
-    --mat-slide-toggle-selected-focus-track-color: rgba(0, 0, 0, 0.12);
-    --mat-slide-toggle-selected-hover-track-color: rgba(0, 0, 0, 0.12);
-    --mat-slide-toggle-selected-pressed-track-color: rgba(0, 0, 0, 0.12);
-    --mat-slide-toggle-selected-track-color: rgba(0, 0, 0, 0.12);
-  }
-}
-
 .mat-stepper-vertical,
 .mat-stepper-horizontal {
   background: transparent !important;

From 6b94d3b675618f2ad966dca83f5f192d0af714ad Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 3 Aug 2025 09:40:53 +0200
Subject: [PATCH 06/18] Feature/improve style of header navigation (#5310)

* Improve style
---
 .../components/header/header.component.html   | 34 +++++++++++--------
 .../components/header/header.component.scss   |  1 -
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index b9d903aa3..13b987f2f 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -2,7 +2,7 @@
   @if (user) {
     <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
       <a
-        class="align-items-center justify-content-start rounded-0"
+        class="align-items-center h-100 justify-content-start rounded-0"
         mat-button
         [ngClass]="{ 'w-100': hasTabs }"
         [routerLink]="['/']"
@@ -15,7 +15,7 @@
     <ul class="align-items-center d-flex list-inline m-0 px-2">
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -32,7 +32,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -46,7 +46,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -61,7 +61,7 @@
       @if (hasPermissionToAccessAdminControl) {
         <li class="list-inline-item">
           <a
-            class="d-none d-sm-block"
+            class="d-none d-sm-block rounded"
             i18n
             mat-button
             [ngClass]="{
@@ -77,7 +77,7 @@
       }
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -93,7 +93,7 @@
       ) {
         <li class="list-inline-item">
           <a
-            class="d-none d-sm-block"
+            class="d-none d-sm-block rounded"
             mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
@@ -112,7 +112,7 @@
       }
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -334,7 +334,7 @@
   @if (user === null) {
     <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
       <a
-        class="align-items-center justify-content-start rounded-0"
+        class="align-items-center h-100 justify-content-start rounded-0"
         mat-button
         [ngClass]="{ 'w-100': hasTabs }"
         [routerLink]="['/']"
@@ -350,7 +350,7 @@
     <ul class="align-items-center d-flex list-inline m-0 px-2">
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -363,7 +363,7 @@
       </li>
       <li class="list-inline-item">
         <a
-          class="d-none d-sm-block"
+          class="d-none d-sm-block rounded"
           i18n
           mat-button
           [ngClass]="{
@@ -377,7 +377,7 @@
       @if (hasPermissionForSubscription) {
         <li class="list-inline-item">
           <a
-            class="d-sm-block"
+            class="d-sm-block rounded"
             mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
@@ -397,7 +397,7 @@
       @if (hasPermissionToAccessFearAndGreedIndex) {
         <li class="list-inline-item">
           <a
-            class="d-none d-sm-block"
+            class="d-none d-sm-block rounded"
             i18n
             mat-button
             [ngClass]="{
@@ -418,14 +418,18 @@
         ></a>
       </li>
       <li class="list-inline-item">
-        <button class="d-sm-block" mat-button (click)="openLoginDialog()">
+        <button
+          class="d-sm-block rounded"
+          mat-button
+          (click)="openLoginDialog()"
+        >
           <ng-container i18n>Sign in</ng-container>
         </button>
       </li>
       @if (currentRoute !== 'register' && hasPermissionToCreateUser) {
         <li class="list-inline-item ml-1">
           <a
-            class="d-none d-sm-block"
+            class="d-none d-sm-block px-3 rounded"
             color="primary"
             mat-flat-button
             [routerLink]="routerLinkRegister"
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index 9a8d85863..28927abec 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@@ -25,7 +25,6 @@
 
     .mdc-button {
       color: var(--mdc-text-button-label-text-color);
-      height: 100%;
 
       &:not(.mat-primary) {
         background-color: transparent;

From 49beba9d977d8234b60b0c48d3e4149f420ecb6c Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 4 Aug 2025 19:49:49 +0200
Subject: [PATCH 07/18] Feature/restore border color in tables (#5315)

* Restore border color
---
 apps/client/src/styles/theme.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 9add22d6a..385e102dd 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -158,6 +158,12 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
   @include mat.all-component-themes($gf-theme-default);
 
+  @include mat.table-overrides(
+    (
+      row-item-outline-color: rgba(var(--dark-dividers))
+    )
+  );
+
   --mdc-outlined-card-container-color: unset;
 }
 
@@ -178,6 +184,12 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
   @include mat.all-component-themes($gf-theme-dark);
 
+  @include mat.table-overrides(
+    (
+      row-item-outline-color: rgba(var(--light-dividers))
+    )
+  );
+
   --mdc-outlined-card-container-color: unset;
 }
 

From 23ad76959d6de3f518260a0f298fd6e99990e4df Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 4 Aug 2025 21:21:16 +0200
Subject: [PATCH 08/18] Update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 160ec0e47..565b539ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Next
+
+### Changed
+
+- Migrated from _Material Design_ 2 to _Material Design_ 3
+
 ## Unreleased
 
 ### Changed

From 96a9a680f90f38ec4aa86e2c40a9c3dcf77e2c25 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 5 Aug 2025 19:54:26 +0200
Subject: [PATCH 09/18] Feature/restore styles of card (#5319)

* Restore styles of card
---
 apps/client/src/styles.scss       |  7 -------
 apps/client/src/styles/theme.scss | 16 ++++++++++++++++
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 5f76ffd2e..cdb35d54b 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -251,11 +251,6 @@ body {
       }
     }
 
-    .mat-mdc-card {
-      --mat-card-elevated-container-color: var(--dark-background);
-      --mat-card-outlined-container-color: var(--dark-background);
-    }
-
     .mat-mdc-fab {
       &.mat-primary {
         --mat-fab-icon-color: rgba(var(--dark-primary-text));
@@ -414,8 +409,6 @@ ngx-skeleton-loader {
 
 .mat-mdc-card {
   .mat-mdc-card-title {
-    --mat-card-title-text-line-height: 1.2;
-
     margin-bottom: 0.5rem;
   }
 }
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 385e102dd..1e284e0c8 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -158,6 +158,14 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
   @include mat.all-component-themes($gf-theme-default);
 
+  @include mat.card-overrides(
+    (
+      outlined-container-color: var(--light-background),
+      outlined-outline-color: rgba(var(--dark-dividers)),
+      title-text-line-height: 1.2
+    )
+  );
+
   @include mat.table-overrides(
     (
       row-item-outline-color: rgba(var(--dark-dividers))
@@ -184,6 +192,14 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
   @include mat.all-component-themes($gf-theme-dark);
 
+  @include mat.card-overrides(
+    (
+      outlined-container-color: var(--dark-background),
+      outlined-outline-color: rgba(var(--light-dividers)),
+      title-text-line-height: 1.2
+    )
+  );
+
   @include mat.table-overrides(
     (
       row-item-outline-color: rgba(var(--light-dividers))

From a4fc26263b7956e06ab88a502be934fc09c44502 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Wed, 6 Aug 2025 20:11:41 +0700
Subject: [PATCH 10/18] Feature/restore background color of Floating Action
 Buttons (FAB) to primary color (#5322)

* Restore background color of Floating Action Buttons (FAB) to primary color
---
 apps/client/src/styles.scss       | 16 ----------------
 apps/client/src/styles/theme.scss | 12 ++++++++++--
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index cdb35d54b..39acbb69e 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -251,13 +251,6 @@ body {
       }
     }
 
-    .mat-mdc-fab {
-      &.mat-primary {
-        --mat-fab-icon-color: rgba(var(--dark-primary-text));
-        --mat-mdc-fab-color: rgba(var(--dark-primary-text));
-      }
-    }
-
     .mat-mdc-paginator {
       background-color: rgba(var(--palette-foreground-base-dark), 0.02);
     }
@@ -432,15 +425,6 @@ ngx-skeleton-loader {
   }
 }
 
-.mat-mdc-fab {
-  color: var(--mat-mdc-fab-color, inherit) !important;
-
-  &.mat-primary {
-    --mat-fab-icon-color: rgba(var(--light-primary-text));
-    --mat-mdc-fab-color: rgba(var(--light-primary-text));
-  }
-}
-
 .mat-mdc-form-field {
   &.without-hint {
     .mat-mdc-form-field-subscript-wrapper {
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 1e284e0c8..460a43d19 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -165,7 +165,11 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
       title-text-line-height: 1.2
     )
   );
-
+  @include mat.fab-overrides(
+    (
+      container-color: var(--gf-theme-primary-500)
+    )
+  );
   @include mat.table-overrides(
     (
       row-item-outline-color: rgba(var(--dark-dividers))
@@ -199,7 +203,11 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
       title-text-line-height: 1.2
     )
   );
-
+  @include mat.fab-overrides(
+    (
+      container-color: var(--gf-theme-primary-500)
+    )
+  );
   @include mat.table-overrides(
     (
       row-item-outline-color: rgba(var(--light-dividers))

From b8646c6418c5283c9de15b6a3234345fed50e5e2 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Fri, 8 Aug 2025 01:03:06 +0700
Subject: [PATCH 11/18] Feature/restore active state (background color) of
 sidebar navigation (#5327)

* Restore active state of sidebar navigation
---
 apps/client/src/styles.scss       | 19 ----------------
 apps/client/src/styles/theme.scss | 37 ++++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 39acbb69e..c61734c80 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -264,10 +264,6 @@ body {
 
     .page {
       &.has-tabs {
-        .mat-mdc-tab-nav-bar {
-          --mat-tab-inactive-label-text-color: rgba(var(--light-primary-text));
-        }
-
         @media (min-width: 576px) {
           .mat-mdc-tab-header {
             background-color: rgba(var(--palette-foreground-base-dark), 0.02);
@@ -522,23 +518,10 @@ ngx-skeleton-loader {
       }
     }
 
-    .mat-mdc-tab-nav-bar {
-      --mat-tab-active-focus-indicator-color: transparent;
-      --mat-tab-active-hover-indicator-color: transparent;
-      --mat-tab-inactive-label-text-color: rgba(var(--dark-primary-text));
-      --mat-tab-active-indicator-color: transparent;
-    }
-
     .mat-mdc-tab-nav-panel {
       padding: 2rem 0;
     }
 
-    @media (max-width: 575.98px) {
-      .mat-mdc-tab-link {
-        --mat-tab-container-height: 3rem;
-      }
-    }
-
     @media (min-width: 576px) {
       flex-direction: row-reverse;
 
@@ -546,8 +529,6 @@ ngx-skeleton-loader {
         background-color: rgba(var(--palette-foreground-base), 0.02);
         padding: 2rem 0;
         width: 14rem;
-        --mat-tab-label-text-tracking: normal;
-        --mat-tab-container-height: 2rem;
 
         .mat-mdc-tab-links {
           flex-direction: column;
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 460a43d19..1d69f196a 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -165,18 +165,11 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
       title-text-line-height: 1.2
     )
   );
-  @include mat.fab-overrides(
-    (
-      container-color: var(--gf-theme-primary-500)
-    )
-  );
   @include mat.table-overrides(
     (
       row-item-outline-color: rgba(var(--dark-dividers))
     )
   );
-
-  --mdc-outlined-card-container-color: unset;
 }
 
 .theme-dark {
@@ -203,18 +196,40 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
       title-text-line-height: 1.2
     )
   );
+  @include mat.table-overrides(
+    (
+      row-item-outline-color: rgba(var(--light-dividers))
+    )
+  );
+}
+
+.theme-dark,
+.theme-light {
+  @media (max-width: 575.98px) {
+    @include mat.tabs-overrides(
+      (
+        container-height: 3rem
+      )
+    );
+  }
+
   @include mat.fab-overrides(
     (
       container-color: var(--gf-theme-primary-500)
     )
   );
-  @include mat.table-overrides(
+  @include mat.tabs-overrides(
     (
-      row-item-outline-color: rgba(var(--light-dividers))
+      active-focus-label-text-color: var(--gf-theme-primary-500),
+      active-hover-label-text-color: var(--gf-theme-primary-500),
+      active-indicator-height: 0,
+      active-label-text-color: var(--gf-theme-primary-500),
+      active-ripple-color: var(--gf-theme-primary-500),
+      container-height: 2rem,
+      inactive-ripple-color: var(--gf-theme-primary-500),
+      label-text-tracking: normal
     )
   );
-
-  --mdc-outlined-card-container-color: unset;
 }
 
 :root {

From 9e8abc7a2a47e4a44c0de629e9ef1afbeca65147 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 7 Aug 2025 20:05:56 +0200
Subject: [PATCH 12/18] Feature/remove border of sidebar navigation (#5325)

* Remove border
---
 apps/client/src/styles.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index c61734c80..187bff69c 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 @import './styles/bootstrap';
 @import './styles/table';
 
@@ -525,6 +527,12 @@ ngx-skeleton-loader {
     @media (min-width: 576px) {
       flex-direction: row-reverse;
 
+      @include mat.tabs-overrides(
+        (
+          divider-height: 0
+        )
+      );
+
       .mat-mdc-tab-header {
         background-color: rgba(var(--palette-foreground-base), 0.02);
         padding: 2rem 0;

From 9ceb2c4c410b21972a48998b91970b35c42a638f Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Sat, 9 Aug 2025 19:44:51 +0700
Subject: [PATCH 13/18] Feature/decrease border radius and margin of dialogs on
 mobile (#5341)

* Decrease border radius and margin of dialogs on mobile
---
 apps/client/src/styles/theme.scss | 44 ++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 1d69f196a..22d495704 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -206,30 +206,62 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 .theme-dark,
 .theme-light {
   @media (max-width: 575.98px) {
-    @include mat.tabs-overrides(
+    @include mat.dialog-overrides(
       (
-        container-height: 3rem
+        container-shape: 4px
       )
     );
+
+    .page.has-tabs {
+      @include mat.tabs-overrides(
+        (
+          container-height: 3rem
+        )
+      );
+    }
+  }
+
+  @media (min-width: 576px) {
+    .page.has-tabs {
+      @include mat.tabs-overrides(
+        (
+          container-height: 2rem
+        )
+      );
+    }
   }
 
+  @include mat.dialog-overrides(
+    (
+      container-max-width: 80vw,
+      container-small-max-width: 96vw
+    )
+  );
+
   @include mat.fab-overrides(
     (
       container-color: var(--gf-theme-primary-500)
     )
   );
+
   @include mat.tabs-overrides(
     (
       active-focus-label-text-color: var(--gf-theme-primary-500),
       active-hover-label-text-color: var(--gf-theme-primary-500),
-      active-indicator-height: 0,
       active-label-text-color: var(--gf-theme-primary-500),
       active-ripple-color: var(--gf-theme-primary-500),
-      container-height: 2rem,
-      inactive-ripple-color: var(--gf-theme-primary-500),
-      label-text-tracking: normal
+      inactive-ripple-color: var(--gf-theme-primary-500)
     )
   );
+
+  .page.has-tabs {
+    @include mat.tabs-overrides(
+      (
+        active-indicator-height: 0,
+        label-text-tracking: normal
+      )
+    );
+  }
 }
 
 :root {

From c168808de9f3ae606c88ec2bcb5bd993b9c177ce Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Sun, 17 Aug 2025 15:15:51 +0700
Subject: [PATCH 14/18] Task/restore button states in confirmation dialog
 (#5374)

* Restore button states in confirmation dialog
---
 apps/client/src/styles/theme.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 22d495704..9256b41d9 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -254,6 +254,23 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     )
   );
 
+  .mat-accent {
+    @include mat.button-overrides(
+      (
+        filled-container-color: var(--gf-theme-secondary-500)
+      )
+    );
+  }
+
+  .mat-warn {
+    @include mat.button-overrides(
+      (
+        filled-container-color: #f44336,
+        filled-label-text-color: white
+      )
+    );
+  }
+
   .page.has-tabs {
     @include mat.tabs-overrides(
       (

From 6769777677efcfaa4032c689fd4d7136c750ddbc Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 30 Aug 2025 10:01:36 +0200
Subject: [PATCH 15/18] Feature/restore background color in dialogs and menus
 (#5431)

* Restore background color in dialogs and menus
---
 apps/client/src/styles/theme.scss | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 9256b41d9..62da5f9c6 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -165,6 +165,25 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
       title-text-line-height: 1.2
     )
   );
+
+  @include mat.dialog-overrides(
+    (
+      container-color: var(--light-background)
+    )
+  );
+
+  @include mat.menu-overrides(
+    (
+      container-color: var(--light-background)
+    )
+  );
+
+  @include mat.select-overrides(
+    (
+      panel-background-color: var(--light-background)
+    )
+  );
+
   @include mat.table-overrides(
     (
       row-item-outline-color: rgba(var(--dark-dividers))
@@ -196,6 +215,7 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
       title-text-line-height: 1.2
     )
   );
+
   @include mat.table-overrides(
     (
       row-item-outline-color: rgba(var(--light-dividers))

From 9a46a60eae1e44df5b61f47f17042b8a70b3f49e Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 30 Aug 2025 12:48:06 +0200
Subject: [PATCH 16/18] Feature/restore colors of buttons (#5433)

* Restore colors of buttons
---
 apps/client/src/styles/theme.scss | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 62da5f9c6..40b83919f 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -158,6 +158,13 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
   @include mat.all-component-themes($gf-theme-default);
 
+  @include mat.button-overrides(
+    (
+      outlined-label-text-color: var(--dark-primary-text),
+      text-label-text-color: var(--dark-primary-text)
+    )
+  );
+
   @include mat.card-overrides(
     (
       outlined-container-color: var(--light-background),
@@ -208,6 +215,13 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
   @include mat.all-component-themes($gf-theme-dark);
 
+  @include mat.button-overrides(
+    (
+      outlined-label-text-color: var(--light-primary-text),
+      text-label-text-color: var(--light-primary-text)
+    )
+  );
+
   @include mat.card-overrides(
     (
       outlined-container-color: var(--dark-background),
@@ -251,6 +265,12 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     }
   }
 
+  @include mat.button-overrides(
+    (
+      filled-container-color: var(--gf-theme-primary-500)
+    )
+  );
+
   @include mat.dialog-overrides(
     (
       container-max-width: 80vw,
@@ -277,7 +297,8 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
   .mat-accent {
     @include mat.button-overrides(
       (
-        filled-container-color: var(--gf-theme-secondary-500)
+        filled-container-color: var(--gf-theme-secondary-500),
+        outlined-label-text-color: var(--gf-theme-secondary-500)
       )
     );
   }
@@ -286,7 +307,8 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     @include mat.button-overrides(
       (
         filled-container-color: #f44336,
-        filled-label-text-color: white
+        filled-label-text-color: white,
+        outlined-label-text-color: #f44336
       )
     );
   }

From af99b287da045bdda3e9ac9691424041cd1d3109 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 30 Aug 2025 14:57:42 +0200
Subject: [PATCH 17/18] Feature/restore colors in autocomplete and datepicker
 components (#5435)

---
 apps/client/src/styles/theme.scss | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 40b83919f..0cae8fd22 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -158,6 +158,12 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
   @include mat.all-component-themes($gf-theme-default);
 
+  @include mat.autocomplete-overrides(
+    (
+      background-color: var(--light-background)
+    )
+  );
+
   @include mat.button-overrides(
     (
       outlined-label-text-color: var(--dark-primary-text),
@@ -173,6 +179,12 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     )
   );
 
+  @include mat.datepicker-overrides(
+    (
+      calendar-container-background-color: var(--light-background)
+    )
+  );
+
   @include mat.dialog-overrides(
     (
       container-color: var(--light-background)
@@ -271,6 +283,18 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     )
   );
 
+  @include mat.datepicker-overrides(
+    (
+      calendar-container-elevation-shadow: var(
+          --mat-select-container-elevation-shadow
+        ),
+      calendar-date-selected-state-background-color: var(--gf-theme-primary-500),
+      calendar-date-today-selected-state-outline-color: var(
+          --gf-theme-primary-500
+        )
+    )
+  );
+
   @include mat.dialog-overrides(
     (
       container-max-width: 80vw,

From 2b9b368d976f2862762f49a138c81c2933ae4f3d Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 31 Aug 2025 09:27:49 +0200
Subject: [PATCH 18/18] Feature/restore colors of various components (#5442)

Restore colors of various components

* checkbox
* form field
* slider
* stepper
---
 apps/client/src/styles/theme.scss | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 0cae8fd22..f4105d15f 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -283,6 +283,12 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     )
   );
 
+  @include mat.checkbox-overrides(
+    (
+      selected-icon-color: var(--gf-theme-primary-500)
+    )
+  );
+
   @include mat.datepicker-overrides(
     (
       calendar-container-elevation-shadow: var(
@@ -308,6 +314,27 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
     )
   );
 
+  @include mat.form-field-overrides(
+    (
+      outlined-focus-label-text-color: var(--gf-theme-primary-500),
+      outlined-focus-outline-color: var(--gf-theme-primary-500)
+    )
+  );
+
+  @include mat.slider-overrides(
+    (
+      active-track-color: var(--gf-theme-primary-500),
+      focus-handle-color: var(--gf-theme-primary-500),
+      handle-color: var(--gf-theme-primary-500)
+    )
+  );
+
+  @include mat.stepper-overrides(
+    (
+      header-selected-state-icon-background-color: var(--gf-theme-primary-500)
+    )
+  );
+
   @include mat.tabs-overrides(
     (
       active-focus-label-text-color: var(--gf-theme-primary-500),