From 0821086e413bc60a754f9a0228cf9097add04e91 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Sun, 6 Aug 2023 08:52:45 +0200 Subject: [PATCH] Bugfix/fix various styles after angular material 16 upgrade (#2212) * Fix styles * Update changelog --- CHANGELOG.md | 4 ++++ apps/client/src/app/pages/about/about-page.scss | 9 ++------- apps/client/src/app/pages/admin/admin-page.scss | 11 ++--------- apps/client/src/app/pages/home/home-page.scss | 10 ++-------- .../pages/portfolio/allocations/allocations-page.scss | 1 + .../src/app/pages/portfolio/portfolio-page.scss | 11 ++--------- apps/client/src/app/pages/zen/zen-page.scss | 8 ++------ apps/client/src/styles.scss | 3 +-- 8 files changed, 16 insertions(+), 41 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 02c5591be..96a86f3a9 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/pages/about/about-page.scss b/apps/client/src/app/pages/about/about-page.scss index d34bc25c3..daeb6fc94 100644 --- a/apps/client/src/app/pages/about/about-page.scss +++ b/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 { diff --git a/apps/client/src/app/pages/admin/admin-page.scss b/apps/client/src/app/pages/admin/admin-page.scss index 9e1e9b572..daeb6fc94 100644 --- a/apps/client/src/app/pages/admin/admin-page.scss +++ b/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 { diff --git a/apps/client/src/app/pages/home/home-page.scss b/apps/client/src/app/pages/home/home-page.scss index 721cc3041..daeb6fc94 100644 --- a/apps/client/src/app/pages/home/home-page.scss +++ b/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 { diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss b/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss index b1aab0007..c73ac7fc3 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.scss +++ b/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; diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.scss b/apps/client/src/app/pages/portfolio/portfolio-page.scss index 274eee6e7..daeb6fc94 100644 --- a/apps/client/src/app/pages/portfolio/portfolio-page.scss +++ b/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 { diff --git a/apps/client/src/app/pages/zen/zen-page.scss b/apps/client/src/app/pages/zen/zen-page.scss index e6b1ee7c9..daeb6fc94 100644 --- a/apps/client/src/app/pages/zen/zen-page.scss +++ b/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 { diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss index a84fbab03..36a5b11b4 100644 --- a/apps/client/src/styles.scss +++ b/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);