clean up inline tab styles

ourzora · Aug 15, 2023 · e9ffabd · e9ffabd
1 parent 54b60fe
commit e9ffabd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 25 deletions.
diff --git a/apps/web/src/modules/auction/components/ViewSwitcher.tsx b/apps/web/src/modules/auction/components/ViewSwitcher.tsx
@@ -2,9 +2,8 @@ import { Button, Flex, Text } from '@zoralabs/zord'
 import React, { ReactNode } from 'react'
 
 import {
+  buttonTab,
   newTag,
-  selectedTab,
-  unselectedTab,
 } from 'src/modules/dao/components/AuctionChart/AuctionChart.css'
 import { TopSectionView } from 'src/modules/dao/components/DaoTopSection'
 
@@ -31,7 +30,9 @@ export const ViewSwitcher = ({
             px={'x0'}
             mr={'x3'}
             onClick={() => setTopSectionView(view)}
-            className={view === topSectionView ? selectedTab : unselectedTab}
+            className={
+              view === topSectionView ? buttonTab['selected'] : buttonTab['unselected']
+            }
           >
             {view}
             {view === 'chart' && (

diff --git a/apps/web/src/modules/dao/components/AuctionChart/AuctionChart.css.ts b/apps/web/src/modules/dao/components/AuctionChart/AuctionChart.css.ts
@@ -1,21 +1,32 @@
-import { style } from '@vanilla-extract/css'
+import { style, styleVariants } from '@vanilla-extract/css'
 
 import { skeletonAnimation } from 'src/styles/animations.css'
 
-export const selectedTab = style({
-  borderBottom: '2px solid black',
-  borderBottomLeftRadius: '0px',
-  borderBottomRightRadius: '0px',
+const tabBase = style({
   textTransform: 'capitalize',
   width: 'fit-content',
-})
-export const unselectedTab = style({
-  borderBottom: '2px solid transparent',
   borderBottomLeftRadius: '0px',
   borderBottomRightRadius: '0px',
-  textTransform: 'capitalize',
-  width: 'fit-content',
 })
+const selected = style({
+  borderBottom: '2px solid black',
+})
+const unselected = style({
+  borderBottom: '2px solid transparent',
+})
+const inner = style({
+  fontSize: '14px',
+  fontWeight: 500,
+  height: 'fit-content',
+})
+
+export const buttonTab = styleVariants({
+  selected: [tabBase, selected],
+  unselected: [tabBase, unselected],
+  innerSelected: [tabBase, selected, inner],
+  innerUnselected: [tabBase, unselected, inner],
+})
+
 export const chartSkeleton = style({
   animation: skeletonAnimation,
   height: '330px',

diff --git a/apps/web/src/modules/dao/components/AuctionChart/Layouts.tsx b/apps/web/src/modules/dao/components/AuctionChart/Layouts.tsx
@@ -3,21 +3,18 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import React, { ReactNode, useMemo } from 'react'
 
-
 import { AuctionHistory, StartTimes } from './AuctionChart'
 import {
+  buttonTab,
   chartSkeleton,
   displayPanelBox,
   innerBox,
   outerBox,
-  selectedTab,
-  unselectedTab,
   viewBox,
 } from './AuctionChart.css'
 
 export const AuctionGraphLayout = ({
   chart,
-  viewSwitcher,
   startTime,
   setStartTime,
   chartData,
@@ -67,16 +64,12 @@ export const AuctionGraphLayout = ({
                   px={'x0'}
                   py={'x2'}
                   height={'x1'}
-                  mr={'x6'}
-                  className={isActive ? selectedTab : unselectedTab}
+                  ml={{ '@initial': 'x4', '@768': 'x6' }}
+                  className={
+                    isActive ? buttonTab['innerSelected'] : buttonTab['innerUnselected']
+                  }
                   onClick={() => setStartTime(value)}
-                  // using md and inline to override the default width properties from zord
                   size="md"
-                  style={{
-                    fontSize: '14px',
-                    fontWeight: 500,
-                    height: 'fit-content',
-                  }}
                 >
                   {label}
                 </Button>