From 94bd32499b25227d83315ec3e7d9dfcb6637e1a2 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Thu, 7 Aug 2025 01:17:58 +0700
Subject: [PATCH] fix(styles): replace variables overrides with mixin

---
 apps/client/src/styles.scss       | 19 -------------------
 apps/client/src/styles/theme.scss | 29 +++++++++++++++++------------
 2 files changed, 17 insertions(+), 31 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 95eaa2def..ba13e6240 100644
--- a/apps/client/src/styles/theme.scss
+++ b/apps/client/src/styles/theme.scss
@@ -175,15 +175,6 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
       row-item-outline-color: rgba(var(--dark-dividers))
     )
   );
-  @include mat.tabs-overrides(
-    (
-      active-focus-label-text-color: var(--gf-theme-primary-500),
-      active-hover-label-text-color: var(--gf-theme-primary-500),
-      active-label-text-color: var(--gf-theme-primary-500),
-      active-ripple-color: var(--gf-theme-primary-500),
-      inactive-ripple-color: var(--gf-theme-primary-500)
-    )
-  );
 
   --mdc-outlined-card-container-color: unset;
 }
@@ -222,17 +213,31 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
       row-item-outline-color: rgba(var(--light-dividers))
     )
   );
+
+  --mdc-outlined-card-container-color: unset;
+}
+
+.theme-dark,
+.theme-light {
+  @media (max-width: 575.98px) {
+    @include mat.tabs-overrides(
+      (
+        container-height: 3rem
+      )
+    );
+  }
   @include mat.tabs-overrides(
     (
       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),
-      inactive-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 {