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

@@ -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';

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>

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;

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>

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"

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';

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;
         }

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"

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';

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;
         }

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>

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"

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';

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;
-        }
       }
     }
   }

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';
 

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"

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';

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;
         }