Task/harmonize date picker styling (#7194)

* Harmonize date picker styling

* Update changelog

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

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

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

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>
 

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(() => {