Migrate card components to Angular Material 15 (#1837)

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

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="mb-5 row">
     <div class="col">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Count</div>

apps/client/src/app/components/admin-overview/admin-overview.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 { MatButtonModule } from '@angular/material/button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatCardModule } from '@angular/material/card';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
 import { CacheService } from '@ghostfolio/client/services/cache.service';

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -9,8 +9,8 @@
   </div>
   <div class="row">
     <div class="align-items-center col-xs-12 col-md-8 offset-md-2">
-      <mat-card class="p-0">
-        <mat-card-content>
+      <mat-card appearance="outlined">
+        <mat-card-content class="p-0">
           <gf-positions
             [baseCurrency]="user?.settings?.baseCurrency"
             [deviceType]="deviceType"

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

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

apps/client/src/app/components/home-summary/home-summary.html

@@ -2,7 +2,7 @@
   <h3 class="d-none d-sm-block mb-3 text-center" i18n>Summary</h3>
   <div class="row">
     <div class="col-xs-12 col-md-8 offset-md-2">
-      <mat-card class="h-100">
+      <mat-card appearance="outlined">
         <mat-card-content>
           <gf-portfolio-summary
             [baseCurrency]="user?.settings?.baseCurrency"

apps/client/src/app/components/home-summary/home-summary.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 { RouterModule } from '@angular/router';
 import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module';
 

apps/client/src/app/components/rules/rules.component.html

@@ -3,11 +3,14 @@
     <div class="col">
       <mat-card
         *ngIf="hasPermissionToCreateOrder && rules === null"
+        appearance="outlined"
         class="my-2 text-center"
       >
-        <gf-no-transactions-info-indicator
-          [hasBorder]="false"
-        ></gf-no-transactions-info-indicator>
+        <mat-card-content>
+          <gf-no-transactions-info-indicator
+            [hasBorder]="false"
+          ></gf-no-transactions-info-indicator
+        ></mat-card-content>
       </mat-card>
 
       <gf-rule *ngIf="rules?.length === 0" [isLoading]="true"></gf-rule>

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

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

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

@@ -6,7 +6,7 @@
   </div>
   <div *ngIf="user?.settings" class="mb-5 row">
     <div class="col">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
           <div
             *ngIf="hasPermissionToUpdateUserSettings && user?.subscription"

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

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatCardModule } from '@angular/material/card';
 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/faq/faq-page.html

@@ -4,32 +4,42 @@
       <h3 class="d-none d-sm-block mb-3 text-center">
         Frequently Asked Questions (FAQ)
       </h3>
-      <mat-card class="mb-3">
-        <mat-card-title>What is Ghostfolio?</mat-card-title>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>What is Ghostfolio?</mat-card-title>
+        </mat-card-header>
         <mat-card-content>
           Ghostfolio is a lightweight, open source wealth management application
           for individuals to keep track of their net worth. The software
           empowers you to make solid, data-driven investment decisions.
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title
-          >What assets can I track with Ghostfolio?</mat-card-title
-        >
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >What assets can I track with Ghostfolio?</mat-card-title
+          >
+        </mat-card-header>
         <mat-card-content>
           With Ghostfolio, you can keep track of various assets like stocks,
           ETFs or cryptocurrencies.
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title>What else is included in Ghostfolio?</mat-card-title>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >What else is included in Ghostfolio?</mat-card-title
+          ></mat-card-header
+        >
         <mat-card-content>
           Please find a feature overview to manage your wealth
           <a [routerLink]="['/features']">here</a>.
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title>How do I start?</mat-card-title>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>How do I start?</mat-card-title></mat-card-header
+        >
         <mat-card-content>
           You can sign up via the “<a [routerLink]="['/register']"
             >Get Started</a
