website refactor

apps/website/components/leaderboards/DeltaChip.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
 import { Badge } from '@/ui/Badge';
+import { Group } from '@/ui/Group';
 import { ChevronDown, ChevronUp, Minus } from 'lucide-react';
 import React from 'react';
 
@@ -12,10 +13,10 @@ interface DeltaChipProps {
 export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
   if (value === 0) {
     return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+      <Group gap={1}>
         <Icon icon={Minus} size={3} intent="low" />
         <Text size="xs" font="mono" variant="low">0</Text>
-      </div>
+      </Group>
     );
   }
 
@@ -26,12 +27,12 @@ export function DeltaChip({ value, type = 'rank' }: DeltaChipProps) {
 
   return (
     <Badge variant={variant} size="sm">
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.125rem' }}>
+      <Group gap={0.5}>
         <Icon icon={IconComponent} size={3} />
         <Text size="xs" font="mono" weight="bold">
           {absoluteValue}
         </Text>
-      </div>
+      </Group>
     </Badge>
   );
 }

apps/website/components/leaderboards/LeaderboardFiltersBar.tsx

@@ -2,6 +2,8 @@ import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { ControlBar } from '@/ui/ControlBar';
 import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { Filter, Search } from 'lucide-react';
 import React from 'react';
 
@@ -19,10 +21,10 @@ export function LeaderboardFiltersBar({
   children,
 }: LeaderboardFiltersBarProps) {
   return (
-    <div style={{ marginBottom: '1.5rem' }}>
+    <Box marginBottom={6}>
       <ControlBar
         leftContent={
-          <div style={{ maxWidth: '32rem', width: '100%' }}>
+          <Box maxWidth="32rem" fullWidth>
             <Input
               type="text"
               value={searchQuery}
@@ -31,10 +33,10 @@ export function LeaderboardFiltersBar({
               icon={<Icon icon={Search} size={4} intent="low" />}
               fullWidth
             />
-          </div>
+          </Box>
         }
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+        <Group gap={4}>
           {children}
           <Button
             variant="secondary"
@@ -43,8 +45,8 @@ export function LeaderboardFiltersBar({
           >
             Filters
           </Button>
-        </div>
+        </Group>
       </ControlBar>
-    </div>
+    </Box>
   );
 }

apps/website/components/leaderboards/LeaderboardsHero.tsx

@@ -18,42 +18,42 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
   return (
     <Surface 
       variant="muted" 
-      rounded="2xl" 
+      rounded="xl" 
       border 
       padding={8} 
       position="relative" 
       overflow="hidden" 
-      bg="bg-gradient-to-br from-primary-blue/10 via-deep-charcoal to-graphite-black" 
-      borderColor="border-primary-blue/20"
+      bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.1), var(--ui-color-bg-surface), var(--ui-color-bg-base))" 
+      borderColor="var(--ui-color-border-default)"
     >
       <DecorativeBlur color="blue" size="lg" position="top-right" opacity={10} />
       <DecorativeBlur color="purple" size="md" position="bottom-left" opacity={5} />
 
       <Stack position="relative" zIndex={10}>
-        <Stack direction="row" align="center" gap={4} mb={4}>
-          <Stack 
-            p={3} 
+        <Stack direction="row" align="center" gap={4} marginBottom={4}>
+          <Surface 
+            padding={3} 
             bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))" 
             border 
-            borderColor="border-primary-blue/30"
+            borderColor="rgba(25, 140, 255, 0.3)"
             rounded="xl"
             display="flex"
             alignItems="center"
             justifyContent="center"
           >
-            <Icon icon={Award} size={7} color="text-primary-blue" />
-          </Stack>
+            <Icon icon={Award} size={7} intent="primary" />
+          </Surface>
           <Stack>
-            <Heading level={1} weight="bold" letterSpacing="tight">Leaderboards</Heading>
-            <Text color="text-gray-400" block mt={1} size="sm" uppercase letterSpacing="widest" weight="bold">Precision Performance Tracking</Text>
+            <Heading level={1} weight="bold">Leaderboards</Heading>
+            <Text variant="low" block marginTop={1} size="sm" uppercase weight="bold">Precision Performance Tracking</Text>
           </Stack>
         </Stack>
 
         <Text 
           size="lg" 
-          color="text-gray-400" 
+          variant="low" 
           block 
-          mb={8} 
+          marginBottom={8} 
           leading="relaxed" 
           maxWidth="42rem"
         >
@@ -65,7 +65,6 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
             variant="primary"
             onClick={onNavigateToDrivers}
             icon={<Icon icon={Trophy} size={4} />}
-            shadow="shadow-lg shadow-primary-blue/20"
           >
             Driver Rankings
           </Button>
@@ -73,7 +72,6 @@ export function LeaderboardsHero({ onNavigateToDrivers, onNavigateToTeams }: Lea
             variant="secondary"
             onClick={onNavigateToTeams}
             icon={<Icon icon={Users} size={4} />}
-            hoverBg="bg-white/5"
           >
             Team Rankings
           </Button>

apps/website/components/leaderboards/RankBadge.tsx

@@ -1,5 +1,6 @@
 import { Badge } from '@/ui/Badge';
 import { Text } from '@/ui/Text';
+import { Group } from '@/ui/Group';
 import React from 'react';
 
 interface RankBadgeProps {
@@ -28,10 +29,10 @@ export function RankBadge({ rank, size = 'md' }: RankBadgeProps) {
 
   return (
     <Badge variant={getVariant(rank)} size={size}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-        {medal && <span>{medal}</span>}
+      <Group gap={1}>
+        {medal && <Text size="xs">{medal}</Text>}
         <Text size="xs" weight="bold">#{rank}</Text>
-      </div>
+      </Group>
     </Badge>
   );
 }

apps/website/components/leaderboards/RankMedal.tsx

@@ -1,6 +1,7 @@
 import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
 import { Icon } from '@/ui/Icon';
 import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
 import { Crown, Medal } from 'lucide-react';
 import React from 'react';
 
@@ -33,23 +34,21 @@ export function RankMedal({ rank, size = 'md', showIcon = true }: RankMedalProps
   };
 
   return (
-    <div 
-      style={{ 
-        display: 'flex', 
-        alignItems: 'center', 
-        justifyContent: 'center', 
-        borderRadius: '9999px', 
-        border: '1px solid var(--ui-color-border-default)',
-        height: sizePx[size],
-        width: sizePx[size],
-        backgroundColor: 'var(--ui-color-bg-surface-muted)'
-      }}
+    <Surface 
+      variant="muted"
+      rounded="full"
+      border
+      height={sizePx[size]}
+      width={sizePx[size]}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
     >
       {isTop3 && showIcon ? (
         <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size]} intent={variant as any} />
       ) : (
         <Text weight="bold" size={textSizeMap[size]} variant={variant as any}>{rank}</Text>
       )}
-    </div>
+    </Surface>
   );
 }

