From c6d2f46c6ec9d79420a6ed5a1bb83e7c8cc632b7 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Fri, 8 Aug 2025 01:03:06 +0700
Subject: [PATCH] Feature/restore active state (background color) of sidebar
 navigation (#5327)

* Restore active state of sidebar navigation
---
 apps/client/src/styles.scss       | 19 ----------------
 apps/client/src/styles/theme.scss | 37 ++++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 39acbb69e..c61734c80 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -264,10 +264,6 @@ body {
 
     .page {
       &.has-tabs {
-        .mat-mdc-tab-nav-bar {
-          --mat-tab-inactive-label-text-color: rgba(var(--light-primary-text));
-        }
-
         @media (min-width: 576px) {
           .mat-mdc-tab-header {
             background-color: rgba(var(--palette-foreground-base-dark), 0.02);
@@ -522,23 +518,10 @@ ngx-skeleton-loader {
       }
     }
 
-    .mat-mdc-tab-nav-bar {
-      --mat-tab-active-focus-indicator-color: transparent;
-      --mat-tab-active-hover-indicator-color: transparent;
-      --mat-tab-inactive-label-text-color: rgba(var(--dark-primary-text));
-      --mat-tab-active-indicator-color: transparent;
-    }
-
     .mat-mdc-tab-nav-panel {
       padding: 2rem 0;
     }
 
-    @media (max-width: 575.98px) {
-      .mat-mdc-tab-link {
-        --mat-tab-container-height: 3rem;
-      }
-    }
-
     @media (min-width: 576px) {
       flex-direction: row-reverse;
 
@@ -546,8 +529,6 @@ ngx-skeleton-loader {
         background-color: rgba(var(--palette-foreground-base), 0.02);
         padding: 2rem 0;
         width: 14rem;
-        --mat-tab-label-text-tracking: normal;
-        --mat-tab-container-height: 2rem;
 
         .mat-mdc-tab-links {
           flex-direction: column;
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 460a43d19..1d69f196a 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -165,18 +165,11 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
       title-text-line-height: 1.2
     )
   );
-  @include mat.fab-overrides(
-    (
-      container-color: var(--gf-theme-primary-500)
-    )
-  );
   @include mat.table-overrides(
     (
       row-item-outline-color: rgba(var(--dark-dividers))
     )
   );
-
-  --mdc-outlined-card-container-color: unset;
 }
 
 .theme-dark {
@@ -203,18 +196,40 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
       title-text-line-height: 1.2
     )
   );
+  @include mat.table-overrides(
+    (
+      row-item-outline-color: rgba(var(--light-dividers))
+    )
+  );
+}
+
+.theme-dark,
+.theme-light {
+  @media (max-width: 575.98px) {
+    @include mat.tabs-overrides(
+      (
+        container-height: 3rem
+      )
+    );
+  }
+
   @include mat.fab-overrides(
     (
       container-color: var(--gf-theme-primary-500)
     )
   );
-  @include mat.table-overrides(
+  @include mat.tabs-overrides(
     (
-      row-item-outline-color: rgba(var(--light-dividers))
+      active-focus-label-text-color: var(--gf-theme-primary-500),
+      active-hover-label-text-color: var(--gf-theme-primary-500),
+      active-indicator-height: 0,
+      active-label-text-color: var(--gf-theme-primary-500),
+      active-ripple-color: var(--gf-theme-primary-500),
+      container-height: 2rem,
+      inactive-ripple-color: var(--gf-theme-primary-500),
+      label-text-tracking: normal
     )
   );
-
-  --mdc-outlined-card-container-color: unset;
 }
 
 :root {