tabbar styles update

OasisDEX · Oct 25, 2024 · 619bde7 · 619bde7
1 parent 65c0576
commit 619bde7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 16 deletions.
diff --git a/packages/app-earn-ui/src/components/molecules/TabBar/TabBar.module.scss b/packages/app-earn-ui/src/components/molecules/TabBar/TabBar.module.scss
@@ -30,14 +30,14 @@
   background: none;
   border: none;
   font-size: 16px;
-  color: #ccc;
+  color: var(--earn-protocol-secondary-40);
   transition: color 0.3s ease;
   white-space: nowrap; /* Prevent text wrapping for tabs */
   flex-shrink: 0; /* Ensure buttons don't shrink when content is wide */
   position: relative;
 
   &:hover {
-    color: #fff;
+    color: var(--earn-protocol-secondary-100);
   }
 
   &:focus {
@@ -46,7 +46,7 @@
 }
 
 .active {
-  color: #fff;
+  color: var(--earn-protocol-secondary-100);
   position: relative;
 }
 

diff --git a/packages/app-earn-ui/src/components/molecules/TabBar/TabBar.tsx b/packages/app-earn-ui/src/components/molecules/TabBar/TabBar.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React, { useEffect, useRef, useState } from 'react'
+import { type FC, type ReactNode, useEffect, useRef, useState } from 'react'
 
 import { Text } from '@/components/atoms/Text/Text'
 
@@ -9,15 +9,15 @@ import { type ClassNames as TextClassNames } from '@/components/atoms/Text/Text.
 interface Tab {
   id: string
   label: string
-  content: React.ReactNode
+  content: ReactNode
 }
 
 interface TabBarProps {
   tabs: Tab[]
   textVariant?: TextClassNames
 }
 
-export const TabBar: React.FC<TabBarProps> = ({ tabs, textVariant = 'p2semi' }) => {
+export const TabBar: FC<TabBarProps> = ({ tabs, textVariant = 'p2semi' }) => {
   const [activeIndex, setActiveIndex] = useState(0)
   const [underlineStyle, setUnderlineStyle] = useState<{ left: number; width: number }>({
     left: 0,
@@ -48,16 +48,7 @@ export const TabBar: React.FC<TabBarProps> = ({ tabs, textVariant = 'p2semi' })
               className={`${styles.tabButton} ${activeIndex === index ? styles.active : ''}`}
               onClick={() => setActiveIndex(index)}
             >
-              <Text
-                as="p"
-                variant={textVariant}
-                style={{
-                  color:
-                    activeIndex === index
-                      ? 'var(--earn-protocol-secondary-100)'
-                      : 'var(--earn-protocol-secondary-60)',
-                }}
-              >
+              <Text as="p" variant={textVariant}>
                 {tab.label}
               </Text>
             </button>