Bugfix/fix various styles after angular material 16 upgrade (#2212)

* Fix styles

* Update changelog

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Upgraded `Nx` from version `16.5.5` to `16.6.0`
 
+### Fixed
+
+- Fixed the styles of various components (card, progress, tab) after the upgrade to `@angular/material` `16`
+
 ## 1.297.4 - 2023-08-05
 
 ### Added

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

@@ -11,14 +11,9 @@
   padding-bottom: constant(safe-area-inset-bottom);
 
   ::ng-deep {
-    gf-about-page,
-    gf-changelog-page,
-    gf-privacy-policy-page {
-      flex: 1 1 auto;
-      overflow-y: auto;
-    }
-
     .mat-mdc-tab-link-container {
+      --mat-tab-header-active-focus-indicator-color: transparent;
+      --mat-tab-header-active-hover-indicator-color: transparent;
       --mdc-tab-indicator-active-indicator-color: transparent;
 
       .mat-mdc-tab-link {

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

@@ -11,16 +11,9 @@
   padding-bottom: constant(safe-area-inset-bottom);
 
   ::ng-deep {
-    gf-admin-jobs,
-    gf-admin-market-data,
-    gf-admin-overview,
-    gf-admin-settings,
-    gf-admin-users {
-      flex: 1 1 auto;
-      overflow-y: auto;
-    }
-
     .mat-mdc-tab-link-container {
+      --mat-tab-header-active-focus-indicator-color: transparent;
+      --mat-tab-header-active-hover-indicator-color: transparent;
       --mdc-tab-indicator-active-indicator-color: transparent;
 
       .mat-mdc-tab-link {

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

@@ -11,15 +11,9 @@
   padding-bottom: constant(safe-area-inset-bottom);
 
   ::ng-deep {
-    gf-home-holdings,
-    gf-home-market,
-    gf-home-overview,
-    gf-home-summary {
-      flex: 1 1 auto;
-      overflow-y: auto;
-    }
-
     .mat-mdc-tab-link-container {
+      --mat-tab-header-active-focus-indicator-color: transparent;
+      --mat-tab-header-active-hover-indicator-color: transparent;
       --mdc-tab-indicator-active-indicator-color: transparent;
 
       .mat-mdc-tab-link {

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

@@ -31,6 +31,7 @@
   }
 
   .mat-mdc-progress-bar {
+    --mdc-linear-progress-active-indicator-height: 0.5rem;
     --mdc-linear-progress-track-height: 0.5rem;
     border-radius: 0.25rem;
 

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

@@ -11,16 +11,9 @@
   padding-bottom: constant(safe-area-inset-bottom);
 
   ::ng-deep {
-    gf-activities-page,
-    gf-allocations-page,
-    gf-analysis-page,
-    gf-holdings-page,
-    gf-fire-page {
-      flex: 1 1 auto;
-      overflow-y: auto;
-    }
-
     .mat-mdc-tab-link-container {
+      --mat-tab-header-active-focus-indicator-color: transparent;
+      --mat-tab-header-active-hover-indicator-color: transparent;
       --mdc-tab-indicator-active-indicator-color: transparent;
 
       .mat-mdc-tab-link {

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

@@ -11,13 +11,9 @@
   padding-bottom: constant(safe-area-inset-bottom);
 
   ::ng-deep {
-    gf-home-holdings,
-    gf-home-overview {
-      flex: 1 1 auto;
-      overflow-y: auto;
-    }
-
     .mat-mdc-tab-link-container {
+      --mat-tab-header-active-focus-indicator-color: transparent;
+      --mat-tab-header-active-hover-indicator-color: transparent;
       --mdc-tab-indicator-active-indicator-color: transparent;
 
       .mat-mdc-tab-link {

apps/client/src/styles.scss

@@ -253,6 +253,7 @@ body {
 
     .mat-mdc-card {
       --mdc-elevated-card-container-color: var(--dark-background);
+      --mdc-outlined-card-container-color: var(--dark-background);
     }
 
     .mat-mdc-fab {
@@ -262,7 +263,6 @@ body {
       }
     }
 
-    .mat-mdc-paginator,
     .mat-mdc-paginator {
       background-color: rgba(var(--palette-foreground-base-dark), 0.02);
     }
@@ -421,7 +421,6 @@ ngx-skeleton-loader {
   }
 }
 
-.mat-mdc-paginator,
 .mat-mdc-paginator {
   background-color: rgba(var(--palette-foreground-base-light), 0.02);