Feature/migrate pages to angular material 15 (#1689)

* Migrate to Angular Material 15 * Update changelog
2023-02-14 10:04:22 +01:00 · 2023-02-14 10:04:22 +01:00 · f32df73256
commit f32df73256
parent 9d03a8002c
17 changed files with 43 additions and 46 deletions
--- 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`
--- 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">
--- 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';
--- 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>
--- 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';
--- a/apps/client/src/app/pages/about/changelog/changelog-page.scss
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.scss
@ -2,8 +2,9 @@
  color: rgb(var(--dark-primary-text));
  display: block;

-  .mat-card {
+  .mat-mdc-card {
    &.changelog {
+      ::ng-deep {
        a {
          color: rgba(var(--palette-primary-500), 1);
          font-weight: 500;
@ -12,10 +13,7 @@
            color: rgba(var(--palette-primary-300), 1);
          }
        }
-    }

-    &.changelog {
-      ::ng-deep {
        markdown {
          h1,
          p {
--- 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';
--- 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>
--- 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';
--- 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],
--- 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';

--- 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';
--- 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">
--- 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';
--- 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">
--- 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 {}
--- 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;