From 5609aaa98c50e956bbe6676bf15f58d73a983d42 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 3 Jul 2026 20:04:37 +0200
Subject: [PATCH] Task/harmonize date picker styling (#7194)

* Harmonize date picker styling

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../create-or-update-activity-dialog.html     |  2 +-
 .../account-balances.component.html           |  2 +-
 .../fire-calculator.component.html            | 19 +++++++++++++------
 .../fire-calculator.component.ts              |  6 ++++++
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c14452d4b..807180092 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Harmonized the date picker styling across various components
 - Updated the _Privacy Policy_
 - Updated the _Terms of Service_
 - Improved the parsing of integer query parameters (`skip` and `take`) in the `GET api/v1/activities` endpoint
diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
index 20c50d0fe..8f2dfebfd 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
@@ -167,7 +167,7 @@
             name="calendar-clear-outline"
           />
         </mat-datepicker-toggle>
-        <mat-datepicker #date disabled="false" />
+        <mat-datepicker #date />
       </mat-form-field>
     </div>
     <div
diff --git a/libs/ui/src/lib/account-balances/account-balances.component.html b/libs/ui/src/lib/account-balances/account-balances.component.html
index ee1450435..780653c67 100644
--- a/libs/ui/src/lib/account-balances/account-balances.component.html
+++ b/libs/ui/src/lib/account-balances/account-balances.component.html
@@ -22,7 +22,7 @@
             [matDatepicker]="date"
             [max]="maxDate"
           />
-          <mat-datepicker-toggle matSuffix [for]="date">
+          <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
             <ion-icon
               class="text-muted"
               matDatepickerToggleIcon
diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
index 125c69a12..df78cadca 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
@@ -39,19 +39,26 @@
             class="d-none"
             formControlName="retirementDate"
             matInput
-            [matDatepicker]="datepicker"
+            [matDatepicker]="date"
             [min]="minDate"
           />
           <mat-datepicker-toggle
-            matIconSuffix
+            class="mr-2"
+            matSuffix
             [disabled]="hasPermissionToUpdateUserSettings !== true"
-            [for]="datepicker"
-          />
+            [for]="date"
+          >
+            <ion-icon
+              class="text-muted"
+              matDatepickerToggleIcon
+              name="calendar-clear-outline"
+            />
+          </mat-datepicker-toggle>
           <mat-datepicker
-            #datepicker
+            #date
             startView="multi-year"
             [disabled]="hasPermissionToUpdateUserSettings !== true"
-            (monthSelected)="setMonthAndYear($event, datepicker)"
+            (monthSelected)="setMonthAndYear($event, date)"
           />
         </mat-form-field>
 
diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
index c8e281609..fa998778d 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
+++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
@@ -34,6 +34,7 @@ import {
 } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { IonIcon } from '@ionic/angular/standalone';
 import {
   BarController,
   BarElement,
@@ -56,6 +57,8 @@ import {
   startOfMonth,
   sub
 } from 'date-fns';
+import { addIcons } from 'ionicons';
+import { calendarClearOutline } from 'ionicons/icons';
 import { isNumber } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { debounceTime } from 'rxjs';
@@ -67,6 +70,7 @@ import { FireCalculatorService } from './fire-calculator.service';
   imports: [
     CommonModule,
     FormsModule,
+    IonIcon,
     MatButtonModule,
     MatDatepickerModule,
     MatFormFieldModule,
@@ -136,6 +140,8 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
       Tooltip
     );
 
+    addIcons({ calendarClearOutline });
+
     this.calculatorForm.valueChanges
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {