From f99c86b173b7965cffb35fca98757d1cc7745dea Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Fri, 20 Jun 2025 11:34:57 +0700
Subject: [PATCH] styling update

---
 .../components/pricing-modal/src/lib/pricing-modal.tsx     | 3 ++-
 .../libs/components/tab-selector/src/lib/tab-selector.tsx  | 7 ++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx b/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx
index 3767b8b743..5f7a710272 100644
--- a/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx
+++ b/frontend/libs/components/pricing-modal/src/lib/pricing-modal.tsx
@@ -185,7 +185,8 @@ export function PricingModal({
               onTabChange={setBillingType}
               className="w-fit"
               tabClassName="w-24 text-md"
-              selectedTabClassName="bg-white text-black"
+              indicatorClassName="bg-white"
+              selectedTabClassName="text-black"
             />
             <span className="bg-primary text-white px-3 py-0.5 rounded-full text-sm font-medium -top-3 -left-6 absolute pointer-events-none">
               -{pricingConfig.yearlyDiscount}%
diff --git a/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx b/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx
index 68f96ac0c6..029da6bb3b 100644
--- a/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx
+++ b/frontend/libs/components/tab-selector/src/lib/tab-selector.tsx
@@ -16,6 +16,7 @@ interface TabSelectorProps {
   disabled?: boolean;
   disabledMessage?: string;
   tabClassName?: string;
+  indicatorClassName?: string;
   selectedTabClassName?: string;
 }
 
@@ -27,6 +28,7 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
   disabled,
   disabledMessage,
   tabClassName,
+  indicatorClassName,
   selectedTabClassName,
 }) => {
   // Find the index of the active tab
@@ -67,7 +69,10 @@ export const TabSelector: React.FC<TabSelectorProps> = ({
         <TabList className="glass glass-no-hover relative inline-flex min-w-fit overflow-x-auto rounded-lg p-0.5 py-1 !shadow-none">
           {/* Animated indicator */}
           <div
-            className="absolute top-1 z-10 h-[calc(100%-8px)] rounded-md bg-primary/30 transition-all duration-200 ease-in-out"
+            className={twMerge(
+              "absolute top-1 z-10 h-[calc(100%-8px)] rounded-md bg-primary/30 transition-all duration-200 ease-in-out",
+              indicatorClassName
+            )}
             style={{
               left: indicatorStyle.left,
               width: indicatorStyle.width,