Feature/migrate various components to angular material 15 (#1836)

* Migrate components to Angular Material 15

* Update changelog

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).
 
+## Unreleased
+
+### Changed
+
+- Migrated the style of various components to `@angular/material` `15` (mdc)
+
 ## 1.251.0 - 2023-04-07
 
 ### Changed

apps/client/src/app/app.module.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/material/core';
 import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
-import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

apps/client/src/app/components/access-table/access-table.component.ts

@@ -7,7 +7,7 @@ import {
   OnInit,
   Output
 } from '@angular/core';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatTableDataSource } from '@angular/material/table';
 import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
 import { Access } from '@ghostfolio/common/interfaces';
 

apps/client/src/app/components/access-table/access-table.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
 
 import { AccessTableComponent } from './access-table.component';
 

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';

apps/client/src/app/components/accounts-table/accounts-table.component.scss

@@ -3,17 +3,7 @@
 :host {
   display: block;
 
-  .mat-table {
-    td {
-      &.mat-footer-cell {
-        border-top: 1px solid
-          rgba(
-            var(--palette-foreground-divider),
-            var(--palette-foreground-divider-alpha)
-          );
-      }
-    }
-
+  .mat-mdc-table {
     th {
       ::ng-deep {
         .mat-sort-header-container {
@@ -23,16 +13,3 @@
     }
   }
 }
-
-:host-context(.is-dark-theme) {
-  .mat-table {
-    td {
-      &.mat-footer-cell {
-        border-top-color: rgba(
-          var(--palette-foreground-divider-dark),
-          var(--palette-foreground-divider-dark-alpha)
-        );
-      }
-    }
-  }
-}

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -9,7 +9,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
 import { Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';

apps/client/src/app/components/accounts-table/accounts-table.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
 import { MatSortModule } from '@angular/material/sort';
 import { RouterModule } from '@angular/router';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';

apps/client/src/app/components/admin-jobs/admin-jobs.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 
 import { AdminJobsComponent } from './admin-jobs.component';

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -7,7 +7,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
+import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AdminService } from '@ghostfolio/client/services/admin.service';

apps/client/src/app/components/admin-market-data/admin-market-data.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTableModule } from '@angular/material/table';
 import { MatSortModule } from '@angular/material/sort';
 import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts

@@ -2,10 +2,10 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatMenuModule } from '@angular/material/menu';
 import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -51,7 +51,7 @@
                   <td>
                     <button
                       *ngIf="customCurrencies.includes(exchangeRate.label2)"
-                      class="mini-icon mx-1 no-min-width px-2"
+                      class="h-100 mx-1 no-min-width px-2"
                       mat-button
                       (click)="onDeleteCurrency(exchangeRate.label2)"
                     >
@@ -124,7 +124,7 @@
               <div *ngIf="info?.systemMessage">
                 <span>{{ info.systemMessage }}</span>
                 <button
-                  class="mini-icon mx-1 no-min-width px-2"
+                  class="h-100 mx-1 no-min-width px-2"
                   mat-button
                   (click)="onDeleteSystemMessage()"
                 >
@@ -159,7 +159,7 @@
                   </td>
                   <td>
                     <button
-                      class="mini-icon mx-1 no-min-width px-2"
+                      class="h-100 mx-1 no-min-width px-2"
                       mat-button
                       (click)="onDeleteCoupon(coupon.code)"
                     >

apps/client/src/app/components/admin-overview/admin-overview.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';

apps/client/src/app/components/admin-overview/admin-overview.scss

@@ -3,24 +3,6 @@
 :host {
   display: block;
 
-  .mat-button {
-    &.mini-icon {
-      line-height: 1.5;
-    }
-  }
-
-  .mat-flat-button {
-    ::ng-deep {
-      .mat-button-wrapper {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
-      }
-    }
-  }
-
   .subscription {
     .mat-form-field {
       max-width: 100%;

apps/client/src/app/components/admin-users/admin-users.html

@@ -4,44 +4,47 @@
       <div class="users">
         <table class="gf-table">
           <thead>
-            <tr class="mat-header-row">
-              <th class="mat-header-cell px-1 py-2 text-right">#</th>
-              <th class="mat-header-cell px-1 py-2" i18n>User</th>
+            <tr class="mat-mdc-header-row">
+              <th class="mat-mdc-header-cell px-1 py-2 text-right">#</th>
+              <th class="mat-mdc-header-cell px-1 py-2" i18n>User</th>
               <th
                 *ngIf="hasPermissionForSubscription"
-                class="mat-header-cell px-1 py-2"
+                class="mat-mdc-header-cell px-1 py-2"
               >
                 <ng-container i18n>Country</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2">
+              <th class="mat-mdc-header-cell px-1 py-2">
                 <ng-container i18n>Registration</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2 text-right">
+              <th class="mat-mdc-header-cell px-1 py-2 text-right">
                 <ng-container i18n>Accounts</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2 text-right">
+              <th class="mat-mdc-header-cell px-1 py-2 text-right">
                 <ng-container i18n>Activities</ng-container>
               </th>
               <th
                 *ngIf="hasPermissionForSubscription"
-                class="mat-header-cell px-1 py-2 text-right"
+                class="mat-mdc-header-cell px-1 py-2 text-right"
               >
                 <ng-container i18n>Engagement per Day</ng-container>
               </th>
               <th
                 *ngIf="hasPermissionForSubscription"
-                class="mat-header-cell px-1 py-2"
+                class="mat-mdc-header-cell px-1 py-2"
                 i18n
               >
                 Last Request
               </th>
-              <th class="mat-header-cell px-1 py-2"></th>
+              <th class="mat-mdc-header-cell px-1 py-2"></th>
             </tr>
           </thead>
           <tbody>
-            <tr *ngFor="let userItem of users; let i = index" class="mat-row">
-              <td class="mat-cell px-1 py-2 text-right">{{ i + 1 }}</td>
-              <td class="mat-cell px-1 py-2">
+            <tr
+              *ngFor="let userItem of users; let i = index"
+              class="mat-mdc-row"
+            >
+              <td class="mat-mdc-cell px-1 py-2 text-right">{{ i + 1 }}</td>
+              <td class="mat-mdc-cell px-1 py-2">
                 <div class="d-flex align-items-center">
                   <span class="d-none d-sm-inline-block text-monospace"
                     >{{ userItem.id }}</span
@@ -59,23 +62,23 @@
               </td>
               <td
                 *ngIf="hasPermissionForSubscription"
-                class="mat-cell px-1 py-2"
+                class="mat-mdc-cell px-1 py-2"
               >
                 <span class="h5" [title]="userItem.country"
                   >{{ getEmojiFlag(userItem.country) }}</span
                 >
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-mdc-cell px-1 py-2">
                 {{ formatDistanceToNow(userItem.createdAt) }}
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
+              <td class="mat-mdc-cell px-1 py-2 text-right">
                 <gf-value
                   class="d-inline-block justify-content-end"
                   [locale]="user?.settings?.locale"
                   [value]="userItem.accountCount"
                 ></gf-value>
               </td>
-              <td class="mat-cell px-1 py-2 text-right">
+              <td class="mat-mdc-cell px-1 py-2 text-right">
                 <gf-value
                   class="d-inline-block justify-content-end"
                   [locale]="user?.settings?.locale"
@@ -84,7 +87,7 @@
               </td>
               <td
                 *ngIf="hasPermissionForSubscription"
-                class="mat-cell px-1 py-2 text-right"
+                class="mat-mdc-cell px-1 py-2 text-right"
               >
                 <gf-value
                   class="d-inline-block justify-content-end"
@@ -95,11 +98,11 @@
               </td>
               <td
                 *ngIf="hasPermissionForSubscription"
-                class="mat-cell px-1 py-2"
+                class="mat-mdc-cell px-1 py-2"
               >
                 {{ formatDistanceToNow(userItem.lastActivity) }}
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-mdc-cell px-1 py-2">
                 <button
                   class="mx-1 no-min-width px-2"
                   mat-button

apps/client/src/app/components/admin-users/admin-users.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 

apps/client/src/app/components/admin-users/admin-users.scss

@@ -9,8 +9,8 @@
     table {
       min-width: 100%;
 
-      .mat-row,
-      .mat-header-row {
+      .mat-mdc-row,
+      .mat-mdc-header-row {
         width: 100%;
       }
     }

apps/client/src/app/components/dialog-footer/dialog-footer.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 
 import { DialogFooterComponent } from './dialog-footer.component';
 

apps/client/src/app/components/dialog-header/dialog-header.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 
 import { DialogHeaderComponent } from './dialog-header.component';
 

apps/client/src/app/components/home-holdings/home-holdings.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { RouterModule } from '@angular/router';
 import { GfPositionDetailDialogModule } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.module';

apps/client/src/app/components/home-summary/home-summary.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import {
-  MatLegacySnackBar as MatSnackBar,
-  MatLegacySnackBarRef as MatSnackBarRef,
-  LegacyTextOnlySnackBar as TextOnlySnackBar
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -45,7 +45,7 @@
 </div>
 <div mat-dialog-actions>
   <div class="flex-grow-1">
-    <mat-checkbox i18n (change)="onChangeStaySignedIn($event)"
+    <mat-checkbox color="primary" i18n (change)="onChangeStaySignedIn($event)"
       >Stay signed in</mat-checkbox
     >
   </div>

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts

@@ -2,7 +2,7 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';

apps/client/src/app/components/positions/positions.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { GfPositionModule } from '../position/position.module';

apps/client/src/app/components/rules/rules.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { RouterModule } from '@angular/router';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';

apps/client/src/app/core/http-response.interceptor.ts

@@ -8,10 +8,10 @@ import {
 } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import {
-  MatLegacySnackBar as MatSnackBar,
-  MatLegacySnackBarRef as MatSnackBarRef,
-  LegacyTextOnlySnackBar as TextOnlySnackBar
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';

apps/client/src/app/pages/account/account-page.component.ts

@@ -11,10 +11,10 @@ import {
   MatLegacySlideToggleChange as MatSlideToggleChange
 } from '@angular/material/legacy-slide-toggle';
 import {
-  MatLegacySnackBar as MatSnackBar,
-  MatLegacySnackBarRef as MatSnackBarRef,
-  LegacyTextOnlySnackBar as TextOnlySnackBar
-} from '@angular/material/legacy-snack-bar';
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CreateAccessDto } from '@ghostfolio/api/app/access/create-access.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';

apps/client/src/app/pages/account/account-page.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';

apps/client/src/app/pages/account/account-page.scss

@@ -4,15 +4,6 @@
 
   gf-access-table {
     overflow-x: auto;
-
-    table {
-      min-width: 100%;
-
-      .mat-row,
-      .mat-header-row {
-        width: 100%;
-      }
-    }
   }
 
   .fab-container {

apps/client/src/app/pages/account/create-or-update-access-dialog/create-or-update-access-dialog.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';

apps/client/src/app/pages/features/features-page.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 

apps/client/src/app/pages/landing/landing-page.html

@@ -30,31 +30,17 @@
 <div class="container">
   <div class="button-container mb-5 row">
     <div class="align-items-center col d-flex justify-content-center">
-      <div class="text-center">
       <ng-container *ngIf="hasPermissionToCreateUser">
-          <a
-            class="d-inline-block"
-            color="primary"
-            mat-flat-button
-            [routerLink]="['/register']"
-          >
+        <a color="primary" mat-flat-button [routerLink]="['/register']">
           Get Started
         </a>
       </ng-container>
       <ng-container *ngIf="hasPermissionForDemo">
-          <div
-            *ngIf="hasPermissionToCreateUser"
-            class="d-inline-block mx-3 text-muted"
-          >
-            or
-          </div>
-          <a class="d-inline-block" mat-stroked-button [routerLink]="['/demo']">
-            Live Demo
-          </a>
+        <div *ngIf="hasPermissionToCreateUser" class="mx-3 text-muted">or</div>
+        <a mat-stroked-button [routerLink]="['/demo']"> Live Demo </a>
       </ng-container>
     </div>
   </div>
-  </div>
 
   <div *ngIf="hasPermissionForStatistics" class="row mb-5">
     <div
@@ -394,15 +380,13 @@
           or check out the example account</ng-container
         >
       </p>
-      <div class="py-2 text-center">
+      <div class="align-items-center d-flex justify-content-center py-2">
         <a color="primary" mat-flat-button [routerLink]="['/register']">
           Get Started
         </a>
         <ng-container *ngIf="hasPermissionForDemo">
-          <div class="d-inline-block mx-3 text-muted">or</div>
-          <a class="d-inline-block" mat-stroked-button [routerLink]="['/demo']">
-            Live Demo
-          </a>
+          <div class="mx-3 text-muted">or</div>
+          <a mat-stroked-button [routerLink]="['/demo']"> Live Demo </a>
         </ng-container>
       </div>
     </div>

apps/client/src/app/pages/landing/landing-page.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { RouterModule } from '@angular/router';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';

apps/client/src/app/pages/landing/landing-page.scss

@@ -4,7 +4,7 @@
   display: block;
 
   .button-container {
-    .mat-stroked-button {
+    .mat-mdc-outlined-button {
       background-color: var(--light-background);
     }
   }
@@ -115,7 +115,7 @@
 
 :host-context(.is-dark-theme) {
   .button-container {
-    .mat-stroked-button {
+    .mat-mdc-outlined-button {
       background-color: var(--dark-background);
     }
   }

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -10,7 +10,7 @@ import {
   MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
   MatLegacyDialogRef as MatDialogRef
 } from '@angular/material/legacy-dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';

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));
       }
     }

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

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
 

apps/client/src/app/pages/pricing/pricing-page.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';

apps/client/src/app/pages/public/public-page.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';

apps/client/src/app/pages/register/register-page.html

@@ -40,7 +40,7 @@
             <span i18n>Continue with Internet Identity</span>
           </button>
           <a
-            class="d-block px-4 rounded-pill"
+            class="px-4 rounded-pill w-100"
             href="../api/v1/auth/google"
             mat-stroked-button
             ><img

apps/client/src/app/pages/register/register-page.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { RouterModule } from '@angular/router';
 import { GfLogoModule } from '@ghostfolio/ui/logo';

apps/client/src/app/pages/register/register-page.scss

@@ -2,7 +2,7 @@
   display: block;
 
   .button-container {
-    .mat-stroked-button {
+    .mat-mdc-outlined-button {
       background-color: var(--light-background);
     }
   }
@@ -26,7 +26,7 @@
 
 :host-context(.is-dark-theme) {
   .button-container {
-    .mat-stroked-button {
+    .mat-mdc-outlined-button {
       background-color: var(--dark-background);
     }
   }

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts

@@ -3,7 +3,7 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';

apps/client/src/app/pages/webauthn/webauthn-page.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { WebauthnPageComponent } from '@ghostfolio/client/pages/webauthn/webauthn-page.component';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
 

apps/client/src/styles.scss

@@ -249,8 +249,8 @@ body {
       background: var(--dark-background);
     }
 
-    .mat-fab,
-    .mat-flat-button {
+    .mat-mdc-fab,
+    .mat-mdc-unelevated-button {
       &.mat-primary {
         color: rgba(var(--dark-primary-text)) !important;
       }
@@ -268,11 +268,12 @@ body {
     }
 
     .mat-mdc-paginator,
-    .mat-paginator {
+    .mat-mdc-paginator {
       background-color: rgba(var(--palette-foreground-base-dark), 0.02);
     }
 
     .mdc-button {
+      &.mat-accent,
       &.mat-primary {
         --mdc-filled-button-label-text-color: rgba(var(--dark-primary-text));
       }
@@ -384,8 +385,15 @@ ngx-skeleton-loader {
   margin: 0 !important;
 }
 
-.mat-fab,
-.mat-flat-button {
+.mat-mdc-button-base {
+  .mdc-button__label {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.mat-mdc-fab,
+.mat-mdc-unelevated-button {
   &.mat-primary {
     color: rgba(var(--light-primary-text)) !important;
   }
@@ -446,16 +454,17 @@ ngx-skeleton-loader {
 }
 
 .mat-mdc-paginator,
-.mat-paginator {
+.mat-mdc-paginator {
   background-color: rgba(var(--palette-foreground-base-light), 0.02);
 
   .mat-mdc-paginator-page-size,
-  .mat-paginator-page-size {
+  .mat-mdc-paginator-page-size {
     display: none;
   }
 }
 
 .mdc-button {
+  &.mat-accent,
   &.mat-primary {
     --mdc-filled-button-label-text-color: rgba(var(--light-primary-text));
   }

apps/client/src/styles/table.scss

@@ -9,6 +9,16 @@
     }
   }
 
+  .mat-mdc-footer-row {
+    .mat-mdc-footer-cell {
+      border-top: 1px solid
+        rgba(
+          var(--palette-foreground-divider),
+          var(--palette-foreground-divider-alpha)
+        );
+    }
+  }
+
   .mat-mdc-row {
     &:nth-child(even) {
       background-color: rgba(var(--palette-foreground-base), 0.02);
@@ -34,6 +44,15 @@
   }
 
   @if $darkTheme {
+    .mat-mdc-footer-row {
+      .mat-mdc-footer-cell {
+        border-top-color: rgba(
+          var(--palette-foreground-divider-dark),
+          var(--palette-foreground-divider-dark-alpha)
+        );
+      }
+    }
+
     .mat-mdc-row {
       &:nth-child(even) {
         background-color: rgba(var(--palette-foreground-base-dark), 0.02);

libs/ui/src/lib/activities-table/activities-table.component.scss

@@ -7,16 +7,6 @@
     overflow-x: auto;
 
     .mat-mdc-table {
-      td {
-        &.mat-mdc-footer-cell {
-          border-top: 1px solid
-            rgba(
-              var(--palette-foreground-divider),
-              var(--palette-foreground-divider-alpha)
-            );
-        }
-      }
-
       th {
         ::ng-deep {
           .mat-sort-header-container {
@@ -58,15 +48,6 @@
 
 :host-context(.is-dark-theme) {
   .mat-mdc-table {
-    td {
-      &.mat-mdc-footer-cell {
-        border-top-color: rgba(
-          var(--palette-foreground-divider-dark),
-          var(--palette-foreground-divider-dark-alpha)
-        );
-      }
-    }
-
     .type-badge {
       background-color: rgba(
         var(--palette-foreground-text-dark),