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"
       >
+        <mat-card-content>
           <gf-no-transactions-info-indicator
             [hasBorder]="false"
-        ></gf-no-transactions-info-indicator>
+          ></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 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 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 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 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
+        *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 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 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,15 +10,18 @@
       </div>
       <div class="row">
         <div class="col-xs-12 col-md-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
+          <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">
+          <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">
@@ -26,10 +29,12 @@
                   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">
+          <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">
@@ -37,20 +42,24 @@
                   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">
+          <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">
+          <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">
@@ -58,10 +67,12 @@
                   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">
+          <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">
@@ -69,10 +80,12 @@
                   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">
+          <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">
@@ -80,18 +93,22 @@
                   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">
+          <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">
+          <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">
@@ -99,10 +116,12 @@
                   (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">
+          <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>
@@ -117,10 +136,12 @@
                   <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">
+          <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>
@@ -130,53 +151,63 @@
                   ></gf-premium-indicator>
                 </h4>
                 <p class="m-0">
-                Check the allocations of your portfolio by account, asset class,
-                currency, region, and sector.
+                  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">
+          <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.
+                  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">
+          <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.
+                  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">
+          <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']"
+                  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 class="d-flex flex-column h-100">
+          <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>
@@ -190,10 +221,12 @@
                   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 class="d-flex flex-column h-100">
+          <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">
@@ -204,10 +237,12 @@
                   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 class="d-flex flex-column h-100">
+          <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">
@@ -221,10 +256,12 @@
                   trends.
                 </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">
+          <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">
@@ -237,6 +274,7 @@
                   (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 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
-        platforms.
+        </mat-card-content>
       </mat-card>
     </div>
     <div class="col-md-4 my-2">
-      <mat-card>
+      <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 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,7 +351,8 @@
       <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">
+      <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">
@@ -348,26 +360,31 @@
             </div>
           </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">
+      <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 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">
+      <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 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>
+          <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,7 +29,8 @@
       </div>
       <div class="row">
         <div class="col-xs-12 col-lg-4 mb-3">
-          <mat-card class="d-flex flex-column h-100">
+          <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>
@@ -105,7 +106,9 @@
                       class="mr-1"
                       name="checkmark-circle-outline"
                     ></ion-icon>
-                  <a i18n [routerLink]="['/features']">and more Features...</a>
+                    <a i18n [routerLink]="['/features']"
+                      >and more Features...</a
+                    >
                   </li>
                   <li class="align-items-center d-flex mb-1">
                     <ion-icon
@@ -127,13 +130,16 @@
                   <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' }"
           >
+            <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>
@@ -193,13 +199,16 @@
                   <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' }"
           >
+            <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">
@@ -293,7 +302,9 @@
                       class="mr-1"
                       name="checkmark-circle-outline"
                     ></ion-icon>
-                  <a i18n [routerLink]="['/features']">and more Features...</a>
+                    <a i18n [routerLink]="['/features']"
+                      >and more Features...</a
+                    >
                   </li>
                   <li class="align-items-center d-flex mb-1">
                     <ion-icon
@@ -326,10 +337,14 @@
                 class="mt-3 text-center"
               >
                 <a color="primary" mat-flat-button [routerLink]="['/account']">
-                <ng-container *ngIf="user.subscription.offer === 'default'" i18n
+                  <ng-container
+                    *ngIf="user.subscription.offer === 'default'"
+                    i18n
                     >Upgrade Plan</ng-container
                   >
-                <ng-container *ngIf="user.subscription.offer === 'renewal'" i18n
+                  <ng-container
+                    *ngIf="user.subscription.offer === 'renewal'"
+                    i18n
                     >Renew Plan</ng-container
                   >
                 </a>
@@ -337,6 +352,7 @@
                   <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>
+          <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;