@@ -41,8 +51,12 @@
           or <i>Google Sign</i>. We will guide you to set up your portfolio.
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title>Can I use Ghostfolio anonymously?</mat-card-title>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >Can I use Ghostfolio anonymously?</mat-card-title
+          ></mat-card-header
+        >
         <mat-card-content>
           Yes, the authentication systems (via security token or
           <a href="../en/blog/2022/07/ghostfolio-meets-internet-identity"
@@ -51,8 +65,12 @@
           is no need for an e-mail address, phone number, or a username.
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title>How can Ghostfolio be free?</mat-card-title>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >How can Ghostfolio be free?</mat-card-title
+          ></mat-card-header
+        >
         <mat-card-content
           >This project is driven by the efforts of contributors from around the
           world. The
@@ -64,16 +82,22 @@
           investors.</mat-card-content
         >
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title>Is it really free?</mat-card-title>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>Is it really free?</mat-card-title></mat-card-header
+        >
         <mat-card-content
           >Yes, it is! Our
           <a [routerLink]="['/pricing']">pricing page</a> details everything you
           get for free.</mat-card-content
         >
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title>What is Ghostfolio Premium?</mat-card-title>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >What is Ghostfolio Premium?</mat-card-title
+          ></mat-card-header
+        >
         <mat-card-content
           ><a [routerLink]="['/pricing']">Ghostfolio Premium</a> is a fully
           managed Ghostfolio cloud offering for ambitious investors. The revenue
@@ -83,8 +107,12 @@
           data provider.</mat-card-content
         >
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title>Can I start with a trial version?</mat-card-title>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >Can I start with a trial version?</mat-card-title
+          ></mat-card-header
+        >
         <mat-card-content
           >Yes, you can try
           <a [routerLink]="['/pricing']">Ghostfolio Premium</a> by signing up
@@ -93,19 +121,23 @@
           time.</mat-card-content
         >
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title
-          >How can I get a student discount for Ghostfolio
-          Premium?</mat-card-title
-        >
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >How can I get a student discount for Ghostfolio
+            Premium?</mat-card-title
+          >
+        </mat-card-header>
         <mat-card-content
           >Request your student discount
           <a href="mailto:hi@ghostfol.io?Subject=Student Discount">here</a> with
           your university e-mail address.</mat-card-content
         >
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title>Which devices are supported?</mat-card-title>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>Which devices are supported?</mat-card-title>
+        </mat-card-header>
         <mat-card-content
           >Ghostfolio works in every modern web browser on smartphones, tablets
           and desktop computers. For <i>Android</i> users, there is a dedicated
@@ -116,21 +148,29 @@
           >.</mat-card-content
         >
       </mat-card>
-      <mat-card *ngIf="user?.subscription?.type === 'Premium'" class="mb-3">
-        <mat-card-title
-          >I cannot find my broker in the list of platforms. What can I
-          do?</mat-card-title
-        >
+      <mat-card
+        *ngIf="user?.subscription?.type === 'Premium'"
+        appearance="outlined"
+        class="mb-3"
+      >
+        <mat-card-header>
+          <mat-card-title
+            >I cannot find my broker in the list of platforms. What can I
+            do?</mat-card-title
+          >
+        </mat-card-header>
         <mat-card-content>
           Please send an e-mail with the web address of your broker to
           <a href="mailto:hi@ghostfol.io">hi@ghostfol.io</a> and we are happy to
           add it.
         </mat-card-content>
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title
-          >Ghostfolio sounds cool, how can I get involved?</mat-card-title
-        >
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title
+            >Ghostfolio sounds cool, how can I get involved?</mat-card-title
+          >
+        </mat-card-header>
         <mat-card-content
           >Any support for Ghostfolio is welcome. Be it with a
           <a [routerLink]="['/pricing']">Ghostfolio Premium</a> subscription to
@@ -165,8 +205,10 @@
           >.</mat-card-content
         >
       </mat-card>
-      <mat-card class="mb-3">
-        <mat-card-title>Got any other questions?</mat-card-title>
+      <mat-card appearance="outlined" class="mb-3">
+        <mat-card-header>
+          <mat-card-title>Got any other questions?</mat-card-title>
+        </mat-card-header>
         <mat-card-content
           >Please join the Ghostfolio
           <a

apps/client/src/app/pages/faq/faq-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 { FaqPageRoutingModule } from './faq-page-routing.module';
 import { FaqPageComponent } from './faq-page.component';

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

@@ -10,233 +10,271 @@
       </div>
       <div class="row">
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4>Stocks</h4>
-              <p class="m-0">Keep track of your stock purchases and sales.</p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4>Stocks</h4>
+                <p class="m-0">Keep track of your stock purchases and sales.</p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4>ETFs</h4>
-              <p class="m-0">
-                Are you into ETFs (Exchange Traded Funds)? Track your ETF
-                investments.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4>ETFs</h4>
+                <p class="m-0">
+                  Are you into ETFs (Exchange Traded Funds)? Track your ETF
+                  investments.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4>Bonds</h4>
-              <p class="m-0">
-                Manage your investment in bonds and other assets with fixed
-                income.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4>Bonds</h4>
+                <p class="m-0">
+                  Manage your investment in bonds and other assets with fixed
+                  income.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4>Cryptocurrencies</h4>
-              <p class="m-0">
-                Keep track of your Bitcoin and Altcoin holdings.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4>Cryptocurrencies</h4>
+                <p class="m-0">
+                  Keep track of your Bitcoin and Altcoin holdings.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4>Dividend</h4>
-              <p class="m-0">
-                Are you building a dividend portfolio? Track your dividend in
-                Ghostfolio.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4>Dividend</h4>
+                <p class="m-0">
+                  Are you building a dividend portfolio? Track your dividend in
+                  Ghostfolio.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">Wealth Items</h4>
-              <p class="m-0">
-                Track all your treasuries, be it your luxury watch or rare
-                trading cards.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4 class="align-items-center d-flex">Wealth Items</h4>
+                <p class="m-0">
+                  Track all your treasuries, be it your luxury watch or rare
+                  trading cards.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">Emergency Fund</h4>
-              <p class="m-0">
-                Define your emergency fund you are comfortable with for
-                difficult times.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4 class="align-items-center d-flex">Emergency Fund</h4>
+                <p class="m-0">
+                  Define your emergency fund you are comfortable with for
+                  difficult times.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">Import and Export</h4>
-              <p class="m-0">Import and export your investment activities.</p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4 class="align-items-center d-flex">Import and Export</h4>
+                <p class="m-0">Import and export your investment activities.</p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4>Multi-Accounts</h4>
-              <p class="m-0">
-                Keep an eye on all your accounts across multiple platforms
-                (multi-banking).
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4>Multi-Accounts</h4>
+                <p class="m-0">
+                  Keep an eye on all your accounts across multiple platforms
+                  (multi-banking).
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">
-                <span>Portfolio Calculations</span>
-                <gf-premium-indicator
-                  *ngIf="hasPermissionForSubscription"
-                  class="ml-1"
-                ></gf-premium-indicator>
-              </h4>
-              <p class="m-0">
-                Check the rate of return of your portfolio for
-                <code>Today</code>, <code>YTD</code>, <code>1Y</code>,
-                <code>5Y</code>, and <code>Max</code>.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4 class="align-items-center d-flex">
+                  <span>Portfolio Calculations</span>
+                  <gf-premium-indicator
+                    *ngIf="hasPermissionForSubscription"
+                    class="ml-1"
+                  ></gf-premium-indicator>
+                </h4>
+                <p class="m-0">
+                  Check the rate of return of your portfolio for
+                  <code>Today</code>, <code>YTD</code>, <code>1Y</code>,
+                  <code>5Y</code>, and <code>Max</code>.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">
-                <span>Portfolio Allocations</span>
-                <gf-premium-indicator
-                  *ngIf="hasPermissionForSubscription"
-                  class="ml-1"
-                ></gf-premium-indicator>
-              </h4>
-              <p class="m-0">
-                Check the allocations of your portfolio by account, asset class,
-                currency, region, and sector.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4 class="align-items-center d-flex">
+                  <span>Portfolio Allocations</span>
+                  <gf-premium-indicator
+                    *ngIf="hasPermissionForSubscription"
+                    class="ml-1"
+                  ></gf-premium-indicator>
+                </h4>
+                <p class="m-0">
+                  Check the allocations of your portfolio by account, asset
+                  class, currency, region, and sector.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">Dark Mode</h4>
-              <p class="m-0">
-                Ghostfolio automatically switches to a dark color theme based on
-                your operating system's preferences.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4 class="align-items-center d-flex">Dark Mode</h4>
+                <p class="m-0">
+                  Ghostfolio automatically switches to a dark color theme based
+                  on your operating system's preferences.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">Zen Mode</h4>
-              <p class="m-0">
-                Keep calm and activate Zen Mode if the markets are going crazy.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4 class="align-items-center d-flex">Zen Mode</h4>
+                <p class="m-0">
+                  Keep calm and activate Zen Mode if the markets are going
+                  crazy.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div
           *ngIf="hasPermissionForSubscription"
           class="col-xs-12 col-md-4 mb-3"
         >
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">
-                <span>Market Mood</span>
-                <gf-premium-indicator class="ml-1"></gf-premium-indicator>
-              </h4>
-              <p class="m-0">
-                Check the current market mood (<a [routerLink]="['/resources']"
-                  >Fear & Greed Index</a
-                >) within the app.
-              </p>
-            </div>
-          </mat-card>
-        </div>
-        <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">
-                <span>Static Analysis</span>
-                <gf-premium-indicator
-                  *ngIf="hasPermissionForSubscription"
-                  class="ml-1"
-                ></gf-premium-indicator>
-              </h4>
-              <p class="m-0">
-                Identify potential risks in your portfolio with Ghostfolio
-                X-ray, the static portfolio analysis.
-              </p>
-            </div>
-          </mat-card>
-        </div>
-        <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4>Multi-Language</h4>
-              <p class="m-0">
-                Use Ghostfolio in multiple languages: English, Dutch, French,
-                German, Italian<ng-container *ngIf="false"
-                  >, Portuguese</ng-container
-                >
-                and Spanish are currently supported.
-              </p>
-            </div>
-          </mat-card>
-        </div>
-        <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4>Community</h4>
-              <p class="m-0">
-                Join the Ghostfolio
-                <a
-                  href="https://ghostfolio.slack.com"
-                  title="Join the Ghostfolio Slack community"
-                  >Slack channel</a
-                >
-                full of enthusiastic investors and discuss the latest market
-                trends.
-              </p>
-            </div>
-          </mat-card>
-        </div>
-        <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4>Open Source Software</h4>
-              <p class="m-0">
-                The source code is fully available as
-                <a
-                  href="https://github.com/ghostfolio/ghostfolio"
-                  title="Find Ghostfolio on GitHub"
-                  >open source software</a
-                >
-                (OSS) and licensed under the <i>AGPLv3 License</i>.
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4 class="align-items-center d-flex">
+                  <span>Market Mood</span>
+                  <gf-premium-indicator class="ml-1"></gf-premium-indicator>
+                </h4>
+                <p class="m-0">
+                  Check the current market mood (<a
+                    [routerLink]="['/resources']"
+                    >Fear & Greed Index</a
+                  >) within the app.
+                </p>
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+        <div class="col-xs-12 col-md-4 mb-3">
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4 class="align-items-center d-flex">
+                  <span>Static Analysis</span>
+                  <gf-premium-indicator
+                    *ngIf="hasPermissionForSubscription"
+                    class="ml-1"
+                  ></gf-premium-indicator>
+                </h4>
+                <p class="m-0">
+                  Identify potential risks in your portfolio with Ghostfolio
+                  X-ray, the static portfolio analysis.
+                </p>
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+        <div class="col-xs-12 col-md-4 mb-3">
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4>Multi-Language</h4>
+                <p class="m-0">
+                  Use Ghostfolio in multiple languages: English, Dutch, French,
+                  German, Italian<ng-container *ngIf="false"
+                    >, Portuguese</ng-container
+                  >
+                  and Spanish are currently supported.
+                </p>
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+        <div class="col-xs-12 col-md-4 mb-3">
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4>Community</h4>
+                <p class="m-0">
+                  Join the Ghostfolio
+                  <a
+                    href="https://ghostfolio.slack.com"
+                    title="Join the Ghostfolio Slack community"
+                    >Slack channel</a
+                  >
+                  full of enthusiastic investors and discuss the latest market
+                  trends.
+                </p>
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+        <div class="col-xs-12 col-md-4 mb-3">
+          <mat-card appearance="outlined" class="d-flex flex-column h-100">
+            <mat-card-content>
+              <div class="flex-grow-1">
+                <h4>Open Source Software</h4>
+                <p class="m-0">
+                  The source code is fully available as
+                  <a
+                    href="https://github.com/ghostfolio/ghostfolio"
+                    title="Find Ghostfolio on GitHub"
+                    >open source software</a
+                  >
+                  (OSS) and licensed under the <i>AGPLv3 License</i>.
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
       </div>

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatCardModule } from '@angular/material/card';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 
 import { FeaturesPageRoutingModule } from './features-page-routing.module';

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

@@ -214,22 +214,33 @@
 
   <div class="row my-3">
     <div class="col-md-4 my-2">
-      <mat-card>
-        <mat-card-title>360° View</mat-card-title>
-        Get the full picture of your personal finances across multiple
-        platforms.
+      <mat-card appearance="outlined">
+        <mat-card-header>
+          <mat-card-title>360° View</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          Get the full picture of your personal finances across multiple
+        </mat-card-content>
       </mat-card>
     </div>
     <div class="col-md-4 my-2">
-      <mat-card>
-        <mat-card-title>Web3 Ready</mat-card-title>
-        Use Ghostfolio anonymously and own your financial data.
+      <mat-card appearance="outlined">
+        <mat-card-header>
+          <mat-card-title>Web3 Ready</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          Use Ghostfolio anonymously and own your financial data.
+        </mat-card-content>
       </mat-card>
     </div>
     <div class="col-md-4 my-2">
-      <mat-card>
-        <mat-card-title>Open Source</mat-card-title>
-        Benefit from continuous improvements through a strong community.
+      <mat-card appearance="outlined">
+        <mat-card-header>
+          <mat-card-title>Open Source</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          Benefit from continuous improvements through a strong community.
+        </mat-card-content>
       </mat-card>
     </div>
   </div>
@@ -340,34 +351,40 @@
       <p class="lead mb-3 text-center">Get started in only 3 steps</p>
     </div>
     <div class="col-md-4 my-2">
