From 619bde70f1cf8e83c027ca340e30fb241f521dad Mon Sep 17 00:00:00 2001
From: sebastianPiekarczyk <sebastian@oazoapps.com>
Date: Fri, 25 Oct 2024 15:07:26 +0200
Subject: [PATCH] tabbar styles update

---
 .../molecules/TabBar/TabBar.module.scss         |  6 +++---
 .../src/components/molecules/TabBar/TabBar.tsx  | 17 ++++-------------
 2 files changed, 7 insertions(+), 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
index 4c4eed80f..0e47bf385 100644
--- 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
index 5849ef40c..efecf8b1d 100644
--- 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,7 +9,7 @@ import { type ClassNames as TextClassNames } from '@/components/atoms/Text/Text.
 interface Tab {
   id: string
   label: string
-  content: React.ReactNode
+  content: ReactNode
 }
 
 interface TabBarProps {
@@ -17,7 +17,7 @@ interface TabBarProps {
   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>