website refactor

apps/website/components/races/RaceList.tsx

@@ -2,12 +2,11 @@
 
 import { routes } from '@/lib/routing/RouteConfig';
 import type { RaceViewData } from '@/lib/view-data/RacesViewData';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Card } from '@/ui/Card';
 import { DateHeader } from '@/ui/DateHeader';
 import { Icon } from '@/ui/Icon';
 import { RaceListItem } from '@/components/races/RaceListItem';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Calendar, CheckCircle2, Clock, PlayCircle, XCircle } from 'lucide-react';
 
@@ -49,17 +48,17 @@ export function RaceList({ racesByDate, totalCount, onRaceClick }: RaceListProps
     return (
       <Card py={12} textAlign="center" bg="bg-surface-charcoal" border borderColor="border-outline-steel">
         <Stack align="center" gap={4}>
-          <Box p={4} bg="bg-base-black" rounded="full" border borderColor="border-outline-steel">
+          <Stack p={4} bg="bg-base-black" rounded="full" border borderColor="border-outline-steel">
             <Icon icon={Calendar} size={8} color="var(--text-gray-500)" />
-          </Box>
-          <Box>
+          </Stack>
+          <Stack>
             <Text weight="medium" color="text-white" block mb={1}>No races found</Text>
             <Text size="sm" color="text-gray-500">
               {totalCount === 0
                 ? 'No races have been scheduled yet'
                 : 'Try adjusting your filters'}
             </Text>
-          </Box>
+          </Stack>
         </Stack>
       </Card>
     );