website refactor

apps/website/components/leagues/LeagueTabs.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Link } from '@/ui/Link';
+import { Text } from '@/ui/Text';
 
 interface Tab {
   label: string;
@@ -17,8 +18,8 @@ interface LeagueTabsProps {
 
 export function LeagueTabs({ tabs }: LeagueTabsProps) {
   return (
-    <Box style={{ borderBottom: '1px solid #262626' }}>
-      <Stack direction="row" gap={6} style={{ overflowX: 'auto' }}>
+    <Box borderBottom borderColor="border-charcoal-outline">
+      <Stack direction="row" gap={6} overflow="auto">
         {tabs.map((tab) => (
           <Link
             key={tab.href}
@@ -26,7 +27,12 @@ export function LeagueTabs({ tabs }: LeagueTabsProps) {
             variant="ghost"
           >
             <Box pb={3} px={1}>
-              <span style={{ fontWeight: 500, whiteSpace: 'nowrap' }}>{tab.label}</span>
+              <Text weight="medium" 
+                // eslint-disable-next-line gridpilot-rules/component-classification
+                className="whitespace-nowrap"
+              >
+                {tab.label}
+              </Text>
             </Box>
           </Link>
         ))}