website refactor

apps/website/components/races/UpcomingRaceItem.tsx

@@ -1,7 +1,6 @@
 
 
 import { Badge } from '@/ui/Badge';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
@@ -31,15 +30,15 @@ export function UpcomingRaceItem({
       className="hover:border-primary-accent/30 transition-colors bg-panel-gray/20 group"
     >
       <Stack direction="row" align="center" gap={4}>
-        <Box w="1" h="8" bg="primary-accent" opacity={0.3} className="group-hover:opacity-100 transition-opacity" />
-        <Box flexGrow={1}>
+        <Stack w="1" h="8" bg="primary-accent" opacity={0.3} className="group-hover:opacity-100 transition-opacity" />
+        <Stack flexGrow={1}>
           <Text color="text-white" weight="bold" block className="tracking-tight">
             {track}
           </Text>
           <Text size="xs" color="text-gray-500" block weight="medium" className="uppercase tracking-widest mt-0.5">
             {car}
           </Text>
-        </Box>
+        </Stack>
         <Stack align="end" gap={1}>
           <Text size="xs" color="text-gray-400" font="mono" weight="bold">
             {formattedDate}
@@ -50,11 +49,11 @@ export function UpcomingRaceItem({
         </Stack>
       </Stack>
       {isMyLeague && (
-        <Box mt={3} display="flex" justifyContent="end">
+        <Stack mt={3} display="flex" justifyContent="end">
           <Badge variant="success" size="xs">
             YOUR LEAGUE
           </Badge>
-        </Box>
+        </Stack>
       )}
     </Surface>
   );