-      <mat-card class="d-flex flex-row h-100">
-        <div class="flex-grow-1">
-          <div class="font-weight-bold">Sign up anonymously*</div>
-          <div class="text-muted">
-            <small>* no e-mail address nor credit card required</small>
+      <mat-card appearance="outlined" class="h-100">
+        <mat-card-content class="d-flex flex-row">
+          <div class="flex-grow-1">
+            <div class="font-weight-bold">Sign up anonymously*</div>
+            <div class="text-muted">
+              <small>* no e-mail address nor credit card required</small>
+            </div>
           </div>
-        </div>
-        <div class="pl-2 text-muted text-right">1</div>
+          <div class="pl-2 text-muted text-right">1</div>
+        </mat-card-content>
       </mat-card>
     </div>
     <div class="col-md-4 my-2">
-      <mat-card class="d-flex flex-row h-100">
-        <div class="flex-grow-1">
-          <div class="font-weight-bold">
-            Add any of your historical transactions
+      <mat-card appearance="outlined" class="h-100">
+        <mat-card-content class="d-flex flex-row">
+          <div class="flex-grow-1">
+            <div class="font-weight-bold">
+              Add any of your historical transactions
+            </div>
           </div>
-        </div>
-        <div class="pl-2 text-muted text-right">2</div>
+          <div class="pl-2 text-muted text-right">2</div>
+        </mat-card-content>
       </mat-card>
     </div>
     <div class="col-md-4 my-2">
-      <mat-card class="d-flex flex-row h-100">
-        <div class="flex-grow-1">
-          <div class="font-weight-bold">
-            Get valuable insights of your portfolio composition
+      <mat-card appearance="outlined" class="h-100">
+        <mat-card-content class="d-flex flex-row">
+          <div class="flex-grow-1">
+            <div class="font-weight-bold">
+              Get valuable insights of your portfolio composition
+            </div>
           </div>
-        </div>
-        <div class="pl-2 text-muted text-right">3</div>
+          <div class="pl-2 text-muted text-right">3</div>
+        </mat-card-content>
       </mat-card>
     </div>
   </div>

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

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

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

@@ -12,7 +12,7 @@
   </div>
   <div class="row">
     <div class="col">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="mb-2 overflow-hidden w-100">
           <mat-card-title class="m-0 text-truncate" i18n
             >Proportion of Net Worth</mat-card-title
@@ -36,7 +36,7 @@
   </div>
   <div class="proportion-charts row">
     <div class="col-md-4">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="text-truncate" i18n>By Account</mat-card-title>
         </mat-card-header>
@@ -55,7 +55,7 @@
       </mat-card>
     </div>
     <div class="col-md-4">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="align-items-center d-flex text-truncate"
             ><span i18n>By Currency</span>
@@ -78,7 +78,7 @@
       </mat-card>
     </div>
     <div class="col-md-4">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="align-items-center d-flex text-truncate"
             ><span i18n>By Asset Class</span
@@ -101,7 +101,7 @@
       </mat-card>
     </div>
     <div class="col-md-12 allocations-by-symbol">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="align-items-center d-flex text-truncate">
             <ng-container i18n>By Holding</ng-container></mat-card-title
@@ -124,7 +124,7 @@
       </mat-card>
     </div>
     <div class="col-md-4">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="align-items-center d-flex text-truncate"
             ><span i18n>By Sector</span
@@ -148,7 +148,7 @@
       </mat-card>
     </div>
     <div class="col-md-4">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="align-items-center d-flex text-truncate"
             ><span i18n>By Continent</span
@@ -171,7 +171,7 @@
       </mat-card>
     </div>
     <div class="col-md-4">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="align-items-center d-flex text-truncate"
             ><span i18n>By Country</span
@@ -197,7 +197,7 @@
   </div>
   <div class="row world-map-chart">
     <div class="col-lg">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="align-items-center d-flex text-truncate"
             ><span i18n>Regions</span
@@ -208,12 +208,14 @@
           ></mat-card-title>
         </mat-card-header>
         <mat-card-content>
