From 3453100afd9f3c793d037fb5dc1ce275c996980b Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 9 Apr 2023 08:54:32 +0200
Subject: [PATCH] Feature/migrate various components to angular material 15
 part 2 (#1838)

* Migrate tooltips to Angular Material 15

* Migrate tabs to Angular Material 15
---
 apps/client/src/app/app.module.ts             |  2 +-
 .../admin-overview/admin-overview.html        |  2 +-
 .../home-overview/home-overview.scss          |  1 +
 .../src/app/pages/accounts/accounts-page.html |  2 +-
 .../src/app/pages/admin/admin-page.html       | 18 ++++++++++--------
 .../src/app/pages/admin/admin-page.module.ts  |  2 +-
 .../src/app/pages/admin/admin-page.scss       | 15 +++------------
 apps/client/src/app/pages/home/home-page.html |  8 +++++---
 .../src/app/pages/home/home-page.module.ts    |  2 +-
 apps/client/src/app/pages/home/home-page.scss | 15 +++------------
 .../portfolio/activities/activities-page.html |  2 +-
 .../app/pages/portfolio/portfolio-page.html   |  6 ++++--
 .../pages/portfolio/portfolio-page.module.ts  |  2 +-
 .../app/pages/portfolio/portfolio-page.scss   | 19 +++----------------
 .../app/pages/pricing/pricing-page.module.ts  |  2 +-
 apps/client/src/app/pages/zen/zen-page.html   |  8 +++++---
 .../src/app/pages/zen/zen-page.module.ts      |  2 +-
 apps/client/src/app/pages/zen/zen-page.scss   | 15 +++------------
 18 files changed, 46 insertions(+), 77 deletions(-)

diff --git a/apps/client/src/app/app.module.ts b/apps/client/src/app/app.module.ts
index 3534e5381..ff400bcfb 100644
--- a/apps/client/src/app/app.module.ts
+++ b/apps/client/src/app/app.module.ts
@@ -10,7 +10,7 @@ import {
 import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index 70ea57ed8..9b7c1922c 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="mb-5 row">
+  <div class="row">
     <div class="col">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-content>
diff --git a/apps/client/src/app/components/home-overview/home-overview.scss b/apps/client/src/app/components/home-overview/home-overview.scss
index ab13a3ee2..92f086c5f 100644
--- a/apps/client/src/app/components/home-overview/home-overview.scss
+++ b/apps/client/src/app/components/home-overview/home-overview.scss
@@ -2,6 +2,7 @@
 
 :host {
   display: block;
+  height: 100%;
 
   .chart-container {
     aspect-ratio: 16 / 9;
diff --git a/apps/client/src/app/pages/accounts/accounts-page.html b/apps/client/src/app/pages/accounts/accounts-page.html
index 6b23950d5..77c487f98 100644
--- a/apps/client/src/app/pages/accounts/accounts-page.html
+++ b/apps/client/src/app/pages/accounts/accounts-page.html
@@ -30,7 +30,7 @@
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon class="mt-2" name="add-outline" size="large"></ion-icon>
+      <ion-icon name="add-outline" size="large"></ion-icon>
     </a>
   </div>
 </div>
diff --git a/apps/client/src/app/pages/admin/admin-page.html b/apps/client/src/app/pages/admin/admin-page.html
index 9ecc38dc2..dc9e5329d 100644
--- a/apps/client/src/app/pages/admin/admin-page.html
+++ b/apps/client/src/app/pages/admin/admin-page.html
@@ -1,14 +1,16 @@
-<router-outlet></router-outlet>
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
+  <router-outlet></router-outlet>
+</mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar>
+<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
   <a
-    *ngFor="let link of [
-  { iconName: 'reader-outline', path: 'overview' },
-  { iconName: 'people-outline', path: 'users' },
-  { iconName: 'server-outline', path: 'market-data' },
-  { iconName: 'flash-outline', path: 'jobs' }
-]"
     #rla="routerLinkActive"
+    *ngFor="let link of [
+      { iconName: 'reader-outline', path: 'overview' },
+      { iconName: 'people-outline', path: 'users' },
+      { iconName: 'server-outline', path: 'market-data' },
+      { iconName: 'flash-outline', path: 'jobs' }
+    ]"
     mat-tab-link
     routerLinkActive
     [active]="rla.isActive"
diff --git a/apps/client/src/app/pages/admin/admin-page.module.ts b/apps/client/src/app/pages/admin/admin-page.module.ts
index b3cf5d733..fa7f0e35b 100644
--- a/apps/client/src/app/pages/admin/admin-page.module.ts
+++ b/apps/client/src/app/pages/admin/admin-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { GfAdminJobsModule } from '@ghostfolio/client/components/admin-jobs/admin-jobs.module';
 import { GfAdminMarketDataModule } from '@ghostfolio/client/components/admin-market-data/admin-market-data.module';
 import { GfAdminOverviewModule } from '@ghostfolio/client/components/admin-overview/admin-overview.module';
diff --git a/apps/client/src/app/pages/admin/admin-page.scss b/apps/client/src/app/pages/admin/admin-page.scss
index 72b22f8ce..d5f736ee6 100644
--- a/apps/client/src/app/pages/admin/admin-page.scss
+++ b/apps/client/src/app/pages/admin/admin-page.scss
@@ -19,19 +19,10 @@
       overflow-y: auto;
     }
 
-    .mat-tab-header {
-      border-bottom: 0;
+    .mat-mdc-tab-link-container {
+      --mdc-tab-indicator-active-indicator-color: transparent;
 
-      .mat-ink-bar {
-        visibility: hidden !important;
-      }
-
-      .mat-tab-label-active {
-        color: rgba(var(--palette-primary-500), 1);
-        opacity: 1;
-      }
-
-      .mat-tab-link {
+      .mat-mdc-tab-link {
         &:hover {
           opacity: 0.75;
         }
diff --git a/apps/client/src/app/pages/home/home-page.html b/apps/client/src/app/pages/home/home-page.html
index 38b7ccdb6..803f1a580 100644
--- a/apps/client/src/app/pages/home/home-page.html
+++ b/apps/client/src/app/pages/home/home-page.html
@@ -1,9 +1,11 @@
-<router-outlet></router-outlet>
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
+  <router-outlet></router-outlet>
+</mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar>
+<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
   <a
-    *ngFor="let tab of tabs"
     #rla="routerLinkActive"
+    *ngFor="let tab of tabs"
     mat-tab-link
     routerLinkActive
     [active]="rla.isActive"
diff --git a/apps/client/src/app/pages/home/home-page.module.ts b/apps/client/src/app/pages/home/home-page.module.ts
index 816e0f47b..3493a2855 100644
--- a/apps/client/src/app/pages/home/home-page.module.ts
+++ b/apps/client/src/app/pages/home/home-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.module';
 import { GfHomeMarketModule } from '@ghostfolio/client/components/home-market/home-market.module';
diff --git a/apps/client/src/app/pages/home/home-page.scss b/apps/client/src/app/pages/home/home-page.scss
index dbb6dd2d6..721cc3041 100644
--- a/apps/client/src/app/pages/home/home-page.scss
+++ b/apps/client/src/app/pages/home/home-page.scss
@@ -19,19 +19,10 @@
       overflow-y: auto;
     }
 
-    .mat-tab-header {
-      border-bottom: 0;
+    .mat-mdc-tab-link-container {
+      --mdc-tab-indicator-active-indicator-color: transparent;
 
-      .mat-ink-bar {
-        visibility: hidden !important;
-      }
-
-      .mat-tab-label-active {
-        color: rgba(var(--palette-primary-500), 1);
-        opacity: 1;
-      }
-
-      .mat-tab-link {
+      .mat-mdc-tab-link {
         &:hover {
           opacity: 0.75;
         }
diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.html b/apps/client/src/app/pages/portfolio/activities/activities-page.html
index b825010e9..b0705ccd6 100644
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.html
+++ b/apps/client/src/app/pages/portfolio/activities/activities-page.html
@@ -32,7 +32,7 @@
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon class="mt-2" name="add-outline" size="large"></ion-icon>
+      <ion-icon name="add-outline" size="large"></ion-icon>
     </a>
   </div>
 </div>
diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.html b/apps/client/src/app/pages/portfolio/portfolio-page.html
index ec3c3bfed..8ac81812d 100644
--- a/apps/client/src/app/pages/portfolio/portfolio-page.html
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.html
@@ -1,6 +1,8 @@
-<router-outlet></router-outlet>
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
+  <router-outlet></router-outlet>
+</mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar>
+<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
   <a
     #rla="routerLinkActive"
     *ngFor="let tab of tabs"
diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.module.ts b/apps/client/src/app/pages/portfolio/portfolio-page.module.ts
index a9e43fd15..0291179eb 100644
--- a/apps/client/src/app/pages/portfolio/portfolio-page.module.ts
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 
 import { PortfolioPageRoutingModule } from './portfolio-page-routing.module';
diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.scss b/apps/client/src/app/pages/portfolio/portfolio-page.scss
index 535b5af50..274eee6e7 100644
--- a/apps/client/src/app/pages/portfolio/portfolio-page.scss
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.scss
@@ -20,26 +20,13 @@
       overflow-y: auto;
     }
 
-    .mat-tab-header {
-      border-bottom: 0;
+    .mat-mdc-tab-link-container {
+      --mdc-tab-indicator-active-indicator-color: transparent;
 
-      .mat-ink-bar {
-        visibility: hidden !important;
-      }
-
-      .mat-tab-label-active {
-        color: rgba(var(--palette-primary-500), 1);
-        opacity: 1;
-      }
-
-      .mat-tab-link {
+      .mat-mdc-tab-link {
         &:hover {
           opacity: 0.75;
         }
-
-        @media (max-width: 599px) {
-          min-width: unset;
-        }
       }
     }
   }
diff --git a/apps/client/src/app/pages/pricing/pricing-page.module.ts b/apps/client/src/app/pages/pricing/pricing-page.module.ts
index f21fe6aed..fe408dca9 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.module.ts
+++ b/apps/client/src/app/pages/pricing/pricing-page.module.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 
diff --git a/apps/client/src/app/pages/zen/zen-page.html b/apps/client/src/app/pages/zen/zen-page.html
index 38b7ccdb6..803f1a580 100644
--- a/apps/client/src/app/pages/zen/zen-page.html
+++ b/apps/client/src/app/pages/zen/zen-page.html
@@ -1,9 +1,11 @@
-<router-outlet></router-outlet>
+<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
+  <router-outlet></router-outlet>
+</mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar>
+<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
   <a
-    *ngFor="let tab of tabs"
     #rla="routerLinkActive"
+    *ngFor="let tab of tabs"
     mat-tab-link
     routerLinkActive
     [active]="rla.isActive"
diff --git a/apps/client/src/app/pages/zen/zen-page.module.ts b/apps/client/src/app/pages/zen/zen-page.module.ts
index 7a47633b3..49eb2f9f6 100644
--- a/apps/client/src/app/pages/zen/zen-page.module.ts
+++ b/apps/client/src/app/pages/zen/zen-page.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfHomeHoldingsModule } from '@ghostfolio/client/components/home-holdings/home-holdings.module';
 import { GfHomeOverviewModule } from '@ghostfolio/client/components/home-overview/home-overview.module';
diff --git a/apps/client/src/app/pages/zen/zen-page.scss b/apps/client/src/app/pages/zen/zen-page.scss
index 4a0154291..e6b1ee7c9 100644
--- a/apps/client/src/app/pages/zen/zen-page.scss
+++ b/apps/client/src/app/pages/zen/zen-page.scss
@@ -17,19 +17,10 @@
       overflow-y: auto;
     }
 
-    .mat-tab-header {
-      border-bottom: 0;
+    .mat-mdc-tab-link-container {
+      --mdc-tab-indicator-active-indicator-color: transparent;
 
-      .mat-ink-bar {
-        visibility: hidden !important;
-      }
-
-      .mat-tab-label-active {
-        color: rgba(var(--palette-primary-500), 1);
-        opacity: 1;
-      }
-
-      .mat-tab-link {
+      .mat-mdc-tab-link {
         &:hover {
           opacity: 0.75;
         }