website refactor

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>
   );
 }