website refactor

apps/website/components/races/RaceHeaderPanel.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { RaceStatusBadge } from './RaceStatusBadge';
 import { Icon } from '@/ui/Icon';
 import { Calendar, MapPin, Car } from 'lucide-react';
@@ -24,7 +23,7 @@ export function RaceHeaderPanel({
   actions
 }: RaceHeaderPanelProps) {
   return (
-    <Box 
+    <Stack 
       bg="bg-panel-gray" 
       rounded="xl" 
       border 
@@ -33,7 +32,7 @@ export function RaceHeaderPanel({
       position="relative"
     >
       {/* Background Accent */}
-      <Box 
+      <Stack 
         position="absolute" 
         top={0} 
         left={0} 
@@ -43,10 +42,10 @@ export function RaceHeaderPanel({
         opacity={0.5}
       />
 
-      <Box p={6} position="relative">
+      <Stack p={6} position="relative">
         <Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
           {/* Info */}
-          <Box flexGrow={1}>
+          <Stack flexGrow={1}>
             <Stack gap={3}>
               <Stack direction="row" align="center" gap={3} wrap>
                 <Text as="h1" size="3xl" weight="bold" color="text-white">
@@ -80,16 +79,16 @@ export function RaceHeaderPanel({
                 )}
               </Stack>
             </Stack>
-          </Box>
+          </Stack>
 
           {/* Actions */}
           {actions && (
-            <Box flexShrink={0} width={{ base: 'full', md: 'auto' }}>
+            <Stack flexShrink={0} width={{ base: 'full', md: 'auto' }}>
               {actions}
-            </Box>
+            </Stack>
           )}
         </Stack>
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }