Migrate progress bar

apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';

apps/client/src/app/pages/portfolio/allocations/allocations-page.scss

@@ -30,16 +30,12 @@
     }
   }
 
-  .mat-progress-bar {
+  .mat-mdc-progress-bar {
+    --mdc-linear-progress-track-height: 0.5rem;
     border-radius: 0.25rem;
-    height: 0.5rem;
 
     ::ng-deep {
-      .mat-progress-bar-background {
-        fill: rgb(var(--palette-background-unselected-chip));
-      }
-
-      .mat-progress-bar-buffer {
+      .mdc-linear-progress__buffer-bar {
         background-color: rgb(var(--palette-background-unselected-chip));
       }
     }
@@ -47,13 +43,9 @@
 }
 
 :host-context(.is-dark-theme) {
-  .mat-progress-bar {
+  .mat-mdc-progress-bar {
     ::ng-deep {
-      .mat-progress-bar-background {
-        fill: rgb(var(--palette-background-unselected-chip-dark));
-      }
-
-      .mat-progress-bar-buffer {
+      .mdc-linear-progress__buffer-bar {
         background-color: rgb(var(--palette-background-unselected-chip-dark));
       }
     }