website refactor

apps/website/components/races/RaceListItem.tsx

@@ -4,6 +4,8 @@ import { Badge } from '@/ui/Badge';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { RaceCard, RaceTimeColumn, RaceInfo } from '@/ui/RaceCard';
 import { Car, Trophy, Zap, ArrowRight, Clock, PlayCircle, CheckCircle2, XCircle, HelpCircle } from 'lucide-react';
 import React from 'react';
@@ -61,7 +63,7 @@ export function RaceListItem({
         isLive={isLive}
       />
 
-      <div style={{ width: '1px', height: '2.5rem', backgroundColor: 'var(--ui-color-border-muted)', opacity: 0.2 }} />
+      <Box width="1px" height="2.5rem" bg="var(--ui-color-border-muted)" opacity={0.2} />
 
       <RaceInfo
         title={track}
@@ -73,12 +75,12 @@ export function RaceListItem({
           </Badge>
         }
         meta={
-          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+          <Group gap={4}>
             {strengthOfField && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+              <Group gap={1}>
                 <Icon icon={Zap} size={3.5} intent="warning" />
                 <Text size="sm" variant="low">SOF {strengthOfField}</Text>
-              </div>
+              </Group>
             )}
             {leagueName && leagueHref && (
               <Link
@@ -86,14 +88,14 @@ export function RaceListItem({
                 onClick={(e) => e.stopPropagation()}
                 variant="primary"
               >
-                <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                <Group gap={1}>
                   <Icon icon={Trophy} size={3.5} intent="primary" />
                   <Text size="sm" variant="primary">{leagueName}</Text>
                   <Icon icon={ArrowRight} size={3} intent="primary" />
-                </div>
+                </Group>
               </Link>
             )}
-          </div>
+          </Group>
         }
       />
     </RaceCard>

apps/website/components/races/RaceResultRow.tsx

@@ -5,6 +5,10 @@ import { Image } from '@/ui/Image';
 import { ResultRow, PositionBadge, ResultPoints } from '@/ui/ResultRow';
 import { Text } from '@/ui/Text';
 import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import React from 'react';
 
 interface ResultEntry {
@@ -35,37 +39,56 @@ export function RaceResultRow({ result, points }: RaceResultRowProps) {
       <PositionBadge position={position} />
 
       {/* Avatar */}
-      <div style={{ position: 'relative', flexShrink: 0 }}>
-        <div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '9999px', overflow: 'hidden', border: isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : '1px solid var(--ui-color-border-default)' }}>
+      <Box position="relative" flexShrink={0}>
+        <Surface 
+          width="2.5rem" 
+          height="2.5rem" 
+          rounded="full" 
+          overflow="hidden" 
+          border={isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : true}
+        >
           <Image src={driverAvatar} alt={driverName} width={40} height={40} objectFit="cover" />
-        </div>
-        <div style={{ position: 'absolute', bottom: '-0.125rem', right: '-0.125rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: 'var(--ui-color-bg-base)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '0.625rem' }}>
-          {CountryFlagDisplay.fromCountryCode(country).toString()}
-        </div>
-      </div>
+        </Surface>
+        <Surface 
+          position="absolute" 
+          bottom="-0.125rem" 
+          right="-0.125rem" 
+          width="1.25rem" 
+          height="1.25rem" 
+          rounded="full" 
+          variant="dark" 
+          display="flex" 
+          alignItems="center" 
+          justifyContent="center"
+        >
+          <Text size="xs" style={{ fontSize: '0.625rem' }}>
+            {CountryFlagDisplay.fromCountryCode(country).toString()}
+          </Text>
+        </Surface>
+      </Box>
 
       {/* Driver Info */}
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+      <Stack flex={1} minWidth="0" gap={1}>
+        <Group gap={2}>
           <Text weight="semibold" size="sm" variant={isCurrentUser ? 'primary' : 'high'} truncate>{driverName}</Text>
           {isCurrentUser && (
             <Badge variant="primary" size="sm">YOU</Badge>
           )}
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginTop: '0.25rem' }}>
+        </Group>
+        <Group gap={2}>
           <Text size="xs" variant="low">{car}</Text>
           <Text size="xs" variant="low">•</Text>
           <Text size="xs" variant="low">Laps: {laps}</Text>
           <Text size="xs" variant="low">•</Text>
           <Text size="xs" variant="low">Incidents: {incidents}</Text>
-        </div>
-      </div>
+        </Group>
+      </Stack>
 
       {/* Times */}
-      <div style={{ textAlign: 'right', minWidth: '100px' }}>
+      <Stack textAlign="right" minWidth="100px" gap={1}>
         <Text size="sm" font="mono" variant="high" block>{time}</Text>
-        <Text size="xs" variant="success" block style={{ marginTop: '0.25rem' }}>FL: {fastestLap}</Text>
-      </div>
+        <Text size="xs" variant="success" block>FL: {fastestLap}</Text>
+      </Stack>
 
       {/* Points */}
       <ResultPoints points={points} />

apps/website/components/races/RaceResultsTable.tsx

@@ -5,6 +5,10 @@ import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
 import { Table, TableBody, TableCell, TableHead, TableHeader, 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 { PositionBadge } from '@/ui/ResultRow';
 import { AlertTriangle, ExternalLink } from 'lucide-react';
 import React, { ReactNode } from 'react';
@@ -111,14 +115,14 @@ export function RaceResultsTable({
 
   if (results.length === 0) {
     return (
-      <div style={{ textAlign: 'center', padding: '2rem 0' }}>
+      <Box textAlign="center" paddingY={8}>
         <Text variant="low">No results available</Text>
-      </div>
+      </Box>
     );
   }
 
   return (
-    <div style={{ overflowX: 'auto' }}>
+    <Box overflowX="auto">
       <Table>
         <TableHead>
           <TableRow>
@@ -150,20 +154,20 @@ export function RaceResultsTable({
                   <PositionBadge position={result.position} />
                 </TableCell>
                 <TableCell>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+                  <Group gap={3}>
                     {driver ? (
                       <React.Fragment>
-                        <div style={{ 
-                          width: '2rem', 
-                          height: '2rem', 
-                          borderRadius: '9999px', 
-                          display: 'flex', 
-                          alignItems: 'center', 
-                          justifyContent: 'center', 
-                          flexShrink: 0,
-                          backgroundColor: isCurrentUser ? 'rgba(25, 140, 255, 0.2)' : 'var(--ui-color-bg-surface-muted)',
-                          border: isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : '1px solid var(--ui-color-border-default)'
-                        }}>
+                        <Surface
+                          variant={isCurrentUser ? 'gradient-blue' : 'muted'}
+                          rounded="full"
+                          width="2rem"
+                          height="2rem"
+                          display="flex"
+                          alignItems="center"
+                          justifyContent="center"
+                          flexShrink={0}
+                          border={isCurrentUser ? '2px solid var(--ui-color-intent-primary)' : true}
+                        >
                           <Text
                             size="sm"
                             weight="bold"
@@ -171,24 +175,24 @@ export function RaceResultsTable({
                           >
                             {driver.name.charAt(0)}
                           </Text>
-                        </div>
+                        </Surface>
                         <Link
                           href={`/drivers/${driver.id}`}
                           variant={isCurrentUser ? 'primary' : 'inherit'}
                         >
-                          <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+                          <Group gap={1.5}>
                             <Text weight={isCurrentUser ? 'semibold' : 'normal'}>{driver.name}</Text>
                             {isCurrentUser && (
                               <Badge variant="primary" size="sm">You</Badge>
                             )}
                             <Icon icon={ExternalLink} size={3} intent="low" />
-                          </div>
+                          </Group>
                         </Link>
                       </React.Fragment>
                     ) : (
                       <Text variant="high">{getDriverName(result.driverId)}</Text>
                     )}
-                  </div>
+                  </Group>
                 </TableCell>
                 <TableCell>
                   <Text variant={isFastestLap ? 'success' : 'high'} weight={isFastestLap ? 'medium' : 'normal'}>
@@ -212,20 +216,20 @@ export function RaceResultsTable({
                 </TableCell>
                 <TableCell>
                   {driverPenalties.length > 0 ? (
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+                    <Stack gap={1}>
                       {driverPenalties.map((penalty, idx) => (
-                        <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+                        <Group key={idx} gap={1.5}>
                           <Icon icon={AlertTriangle} size={3} intent="critical" />
                           <Text size="xs" variant="critical">{getPenaltyDescription(penalty)}</Text>
-                        </div>
+                        </Group>
                       ))}
-                    </div>
+                    </Stack>
                   ) : (
                     <Text variant="low">—</Text>
                   )}
                 </TableCell>
                 {isAdmin && (
-                  <TableCell style={{ textAlign: 'right' }}>
+                  <TableCell textAlign="right">
                     {driver && penaltyButtonRenderer && penaltyButtonRenderer(driver)}
                   </TableCell>
                 )}
@@ -234,6 +238,6 @@ export function RaceResultsTable({
           })}
         </TableBody>
       </Table>
-    </div>
+    </Box>
   );
 }

apps/website/components/races/RaceSidebar.tsx

@@ -7,6 +7,8 @@ import { Panel } from '@/ui/Panel';
 import { Icon } from '@/ui/Icon';
 import { SidebarActionLink } from '@/ui/SidebarActionLink';
 import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
 import { Clock, Trophy, Users } from 'lucide-react';
 import React from 'react';
 
@@ -18,18 +20,18 @@ interface RaceSidebarProps {
 
 export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceSidebarProps) {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+    <Stack gap={6}>
       {/* Upcoming This Week */}
       <Panel 
         title="Next Up" 
         description="This week"
       >
         {upcomingRaces.length === 0 ? (
-          <div style={{ padding: '1rem 0', textAlign: 'center' }}>
+          <Box paddingY={4} textAlign="center">
             <Text size="sm" variant="low">No races scheduled this week</Text>
-          </div>
+          </Box>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          <Stack gap={3}>
             {upcomingRaces.map((race) => (
               <SidebarRaceItem
                 key={race.id}
@@ -41,7 +43,7 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
                 onClick={() => onRaceClick(race.id)}
               />
             ))}
-          </div>
+          </Stack>
         )}
       </Panel>
 
@@ -50,11 +52,11 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
         title="Recent Results" 
       >
         {recentResults.length === 0 ? (
-          <div style={{ padding: '1rem 0', textAlign: 'center' }}>
+          <Box paddingY={4} textAlign="center">
             <Text size="sm" variant="low">No completed races yet</Text>
-          </div>
+          </Box>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          <Stack gap={3}>
             {recentResults.map((race) => (
               <SidebarRaceItem
                 key={race.id}
@@ -66,13 +68,13 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
                 onClick={() => onRaceClick(race.id)}
               />
             ))}
-          </div>
+          </Stack>
         )}
       </Panel>
 
       {/* Quick Actions */}
       <Panel title="Quick Actions">
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+        <Stack gap={2}>
           <SidebarActionLink
             href={routes.public.leagues}
             icon={Users}
@@ -83,8 +85,8 @@ export function RaceSidebar({ upcomingRaces, recentResults, onRaceClick }: RaceS
             icon={Trophy}
             label="View Leaderboards"
           />
-        </div>
+        </Stack>
       </Panel>
-    </div>
+    </Stack>
   );
 }

apps/website/components/races/RaceStats.tsx

@@ -1,4 +1,5 @@
 import { StatGrid } from '@/ui/StatGrid';
+import { Box } from '@/ui/Box';
 import { CalendarDays, Clock, Trophy, Zap } from 'lucide-react';
 import React from 'react';
 
@@ -20,12 +21,12 @@ export function RaceStats({ stats }: RaceStatsProps) {
   ];
 
   return (
-    <div style={{ marginTop: '1.5rem' }}>
+    <Box marginTop={6}>
       <StatGrid
         stats={mappedStats}
         columns={{ base: 2, md: 4 }}
         variant="box"
       />
-    </div>
+    </Box>
   );
 }