website refactor

apps/website/components/drivers/ProfileHeader.tsx

@@ -2,14 +2,13 @@
 
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { Badge } from '@/ui/Badge';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { CountryFlag } from '@/ui/CountryFlag';
 import { DriverRatingPill } from '@/components/drivers/DriverRatingPill';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
 import { PlaceholderImage } from '@/ui/PlaceholderImage';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 
 interface ProfileHeaderProps {
@@ -32,9 +31,9 @@ export function ProfileHeader({
   teamTag,
 }: ProfileHeaderProps) {
   return (
-    <Box display="flex" alignItems="start" justifyContent="between">
-      <Box display="flex" alignItems="start" gap={4}>
-        <Box 
+    <Stack display="flex" alignItems="start" justifyContent="between">
+      <Stack display="flex" alignItems="start" gap={4}>
+        <Stack 
           w="20" 
           h="20" 
           rounded="full" 
@@ -55,10 +54,10 @@ export function ProfileHeader({
           ) : (
             <PlaceholderImage size={80} />
           )}
-        </Box>
+        </Stack>
         
-        <Box>
-          <Box display="flex" alignItems="center" gap={3} mb={2}>
+        <Stack>
+          <Stack display="flex" alignItems="center" gap={3} mb={2}>
             <Heading level={1}>{driver.name}</Heading>
             {driver.country && <CountryFlag countryCode={driver.country} size="lg" />}
             {teamTag && (
@@ -66,9 +65,9 @@ export function ProfileHeader({
                 {teamTag}
               </Badge>
             )}
-          </Box>
+          </Stack>
           
-          <Box display="flex" alignItems="center" gap={4}>
+          <Stack display="flex" alignItems="center" gap={4}>
             <Text size="sm" color="text-gray-400">iRacing ID: {driver.iracingId}</Text>
             {teamName && (
               <Stack direction="row" align="center" gap={2}>
@@ -78,21 +77,21 @@ export function ProfileHeader({
                 </Text>
               </Stack>
             )}
-          </Box>
+          </Stack>
 
           {(typeof rating === 'number' || typeof rank === 'number') && (
-            <Box mt={2}>
+            <Stack mt={2}>
               <DriverRatingPill rating={rating ?? null} rank={rank ?? null} />
-            </Box>
+            </Stack>
           )}
-        </Box>
-      </Box>
+        </Stack>
+      </Stack>
 
       {isOwnProfile && (
         <Button variant="secondary" onClick={onEditClick}>
           Edit Profile
         </Button>
       )}
-    </Box>
+    </Stack>
   );
 }