Merge pull request #595 from curvefi/styling/tabs

styling: sync tab styling with Figma design

Author: 0xAlunara

packages/curve-common/src/widgets/Header/PageTabs.tsx

@@ -31,6 +31,5 @@ export const PageTabs: FunctionComponent<PageTabsProps> = ({ pages, currentApp,
       [currentApp, networkName, pages, selectedApp],
     )}
     variant="overlined"
-    textVariant="headingXsBold"
   />
 )

packages/curve-ui-kit/src/shared/ui/TabsSwitcher.tsx

@@ -2,6 +2,13 @@ import Tabs, { type TabsProps } from '@mui/material/Tabs'
 import Tab, { type TabProps } from '@mui/material/Tab'
 import { TabSwitcherVariants, TABS_VARIANT_CLASSES, TABS_HEIGHT_CLASSES } from '../../themes/tabs'
 import Typography, { type TypographyProps } from '@mui/material/Typography'
+import type { TypographyVariantKey } from '@ui-kit/themes/typography'
+
+const defaultTextVariants = {
+  small: 'buttonS',
+  medium: 'buttonM',
+  large: 'headingMBold',
+} as const satisfies Record<keyof typeof TABS_HEIGHT_CLASSES, TypographyVariantKey>
 
 export type TabOption<T> = Pick<TabProps, 'label' | 'disabled' | 'icon' | 'sx'> & {
   value: T
@@ -20,7 +27,7 @@ export type TabsSwitcherProps<T> = Pick<TabsProps, 'sx'> & {
 
 export const TabsSwitcher = <T extends string | number>({
   variant = 'contained',
-  size = 'medium',
+  size = 'small',
   muiVariant,
   options,
   onChange,
@@ -37,7 +44,12 @@ export const TabsSwitcher = <T extends string | number>({
     {...props}
   >
     {options.map(({ value, label, ...props }) => (
-      <Tab key={value} value={value} label={<Typography variant={textVariant}>{label}</Typography>} {...props} />
+      <Tab
+        key={value}
+        value={value}
+        label={<Typography variant={textVariant ?? defaultTextVariants[size]}>{label}</Typography>}
+        {...props}
+      />
     ))}
   </Tabs>
 )

packages/curve-ui-kit/src/themes/components.ts

@@ -116,7 +116,7 @@ export const createComponents = (design: DesignSystem, typography: TypographyOpt
       },
     },
   },
-  MuiTab: defineMuiTab(),
+  MuiTab: defineMuiTab(design),
   MuiTabs: defineMuiTabs(design),
   MuiToolbar: {
     styleOverrides: {