website refactor

apps/website/components/drivers/DriverEntryRow.tsx

@@ -3,10 +3,9 @@
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
 import { Zap } from 'lucide-react';
 import { Badge } from '@/ui/Badge';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface DriverEntryRowProps {
@@ -29,7 +28,7 @@ export function DriverEntryRow({
   onClick,
 }: DriverEntryRowProps) {
   return (
-    <Box
+    <Stack
       onClick={onClick}
       display="flex"
       alignItems="center"
@@ -43,7 +42,7 @@ export function DriverEntryRow({
       borderColor={isCurrentUser ? 'border-primary-blue/30' : 'transparent'}
       hoverBorderColor={isCurrentUser ? 'primary-blue/40' : 'charcoal-outline/20'}
     >
-      <Box 
+      <Stack 
         display="flex" 
         alignItems="center" 
         justifyContent="center" 
@@ -55,10 +54,10 @@ export function DriverEntryRow({
         style={{ fontWeight: 'bold', fontSize: '0.875rem' }}
       >
         {index + 1}
-      </Box>
+      </Stack>
 
-      <Box position="relative" flexShrink={0}>
-        <Box 
+      <Stack position="relative" flexShrink={0}>
+        <Stack 
           w="10" 
           h="10" 
           rounded="full" 
@@ -74,8 +73,8 @@ export function DriverEntryRow({
             objectFit="cover" 
             fill
           />
-        </Box>
-        <Box 
+        </Stack>
+        <Stack 
           position="absolute" 
           bottom="-0.5" 
           right="-0.5" 
@@ -89,10 +88,10 @@ export function DriverEntryRow({
           style={{ fontSize: '0.625rem' }}
         >
           {CountryFlagDisplay.fromCountryCode(country).toString()}
-        </Box>
-      </Box>
+        </Stack>
+      </Stack>
 
-      <Box flexGrow={1} minWidth="0">
+      <Stack flexGrow={1} minWidth="0">
         <Stack direction="row" align="center" gap={2}>
           <Text 
             weight="semibold" 
@@ -105,7 +104,7 @@ export function DriverEntryRow({
           {isCurrentUser && <Badge variant="primary">You</Badge>}
         </Stack>
         <Text size="xs" color="text-gray-500">{country}</Text>
-      </Box>
+      </Stack>
 
       {rating != null && (
         <Badge variant="warning">
@@ -113,6 +112,6 @@ export function DriverEntryRow({
           {rating}
         </Badge>
       )}
-    </Box>
+    </Stack>
   );
 }