website refactor

apps/website/components/drivers/DriverTableRow.tsx

@@ -3,7 +3,6 @@
 import React from 'react';
 import { RatingBadge } from '@/components/drivers/RatingBadge';
 import { Text } from '@/ui/Text';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Image } from '@/ui/Image';
 
@@ -29,7 +28,7 @@ export function DriverTableRow({
   const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';
 
   return (
-    <Box 
+    <Stack 
       as="tr" 
       onClick={onClick}
       cursor="pointer"
@@ -39,7 +38,7 @@ export function DriverTableRow({
       borderBottom
       borderColor="border-charcoal-outline/50"
     >
-      <Box as="td" px={6} py={4} textAlign="center">
+      <Stack as="td" px={6} py={4} textAlign="center">
         <Text 
           size="sm" 
           weight="bold" 
@@ -48,17 +47,17 @@ export function DriverTableRow({
         >
           {rank}
         </Text>
-      </Box>
-      <Box as="td" px={6} py={4}>
+      </Stack>
+      <Stack as="td" px={6} py={4}>
         <Stack direction="row" align="center" gap={3}>
-          <Box position="relative" h="8" w="8" overflow="hidden" rounded="full" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal">
+          <Stack position="relative" h="8" w="8" overflow="hidden" rounded="full" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal">
             <Image 
               src={avatarUrl || defaultAvatar} 
               alt={name} 
               fill 
               objectFit="cover"
             />
-          </Box>
+          </Stack>
           <Text 
             size="sm" 
             weight="semibold" 
@@ -69,18 +68,18 @@ export function DriverTableRow({
             {name}
           </Text>
         </Stack>
-      </Box>
-      <Box as="td" px={6} py={4}>
+      </Stack>
+      <Stack as="td" px={6} py={4}>
         <Text size="xs" color="text-gray-400">{nationality}</Text>
-      </Box>
-      <Box as="td" px={6} py={4} textAlign="right">
+      </Stack>
+      <Stack as="td" px={6} py={4} textAlign="right">
         <RatingBadge rating={rating} size="sm" />
-      </Box>
-      <Box as="td" px={6} py={4} textAlign="right">
+      </Stack>
+      <Stack as="td" px={6} py={4} textAlign="right">
         <Text size="sm" weight="semibold" font="mono" color="text-performance-green">
           {wins}
         </Text>
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }