From f32df73256d842f2bbeb44a9d033cffca257f3c0 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 14 Feb 2023 10:04:22 +0100
Subject: [PATCH] Feature/migrate pages to angular material 15 (#1689)

* Migrate to Angular Material 15

* Update changelog
---
 CHANGELOG.md                                  |  4 ++++
 .../src/app/pages/about/about-page.html       |  2 +-
 .../src/app/pages/about/about-page.module.ts  |  4 ++--
 .../pages/about/changelog/changelog-page.html |  4 ++--
 .../about/changelog/changelog-page.module.ts  |  2 +-
 .../pages/about/changelog/changelog-page.scss | 22 ++++++++---------
 .../pages/accounts/accounts-page.component.ts |  2 +-
 .../src/app/pages/accounts/accounts-page.html |  2 +-
 .../pages/accounts/accounts-page.module.ts    |  2 +-
 .../src/app/pages/admin/admin-page.module.ts  |  8 -------
 .../black-friday-2022-page.module.ts          |  2 +-
 ...king-your-personal-finances-page.module.ts |  2 +-
 apps/client/src/app/pages/blog/blog-page.html | 24 +++++++++++--------
 .../src/app/pages/blog/blog-page.module.ts    |  2 +-
 .../app/pages/resources/resources-page.html   |  2 +-
 .../pages/resources/resources-page.module.ts  |  3 +--
 apps/client/src/styles.scss                   |  2 +-
 17 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d46c01b1..de9d889a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved the content of the landing page
 - Improved the content of the Frequently Asked Questions (FAQ) page
 - Set the exposed port as an environment variable (`PORT`) in `Dockerfile`
+- Migrated the style of `AboutPageModule` to `@angular/material` `15` (mdc)
+- Migrated the style of `BlogPageModule` to `@angular/material` `15` (mdc)
+- Migrated the style of `ChangelogPageModule` to `@angular/material` `15` (mdc)
+- Migrated the style of `ResourcesPageModule` to `@angular/material` `15` (mdc)
 - Upgraded `chart.js` from version `4.0.1` to `4.2.0`
 - Upgraded `ionicons` from version `6.0.4` to `6.1.2`
 - Upgraded `prettier` from version `2.8.1` to `2.8.4`
diff --git a/apps/client/src/app/pages/about/about-page.html b/apps/client/src/app/pages/about/about-page.html
index a6b68894..0ce83fb5 100644
--- a/apps/client/src/app/pages/about/about-page.html
+++ b/apps/client/src/app/pages/about/about-page.html
@@ -119,7 +119,7 @@
   <div *ngIf="hasPermissionForStatistics" class="mb-5 row">
     <div class="col">
       <h3 class="mb-3 text-center">Ghostfolio in Numbers</h3>
-      <mat-card>
+      <mat-card appearance="outlined">
         <mat-card-content>
           <div class="row">
             <div class="col-xs-12 col-md-4 my-2">
diff --git a/apps/client/src/app/pages/about/about-page.module.ts b/apps/client/src/app/pages/about/about-page.module.ts
index 6aa43387..ab1be9b8 100644
--- a/apps/client/src/app/pages/about/about-page.module.ts
+++ b/apps/client/src/app/pages/about/about-page.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 { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AboutPageRoutingModule } from './about-page-routing.module';
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.html b/apps/client/src/app/pages/about/changelog/changelog-page.html
index ac462b14..b3bc1e6e 100644
--- a/apps/client/src/app/pages/about/changelog/changelog-page.html
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.html
@@ -2,7 +2,7 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Changelog</h3>
-      <mat-card class="changelog">
+      <mat-card appearance="outlined" class="changelog">
         <mat-card-content>
           <markdown [src]="'../assets/CHANGELOG.md'"></markdown>
         </mat-card-content>
@@ -13,7 +13,7 @@
   <div class="row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>License</h3>
-      <mat-card>
+      <mat-card appearance="outlined">
         <mat-card-content>
           <markdown [src]="'../assets/LICENSE'"></markdown>
         </mat-card-content>
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.module.ts b/apps/client/src/app/pages/about/changelog/changelog-page.module.ts
index aba85a86..ba4788c2 100644
--- a/apps/client/src/app/pages/about/changelog/changelog-page.module.ts
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatCardModule } from '@angular/material/card';
 import { MarkdownModule } from 'ngx-markdown';
 
 import { ChangelogPageRoutingModule } from './changelog-page-routing.module';
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.scss b/apps/client/src/app/pages/about/changelog/changelog-page.scss
index 3fb17de7..3a20b875 100644
--- a/apps/client/src/app/pages/about/changelog/changelog-page.scss
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.scss
@@ -2,20 +2,18 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  .mat-card {
-    &.changelog {
-      a {
-        color: rgba(var(--palette-primary-500), 1);
-        font-weight: 500;
-
-        &:hover {
-          color: rgba(var(--palette-primary-300), 1);
-        }
-      }
-    }
-
+  .mat-mdc-card {
     &.changelog {
       ::ng-deep {
+        a {
+          color: rgba(var(--palette-primary-500), 1);
+          font-weight: 500;
+
+          &:hover {
+            color: rgba(var(--palette-primary-300), 1);
+          }
+        }
+
         markdown {
           h1,
           p {
diff --git a/apps/client/src/app/pages/accounts/accounts-page.component.ts b/apps/client/src/app/pages/accounts/accounts-page.component.ts
index 72b5771e..6d7f8455 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.component.ts
+++ b/apps/client/src/app/pages/accounts/accounts-page.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CreateAccountDto } from '@ghostfolio/api/app/account/create-account.dto';
 import { UpdateAccountDto } from '@ghostfolio/api/app/account/update-account.dto';
diff --git a/apps/client/src/app/pages/accounts/accounts-page.html b/apps/client/src/app/pages/accounts/accounts-page.html
index 77c487f9..6b23950d 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.html
+++ b/apps/client/src/app/pages/accounts/accounts-page.html
@@ -30,7 +30,7 @@
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon name="add-outline" size="large"></ion-icon>
+      <ion-icon class="mt-2" name="add-outline" size="large"></ion-icon>
     </a>
   </div>
 </div>
diff --git a/apps/client/src/app/pages/accounts/accounts-page.module.ts b/apps/client/src/app/pages/accounts/accounts-page.module.ts
index 1cd055bf..9edb43ba 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.module.ts
+++ b/apps/client/src/app/pages/accounts/accounts-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 { RouterModule } from '@angular/router';
 import { GfAccountDetailDialogModule } from '@ghostfolio/client/components/account-detail-dialog/account-detail-dialog.module';
 import { GfAccountsTableModule } from '@ghostfolio/client/components/accounts-table/accounts-table.module';
diff --git a/apps/client/src/app/pages/admin/admin-page.module.ts b/apps/client/src/app/pages/admin/admin-page.module.ts
index d33c94d9..b3cf5d73 100644
--- a/apps/client/src/app/pages/admin/admin-page.module.ts
+++ b/apps/client/src/app/pages/admin/admin-page.module.ts
@@ -1,15 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
 import { GfAdminJobsModule } from '@ghostfolio/client/components/admin-jobs/admin-jobs.module';
 import { GfAdminMarketDataModule } from '@ghostfolio/client/components/admin-market-data/admin-market-data.module';
 import { GfAdminOverviewModule } from '@ghostfolio/client/components/admin-overview/admin-overview.module';
 import { GfAdminUsersModule } from '@ghostfolio/client/components/admin-users/admin-users.module';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
-import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AdminPageRoutingModule } from './admin-page-routing.module';
 import { AdminPageComponent } from './admin-page.component';
@@ -24,10 +20,6 @@ import { AdminPageComponent } from './admin-page.component';
     GfAdminMarketDataModule,
     GfAdminOverviewModule,
     GfAdminUsersModule,
-    GfValueModule,
-    MatButtonModule,
-    MatCardModule,
-    MatMenuModule,
     MatTabsModule
   ],
   providers: [CacheService],
diff --git a/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.module.ts b/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.module.ts
index 48951f6e..93964e7a 100644
--- a/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.module.ts
+++ b/apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-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 { RouterModule } from '@angular/router';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 
diff --git a/apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.module.ts b/apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.module.ts
index 4faf5af8..f383347d 100644
--- a/apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-page.module.ts
+++ b/apps/client/src/app/pages/blog/2022/12/the-importance-of-tracking-your-personal-finances/the-importance-of-tracking-your-personal-finances-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 { RouterModule } from '@angular/router';
 
 import { TheImportanceOfTrackingYourPersonalFinancesRoutingModule } from './the-importance-of-tracking-your-personal-finances-page-routing.module';
diff --git a/apps/client/src/app/pages/blog/blog-page.html b/apps/client/src/app/pages/blog/blog-page.html
index e2ebfa89..69b5000b 100644
--- a/apps/client/src/app/pages/blog/blog-page.html
+++ b/apps/client/src/app/pages/blog/blog-page.html
@@ -2,7 +2,7 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="d-none d-sm-block mb-3 text-center" i18n>Blog</h3>
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -28,7 +28,7 @@
           </div>
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -54,7 +54,11 @@
           </div>
         </mat-card-content>
       </mat-card>
-      <mat-card *ngIf="hasPermissionForSubscription" class="mb-3">
+      <mat-card
+        *ngIf="hasPermissionForSubscription"
+        appearance="outlined"
+        class="mb-3"
+      >
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -78,7 +82,7 @@
           </div>
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -102,7 +106,7 @@
           </div>
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -126,7 +130,7 @@
           </div>
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -152,7 +156,7 @@
           </div>
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -178,7 +182,7 @@
           </div>
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -204,7 +208,7 @@
           </div>
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
@@ -228,7 +232,7 @@
           </div>
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">
diff --git a/apps/client/src/app/pages/blog/blog-page.module.ts b/apps/client/src/app/pages/blog/blog-page.module.ts
index 3f06d6da..d210c1aa 100644
--- a/apps/client/src/app/pages/blog/blog-page.module.ts
+++ b/apps/client/src/app/pages/blog/blog-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatCardModule } from '@angular/material/card';
 
 import { BlogPageRoutingModule } from './blog-page-routing.module';
 import { BlogPageComponent } from './blog-page.component';
diff --git a/apps/client/src/app/pages/resources/resources-page.html b/apps/client/src/app/pages/resources/resources-page.html
index 32223b6c..86d97f8a 100644
--- a/apps/client/src/app/pages/resources/resources-page.html
+++ b/apps/client/src/app/pages/resources/resources-page.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <h1 class="d-none d-sm-block mb-3 text-center" i18n>Resources</h1>
+      <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Resources</h1>
       <h2 class="h4 mb-3">Guides</h2>
       <div class="mb-5">
         <div class="mb-4 media">
diff --git a/apps/client/src/app/pages/resources/resources-page.module.ts b/apps/client/src/app/pages/resources/resources-page.module.ts
index 13d45289..10845a51 100644
--- a/apps/client/src/app/pages/resources/resources-page.module.ts
+++ b/apps/client/src/app/pages/resources/resources-page.module.ts
@@ -1,13 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 
 import { ResourcesPageRoutingModule } from './resources-page-routing.module';
 import { ResourcesPageComponent } from './resources-page.component';
 
 @NgModule({
   declarations: [ResourcesPageComponent],
-  imports: [CommonModule, MatCardModule, ResourcesPageRoutingModule],
+  imports: [CommonModule, ResourcesPageRoutingModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class ResourcesPageModule {}
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 9c4a9bb2..f9c101de 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -203,7 +203,7 @@ body {
 
   .blog {
     a {
-      &:not(.mat-flat-button) {
+      &:not(.mdc-button) {
         color: rgba(var(--palette-primary-500), 1) !important;
         font-weight: 500;