website refactor

apps/website/components/races/RaceDetailsHeader.tsx

@@ -6,7 +6,6 @@ import { Heading } from '@/ui/Heading';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/Box';
 import { SessionStatusBadge, type SessionStatus } from './SessionStatusBadge';
 
 interface RaceDetailsHeaderProps {
@@ -27,9 +26,9 @@ export function RaceDetailsHeader({
   onBack,
 }: RaceDetailsHeaderProps) {
   return (
-    <Box as="header" bg="bg-surface-charcoal" borderBottom borderColor="border-outline-steel" p={6}>
+    <Stack as="header" bg="bg-surface-charcoal" borderBottom borderColor="border-outline-steel" p={6}>
       <Stack gap={6}>
-        <Box 
+        <Stack 
           as="button" 
           onClick={onBack}
           display="flex"
@@ -42,7 +41,7 @@ export function RaceDetailsHeader({
         >
           <Icon icon={ChevronLeft} size={4} groupHoverScale />
           <Text size="xs" weight="bold" uppercase>Back to Schedule</Text>
-        </Box>
+        </Stack>
 
         <Stack direction="row" justifyContent="between" alignItems="end">
           <Stack gap={2}>
@@ -51,7 +50,7 @@ export function RaceDetailsHeader({
             </Text>
             <Heading level={1}>{title}</Heading>
             
-            <Box display="flex" flexWrap="wrap" gap={6} mt={2}>
+            <Stack display="flex" flexWrap="wrap" gap={6} mt={2}>
               <Stack direction="row" alignItems="center" gap={2}>
                 <Icon icon={MapPin} size={4} color="#6b7280" />
                 <Text size="sm" color="text-gray-300">{trackName}</Text>
@@ -60,14 +59,14 @@ export function RaceDetailsHeader({
                 <Icon icon={Calendar} size={4} color="#6b7280" />
                 <Text size="sm" color="text-gray-300">{scheduledAt}</Text>
               </Stack>
-            </Box>
+            </Stack>
           </Stack>
 
-          <Box pb={2}>
+          <Stack pb={2}>
             <SessionStatusBadge status={status} />
-          </Box>
+          </Stack>
         </Stack>
       </Stack>
-    </Box>
+    </Stack>
   );
 }