apps/website/components/leaderboards/TeamRankingRow.tsx

@@ -2,6 +2,10 @@ import { getMediaUrl } from '@/lib/utilities/media';
 import { Image } from '@/ui/Image';
 import { TableCell, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { RankMedal } from './RankMedal';
 import React from 'react';
 
@@ -34,22 +38,22 @@ export function TeamRankingRow({
       onClick={onClick}
     >
       <TableCell>
-        <div style={{ width: '2rem', display: 'flex', justifyContent: 'center' }}>
+        <Box width="2rem" display="flex" justifyContent="center">
           <RankMedal rank={rank} size="md" />
-        </div>
+        </Box>
       </TableCell>
 
       <TableCell>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
-          <div style={{ 
-            position: 'relative', 
-            width: '2.5rem', 
-            height: '2.5rem', 
-            borderRadius: '0.5rem', 
-            overflow: 'hidden', 
-            border: '1px solid var(--ui-color-border-default)',
-            backgroundColor: 'var(--ui-color-bg-surface-muted)'
-          }}>
+        <Group gap={3}>
+          <Surface 
+            position="relative" 
+            width="2.5rem" 
+            height="2.5rem" 
+            rounded="md" 
+            overflow="hidden" 
+            border 
+            variant="muted"
+          >
             <Image 
               src={logoUrl || getMediaUrl('team-logo', id)} 
               alt={name} 
@@ -57,8 +61,8 @@ export function TeamRankingRow({
               height={40} 
               objectFit="cover" 
             />
-          </div>
-          <div style={{ minWidth: 0 }}>
+          </Surface>
+          <Stack gap={0} flex={1} minWidth="0">
             <Text 
               weight="semibold" 
               variant="high" 
@@ -70,8 +74,8 @@ export function TeamRankingRow({
             <Text size="xs" variant="low" block>
               {memberCount} Members
             </Text>
-          </div>
-        </div>
+          </Stack>
+        </Group>
       </TableCell>
 
       <TableCell textAlign="center">