website refactor

apps/website/components/races/RaceResultsTable.tsx

@@ -2,12 +2,12 @@
 
 import { AlertTriangle, ExternalLink } from 'lucide-react';
 import { ReactNode } from 'react';
-import { Box } from '@/ui/Box';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
 import { Stack } from '@/ui/Stack';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
 import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
 
 type PenaltyTypeDTO =
   | 'time_penalty'
@@ -111,14 +111,14 @@ export function RaceResultsTable({
 
   if (results.length === 0) {
     return (
-      <Box textAlign="center" py={8}>
+      <Stack textAlign="center" py={8} gap={0}>
         <Text color="text-gray-400">No results available</Text>
-      </Box>
+      </Stack>
     );
   }
 
   return (
-    <Box overflow="auto">
+    <Stack overflow="auto" gap={0}>
       <Table>
         <TableHead>
           <TableRow>
@@ -147,14 +147,13 @@ export function RaceResultsTable({
                 variant={isCurrentUser ? 'highlight' : 'default'}
               >
                 <TableCell>
-                  <Box 
-                    display="inline-flex" 
-                    center 
-                    width="8" 
-                    height="8" 
+                  <Stack 
+                    direction="row"
+                    align="center"
+                    justify="center"
+                    w="8" 
+                    h="8" 
                     rounded="lg" 
-                    weight="bold" 
-                    size="sm"
                     bg={
                       result.position === 1
                         ? 'bg-yellow-500/20'
@@ -164,38 +163,46 @@ export function RaceResultsTable({
                         ? 'bg-amber-600/20'
                         : undefined
                     }
-                    color={
-                      result.position === 1
-                        ? 'text-yellow-400'
-                        : result.position === 2
-                        ? 'text-gray-300'
-                        : result.position === 3
-                        ? 'text-amber-500'
-                        : 'text-white'
-                    }
                   >
-                    {result.position}
-                  </Box>
+                    <Text
+                      weight="bold"
+                      size="sm"
+                      color={
+                        result.position === 1
+                          ? 'text-yellow-400'
+                          : result.position === 2
+                          ? 'text-gray-300'
+                          : result.position === 3
+                          ? 'text-amber-500'
+                          : 'text-white'
+                      }
+                    >
+                      {result.position}
+                    </Text>
+                  </Stack>
                 </TableCell>
                 <TableCell>
                   <Stack direction="row" align="center" gap={3}>
                     {driver ? (
                       <>
-                        <Box 
-                          width="8" 
-                          height="8" 
+                        <Stack 
+                          w="8" 
+                          h="8" 
                           rounded="full" 
-                          display="flex" 
-                          center 
-                          size="sm" 
-                          weight="bold" 
+                          align="center" 
+                          justify="center" 
                           flexShrink={0}
                           bg={isCurrentUser ? 'bg-primary-blue/30' : 'bg-iron-gray'}
-                          color={isCurrentUser ? 'text-primary-blue' : 'text-gray-400'}
-                          className={isCurrentUser ? 'ring-2 ring-primary-blue/50' : ''}
+                          ring={isCurrentUser ? 'ring-2 ring-primary-blue/50' : undefined}
                         >
-                          {driver.name.charAt(0)}
-                        </Box>
+                          <Text
+                            size="sm"
+                            weight="bold"
+                            color={isCurrentUser ? 'text-primary-blue' : 'text-gray-400'}
+                          >
+                            {driver.name.charAt(0)}
+                          </Text>
+                        </Stack>
                         <Link
                           href={`/drivers/${driver.id}`}
                           variant="ghost"
@@ -203,9 +210,9 @@ export function RaceResultsTable({
                         >
                           <Text className="group-hover:underline">{driver.name}</Text>
                           {isCurrentUser && (
-                            <Box as="span" px={1.5} py={0.5} ml={1.5} bg="bg-primary-blue" color="text-white" rounded="full" uppercase style={{ fontSize: '10px', fontWeight: 'bold' }}>
+                            <Badge size="xs" variant="primary" bg="bg-primary-blue" color="text-white" rounded="full" style={{ marginLeft: '6px' }}>
                               You
-                            </Box>
+                            </Badge>
                           )}
                           <Icon icon={ExternalLink} size={3} className="ml-1.5 opacity-0 group-hover:opacity-100 transition-opacity" />
                         </Link>
@@ -239,9 +246,9 @@ export function RaceResultsTable({
                   {driverPenalties.length > 0 ? (
                     <Stack gap={1}>
                       {driverPenalties.map((penalty, idx) => (
-                        <Stack key={idx} direction="row" align="center" gap={1.5} color="text-red-400">
-                          <Icon icon={AlertTriangle} size={3} />
-                          <Text size="xs">{getPenaltyDescription(penalty)}</Text>
+                        <Stack key={idx} direction="row" align="center" gap={1.5}>
+                          <Icon icon={AlertTriangle} size={3} color="var(--critical-red)" />
+                          <Text size="xs" color="text-red-400">{getPenaltyDescription(penalty)}</Text>
                         </Stack>
                       ))}
                     </Stack>
@@ -259,6 +266,6 @@ export function RaceResultsTable({
           })}
         </TableBody>
       </Table>
-    </Box>
+    </Stack>
   );
 }