Feature/migrate header module to angular material 15 (#1725)

* Migrate GfHeaderModule to Angular Material 15

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Increased the file size limit for the activities import
+- Migrated the style of `GfHeaderModule` to `@angular/material` `15` (mdc)
 - Upgraded `angular` from version `15.1.2` to `15.1.5`
 - Upgraded `Nx` from version `15.6.3` to `15.7.2`
 

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

@@ -110,11 +110,7 @@
     </button>
     <mat-menu #accountMenu="matMenu" xPosition="before">
       <ng-container *ngIf="user?.access?.length > 0">
-        <button
+        <button mat-menu-item (click)="impersonateAccount(null)">
-          class="align-items-center d-flex"
-          mat-menu-item
-          (click)="impersonateAccount(null)"
-        >
           <ion-icon
             *ngIf="user?.access?.length > 0"
             class="mr-2"
@@ -128,7 +124,6 @@
         </button>
         <button
           *ngFor="let accessItem of user?.access"
-          class="align-items-center d-flex"
           mat-menu-item
           (click)="impersonateAccount(accessItem.id)"
         >
@@ -147,7 +142,7 @@
         <hr class="m-0" />
       </ng-container>
       <a
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{
@@ -157,7 +152,7 @@
         >Overview</a
       >
       <a
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{
@@ -167,7 +162,7 @@
         >Portfolio</a
       >
       <a
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'accounts' }"
@@ -175,7 +170,6 @@
         >Accounts</a
       >
       <a
-        class="align-items-center d-flex"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'account' }"
@@ -184,7 +178,7 @@
       >
       <a
         *ngIf="hasPermissionToAccessAdminControl"
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'admin' }"
@@ -193,7 +187,7 @@
       >
       <hr class="m-0" />
       <a
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{
@@ -206,7 +200,7 @@
         *ngIf="
           hasPermissionForSubscription && user?.subscription?.type === 'Basic'
         "
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'pricing' }"
@@ -214,14 +208,14 @@
         >Pricing</a
       >
       <a
-        class="d-block d-sm-none"
+        class="d-flex d-sm-none"
         i18n
         mat-menu-item
         [ngClass]="{ 'font-weight-bold': currentRoute === 'about' }"
         [routerLink]="['/about']"
         >About Ghostfolio</a
       >
-      <hr class="d-block d-sm-none m-0" />
+      <hr class="d-flex d-sm-none m-0" />
       <button mat-menu-item (click)="onSignOut()">Logout</button>
     </mat-menu>
   </ng-container>
@@ -283,9 +277,9 @@
       >Markets</a
     >
     <a
-      class="d-none d-sm-block mx-1 no-min-width px-1"
+      class="d-none d-sm-block no-min-width"
       href="https://github.com/ghostfolio/ghostfolio"
-      mat-flat-button
+      mat-icon-button
       ><ion-icon name="logo-github"></ion-icon
     ></a>
     <button class="mx-1" mat-flat-button (click)="openLoginDialog()">

apps/client/src/app/components/header/header.component.scss

@@ -11,7 +11,9 @@
       flex: 1 1 auto;
     }
 
-    .mat-flat-button {
+    .mat-mdc-unelevated-button {
+      height: unset;
+
       &:not(.mat-primary) {
         background-color: transparent;
         text-decoration-color: rgba(var(--palette-primary-500), 1) !important;

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
 import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module';

apps/client/src/styles.scss

@@ -420,6 +420,15 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-mdc-menu-panel {
+  .mat-mdc-menu-item {
+    .mdc-list-item__primary-text {
+      align-items: center;
+      display: flex;
+    }
+  }
+}
+
 .mat-mdc-unelevated-button {
   &:not(:disabled) {
     --mdc-filled-button-label-text-color: rgba(var(--light-primary-text));