website refactor

apps/website/components/races/RaceResultCard.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import { ChevronRight } from 'lucide-react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
 import { Icon } from '@/ui/Icon';
 import { Link } from '@/ui/Link';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { routes } from '@/lib/routing/RouteConfig';
 
@@ -51,9 +50,9 @@ export function RaceResultCard({
       onClick={onClick}
     >
       <Card p={4} hoverBorderColor="border-primary-accent" transition group bg="bg-surface-charcoal" border borderColor="border-outline-steel">
-        <Box display="flex" alignItems="center" justifyContent="between" mb={2}>
+        <Stack display="flex" alignItems="center" justifyContent="between" mb={2}>
           <Stack direction="row" align="center" gap={3}>
-            <Box 
+            <Stack 
               width="8" 
               height="8" 
               rounded="md" 
@@ -68,16 +67,16 @@ export function RaceResultCard({
               borderColor="border-outline-steel"
             >
               P{position}
-            </Box>
-            <Box>
+            </Stack>
+            <Stack>
               <Text color="text-white" weight="medium" block groupHoverTextColor="text-primary-accent" transition>
                 {track}
               </Text>
               <Text size="sm" color="text-gray-400" block>{car}</Text>
-            </Box>
+            </Stack>
           </Stack>
           <Stack direction="row" align="center" gap={3}>
-            <Box textAlign="right">
+            <Stack textAlign="right">
               <Text size="sm" color="text-gray-400" block>
                 {new Date(scheduledAt).toLocaleDateString('en-US', {
                   month: 'short',
@@ -88,10 +87,10 @@ export function RaceResultCard({
               {showLeague && leagueName && (
                 <Text size="xs" color="text-gray-500" block>{leagueName}</Text>
               )}
-            </Box>
+            </Stack>
             <Icon icon={ChevronRight} size={5} color="text-gray-500" groupHoverTextColor="text-primary-accent" transition />
           </Stack>
-        </Box>
+        </Stack>
         <Stack direction="row" align="center" gap={4}>
           <Text size="xs" color="text-gray-500">Started P{startPosition}</Text>
           <Text size="xs" color="text-gray-500">•</Text>