-          <gf-world-map-chart
-            [countries]="countries"
-            [format]="worldMapChartFormat"
-            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
-            [locale]="user?.settings?.locale"
-          ></gf-world-map-chart>
+          <div class="world-map-chart-container">
+            <gf-world-map-chart
+              [countries]="countries"
+              [format]="worldMapChartFormat"
+              [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+              [locale]="user?.settings?.locale"
+            ></gf-world-map-chart>
+          </div>
           <div class="row">
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value

apps/client/src/app/pages/portfolio/allocations/allocations-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 { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';

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

@@ -8,17 +8,17 @@
   }
 
   .world-map-chart {
-    .mat-card {
-      .mat-card-content {
+    .mat-mdc-card {
+      .world-map-chart-container {
         aspect-ratio: 16 / 9;
       }
     }
   }
 
-  .mat-card {
-    .mat-card-header {
+  .mat-mdc-card {
+    .mat-mdc-card-header {
       ::ng-deep {
-        .mat-card-header-text {
+        .mat-mdc-card-header-text {
           flex: 1 1 auto;
           overflow: hidden;
         }

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -34,7 +34,7 @@
 
   <div class="mb-5 row">
     <div class="col-md-6">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header>
           <mat-card-title class="align-items-center d-flex" i18n
             >Top</mat-card-title
@@ -80,7 +80,7 @@
       </mat-card>
     </div>
     <div class="col-md-6">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header>
           <mat-card-title class="align-items-center d-flex" i18n
             >Bottom</mat-card-title

apps/client/src/app/pages/portfolio/analysis/analysis-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 { GfBenchmarkComparatorModule } from '@ghostfolio/client/components/benchmark-comparator/benchmark-comparator.module';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';

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

@@ -29,314 +29,330 @@
       </div>
       <div class="row">
         <div class="col-xs-12 col-lg-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
-            <div class="flex-grow-1">
-              <h4>Open Source</h4>
-              <p i18n>
-                For tech-savvy investors who prefer to run Ghostfolio on their
-                own infrastructure.
-              </p>
-              <ul class="list-unstyled mb-3">
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Unlimited Transactions</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Unlimited Accounts</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Portfolio Performance</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Portfolio Summary</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Portfolio Allocations</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Performance Benchmarks</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>FIRE Calculator</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Data Import and Export</span>
-                  <span
-                    class="align-items-center d-flex ml-1"
-                    matTooltipPosition="above"
-                    [matTooltip]="importAndExportTooltipOSS"
-                  >
-                    <ion-icon name="information-circle-outline"></ion-icon>
-                  </span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <a i18n [routerLink]="['/features']">and more Features...</a>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Community Support</span>
-                </li>
-              </ul>
-            </div>
-            <p i18n>Self-hosted, update manually.</p>
-            <p class="h5 text-right" i18n>Free</p>
-            <div
-              *ngIf="user?.subscription?.type === 'Basic'"
-              class="d-none d-lg-block hidden mt-3 text-center"
-            >
-              <a color="primary" mat-flat-button>&nbsp;</a>
-              <p class="m-0 text-muted">
-                <small>&nbsp;</small>
-              </p>
-            </div>
+          <mat-card appearance="outlined" class="h-100">
+            <mat-card-content class="d-flex flex-column h-100">
+              <div class="flex-grow-1">
+                <h4>Open Source</h4>
+                <p i18n>
+                  For tech-savvy investors who prefer to run Ghostfolio on their
+                  own infrastructure.
+                </p>
+                <ul class="list-unstyled mb-3">
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Unlimited Transactions</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Unlimited Accounts</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Portfolio Performance</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Portfolio Summary</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Portfolio Allocations</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Performance Benchmarks</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>FIRE Calculator</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Data Import and Export</span>
+                    <span
+                      class="align-items-center d-flex ml-1"
+                      matTooltipPosition="above"
+                      [matTooltip]="importAndExportTooltipOSS"
+                    >
+                      <ion-icon name="information-circle-outline"></ion-icon>
+                    </span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <a i18n [routerLink]="['/features']"
+                      >and more Features...</a
+                    >
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Community Support</span>
+                  </li>
+                </ul>
+              </div>
+              <p i18n>Self-hosted, update manually.</p>
+              <p class="h5 text-right" i18n>Free</p>
+              <div
+                *ngIf="user?.subscription?.type === 'Basic'"
+                class="d-none d-lg-block hidden mt-3 text-center"
+              >
+                <a color="primary" mat-flat-button>&nbsp;</a>
+                <p class="m-0 text-muted">
+                  <small>&nbsp;</small>
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-lg-4 mb-3">
           <mat-card
-            class="d-flex flex-column h-100"
+            appearance="outlined"
+            class="h-100"
             [ngClass]="{ 'active': user?.subscription?.type === 'Basic' }"
           >
-            <div class="flex-grow-1">
-              <div class="align-items-center d-flex mb-2">
-                <h4 class="flex-grow-1 m-0">Basic</h4>
-                <div *ngIf="user?.subscription?.type === 'Basic'">
-                  <ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
+            <mat-card-content class="d-flex flex-column h-100">
+              <div class="flex-grow-1">
+                <div class="align-items-center d-flex mb-2">
+                  <h4 class="flex-grow-1 m-0">Basic</h4>
+                  <div *ngIf="user?.subscription?.type === 'Basic'">
+                    <ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
+                  </div>
                 </div>
+                <p i18n>
+                  For new investors who are just getting started with trading.
+                </p>
+                <ul class="list-unstyled mb-3">
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Unlimited Transactions</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Unlimited Accounts</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Portfolio Performance</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Data Import and Export</span>
+                    <span
+                      class="align-items-center d-flex ml-1"
+                      matTooltipPosition="above"
+                      [matTooltip]="importAndExportTooltipBasic"
+                    >
+                      <ion-icon name="information-circle-outline"></ion-icon>
+                    </span>
+                  </li>
+                </ul>
               </div>
-              <p i18n>
-                For new investors who are just getting started with trading.
-              </p>
-              <ul class="list-unstyled mb-3">
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Unlimited Transactions</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Unlimited Accounts</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Portfolio Performance</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Data Import and Export</span>
-                  <span
-                    class="align-items-center d-flex ml-1"
-                    matTooltipPosition="above"
-                    [matTooltip]="importAndExportTooltipBasic"
-                  >
-                    <ion-icon name="information-circle-outline"></ion-icon>
-                  </span>
-                </li>
-              </ul>
-            </div>
-            <p i18n>Fully managed Ghostfolio cloud offering.</p>
-            <p class="h5 text-right" i18n>Free</p>
-            <div
-              *ngIf="user?.subscription?.type === 'Basic'"
-              class="d-none d-lg-block hidden mt-3 text-center"
-            >
-              <a color="primary" mat-flat-button>&nbsp;</a>
-              <p class="m-0 text-muted">
-                <small>&nbsp;</small>
-              </p>
-            </div>
+              <p i18n>Fully managed Ghostfolio cloud offering.</p>
+              <p class="h5 text-right" i18n>Free</p>
+              <div
+                *ngIf="user?.subscription?.type === 'Basic'"
+                class="d-none d-lg-block hidden mt-3 text-center"
+              >
+                <a color="primary" mat-flat-button>&nbsp;</a>
+                <p class="m-0 text-muted">
+                  <small>&nbsp;</small>
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
         <div class="col-xs-12 col-lg-4 mb-3">
           <mat-card
-            class="d-flex flex-column h-100"
+            appearance="outlined"
+            class="h-100"
             [ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
           >
-            <div class="flex-grow-1">
-              <div class="align-items-center d-flex mb-2">
-                <h4 class="align-items-center d-flex flex-grow-1 m-0">
-                  <span>Premium</span>
-                  <gf-premium-indicator
-                    class="ml-1"
-                    [enableLink]="false"
-                  ></gf-premium-indicator>
-                </h4>
-                <div *ngIf="user?.subscription?.type === 'Premium'">
-                  <ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
+            <mat-card-content class="d-flex flex-column h-100">
+              <div class="flex-grow-1">
+                <div class="align-items-center d-flex mb-2">
+                  <h4 class="align-items-center d-flex flex-grow-1 m-0">
+                    <span>Premium</span>
+                    <gf-premium-indicator
+                      class="ml-1"
+                      [enableLink]="false"
+                    ></gf-premium-indicator>
+                  </h4>
+                  <div *ngIf="user?.subscription?.type === 'Premium'">
+                    <ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
+                  </div>
                 </div>
+                <p i18n>
+                  For ambitious investors who need the full picture of their
+                  financial assets.
+                </p>
+                <ul class="list-unstyled mb-3">
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Unlimited Transactions</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Unlimited Accounts</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Portfolio Performance</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Portfolio Summary</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Portfolio Allocations</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Performance Benchmarks</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>FIRE Calculator</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Data Import and Export</span>
+                    <span
+                      class="align-items-center d-flex ml-1"
+                      matTooltipPosition="above"
+                      [matTooltip]="importAndExportTooltipPremium"
+                    >
+                      <ion-icon name="information-circle-outline"></ion-icon>
+                    </span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Professional Data Provider</span>
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <a i18n [routerLink]="['/features']"
+                      >and more Features...</a
+                    >
+                  </li>
+                  <li class="align-items-center d-flex mb-1">
+                    <ion-icon
+                      class="mr-1"
+                      name="checkmark-circle-outline"
+                    ></ion-icon>
+                    <span i18n>Email and Chat Support</span>
+                  </li>
+                </ul>
               </div>
-              <p i18n>
-                For ambitious investors who need the full picture of their
-                financial assets.
+              <p i18n>Fully managed Ghostfolio cloud offering.</p>
+              <p class="h5 text-right" [hidden]="!price">
+                <span class="font-weight-normal">
+                  <ng-container *ngIf="coupon"
+                    ><del class="text-muted"
+                      >{{ baseCurrency }}&nbsp;{{ price }}</del
+                    >&nbsp;{{ baseCurrency }}&nbsp;<strong
+                      >{{ price - coupon }}</strong
+                    >
+                  </ng-container>
+                  <ng-container *ngIf="!coupon"
+                    >{{ baseCurrency }}&nbsp;<strong
+                      >{{ price }}</strong
+                    ></ng-container
+                  >&nbsp;<span>per year</span></span
+                >
               </p>
-              <ul class="list-unstyled mb-3">
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Unlimited Transactions</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Unlimited Accounts</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Portfolio Performance</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Portfolio Summary</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Portfolio Allocations</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Performance Benchmarks</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>FIRE Calculator</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Data Import and Export</span>
-                  <span
-                    class="align-items-center d-flex ml-1"
-                    matTooltipPosition="above"
-                    [matTooltip]="importAndExportTooltipPremium"
+              <div
+                *ngIf="user?.subscription?.type === 'Basic'"
+                class="mt-3 text-center"
+              >
+                <a color="primary" mat-flat-button [routerLink]="['/account']">
+                  <ng-container
+                    *ngIf="user.subscription.offer === 'default'"
+                    i18n
+                    >Upgrade Plan</ng-container
                   >
-                    <ion-icon name="information-circle-outline"></ion-icon>
-                  </span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Professional Data Provider</span>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <a i18n [routerLink]="['/features']">and more Features...</a>
-                </li>
-                <li class="align-items-center d-flex mb-1">
-                  <ion-icon
-                    class="mr-1"
-                    name="checkmark-circle-outline"
-                  ></ion-icon>
-                  <span i18n>Email and Chat Support</span>
-                </li>
-              </ul>
-            </div>
-            <p i18n>Fully managed Ghostfolio cloud offering.</p>
-            <p class="h5 text-right" [hidden]="!price">
-              <span class="font-weight-normal">
-                <ng-container *ngIf="coupon"
-                  ><del class="text-muted"
-                    >{{ baseCurrency }}&nbsp;{{ price }}</del
-                  >&nbsp;{{ baseCurrency }}&nbsp;<strong
-                    >{{ price - coupon }}</strong
+                  <ng-container
+                    *ngIf="user.subscription.offer === 'renewal'"
+                    i18n
+                    >Renew Plan</ng-container
                   >
-                </ng-container>
-                <ng-container *ngIf="!coupon"
-                  >{{ baseCurrency }}&nbsp;<strong
-                    >{{ price }}</strong
-                  ></ng-container
-                >&nbsp;<span>per year</span></span
-              >
-            </p>
-            <div
-              *ngIf="user?.subscription?.type === 'Basic'"
-              class="mt-3 text-center"
-            >
-              <a color="primary" mat-flat-button [routerLink]="['/account']">
-                <ng-container *ngIf="user.subscription.offer === 'default'" i18n
-                  >Upgrade Plan</ng-container
-                >
-                <ng-container *ngIf="user.subscription.offer === 'renewal'" i18n
-                  >Renew Plan</ng-container
-                >
-              </a>
-              <p class="m-0 text-muted">
-                <small i18n>One-time payment, no auto-renewal.</small>
-              </p>
-            </div>
+                </a>
+                <p class="m-0 text-muted">
+                  <small i18n>One-time payment, no auto-renewal.</small>
+                </p>
+              </div>
+            </mat-card-content>
           </mat-card>
         </div>
       </div>

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatCardModule } from '@angular/material/card';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';

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

@@ -13,7 +13,7 @@
     }
   }
 
-  .mat-card {
+  .mat-mdc-card {
     &:hover,
     &.active {
       border-color: rgba(var(--palette-primary-500), 1);

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

@@ -9,7 +9,7 @@
   </div>
   <div class="proportion-charts row">
     <div class="col-md-12 allocations-by-symbol">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="text-truncate" i18n>Holdings</mat-card-title>
         </mat-card-header>
@@ -25,7 +25,7 @@
       </mat-card>
     </div>
     <div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="text-truncate" i18n>Currencies</mat-card-title>
         </mat-card-header>
@@ -40,7 +40,7 @@
       </mat-card>
     </div>
     <div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="text-truncate" i18n>Sectors</mat-card-title>
         </mat-card-header>
@@ -55,7 +55,7 @@
       </mat-card>
     </div>
     <div *ngIf="portfolioPublicDetails?.hasDetails" class="col-md-4">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="text-truncate" i18n>Continents</mat-card-title>
         </mat-card-header>
@@ -71,16 +71,18 @@
   </div>
   <div *ngIf="portfolioPublicDetails?.hasDetails" class="row world-map-chart">
     <div class="col-lg">
-      <mat-card class="mb-3">
+      <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
         </mat-card-header>
         <mat-card-content>
-          <gf-world-map-chart
-            format="{0}%"
-            [countries]="countries"
-            [isInPercent]="true"
-          ></gf-world-map-chart>
+          <div class="world-map-chart-container">
+            <gf-world-map-chart
+              format="{0}%"
+              [countries]="countries"
+              [isInPercent]="true"
+            ></gf-world-map-chart>
+          </div>
           <div class="row">
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value

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

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

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

@@ -9,8 +9,8 @@
   }
 
   .world-map-chart {
-    .mat-card {
-      .mat-card-content {
+    .mat-mdc-card {
+      .world-map-chart-container {
         aspect-ratio: 16 / 9;
       }
     }

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

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 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';
 
@@ -15,7 +14,6 @@ import { ShowAccessTokenDialogModule } from './show-access-token-dialog/show-acc
     CommonModule,
     GfLogoModule,
     MatButtonModule,
-    MatCardModule,
     RegisterPageRoutingModule,
     RouterModule,
     ShowAccessTokenDialogModule

apps/client/src/styles.scss

@@ -236,15 +236,6 @@ body {
       @include gf-table(true);
     }
 
-    .mat-card {
-      background: var(--dark-background);
-
-      &:not([class*='mat-elevation-z']) {
-        border-color: rgba(var(--light-dividers));
-        box-shadow: none;
-      }
-    }
-
     .mat-dialog-container {
       background: var(--dark-background);
     }
@@ -374,17 +365,6 @@ ngx-skeleton-loader {
   font-weight: unset;
 }
 
-.mat-card {
-  &:not([class*='mat-elevation-z']) {
-    border: 1px solid rgba(var(--dark-dividers));
-    box-shadow: none;
-  }
-}
-
-.mat-card-header-text {
-  margin: 0 !important;
-}
-
 .mat-mdc-button-base {
   .mdc-button__label {
     align-items: center;