website refactor

apps/website/components/profile/ProfileHeader.tsx

@@ -3,11 +3,10 @@
 import React from 'react';
 import { mediaConfig } from '@/lib/config/mediaConfig';
 import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
-import { Stack } from '@/ui/Stack';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { Calendar, Globe, Star, Trophy, UserPlus } from 'lucide-react';
@@ -42,8 +41,8 @@ export function ProfileHeader({
       <Surface variant="muted" rounded="xl" border padding={6} backgroundColor="#141619" borderColor="#23272B">
         <Stack direction="row" align="center" gap={8} wrap>
           {/* Avatar with telemetry-style border */}
-          <Box position="relative">
-            <Box 
+          <Stack position="relative">
+            <Stack 
               width="6rem" 
               height="6rem" 
               rounded="md" 
@@ -52,7 +51,7 @@ export function ProfileHeader({
               p={0.5}
               backgroundColor="#0C0D0F"
             >
-              <Box width="100%" height="100%" rounded="sm" overflow="hidden">
+              <Stack width="100%" height="100%" rounded="sm" overflow="hidden">
                 <Image
                   src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
                   alt={driver.name}
@@ -62,12 +61,12 @@ export function ProfileHeader({
                   fullWidth
                   fullHeight
                 />
-              </Box>
-            </Box>
-          </Box>
+              </Stack>
+            </Stack>
+          </Stack>
 
           {/* Driver Info */}
-          <Box flexGrow={1} minWidth="0">
+          <Stack flexGrow={1} minWidth="0">
             <Stack direction="row" align="center" gap={3} mb={1}>
               <Heading level={1} fontSize="1.5rem">
                 {driver.name}
@@ -82,7 +81,7 @@ export function ProfileHeader({
                 <Globe size={14} />
                 <Text size="xs" font="mono">ID: {driver.iracingId}</Text>
               </Stack>
-              <Box width="1px" height="12px" backgroundColor="#23272B" />
+              <Stack width="1px" height="12px" backgroundColor="#23272B" />
               <Stack direction="row" align="center" gap={1.5}>
                 <Calendar size={14} />
                 <Text size="xs">
@@ -90,13 +89,13 @@ export function ProfileHeader({
                 </Text>
               </Stack>
             </Stack>
-          </Box>
+          </Stack>
 
           {/* Stats Grid */}
           <Stack direction="row" align="center" gap={6}>
             {stats && (
               <>
-                <Box>
+                <Stack>
                   <Stack gap={0.5}>
                     <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em">RATING</Text>
                     <Stack direction="row" align="center" gap={1.5}>
@@ -104,9 +103,9 @@ export function ProfileHeader({
                       <Text font="mono" size="lg" weight="bold" color="#198CFF">{stats.rating}</Text>
                     </Stack>
                   </Stack>
-                </Box>
-                <Box width="1px" height="32px" backgroundColor="#23272B" />
-                <Box>
+                </Stack>
+                <Stack width="1px" height="32px" backgroundColor="#23272B" />
+                <Stack>
                   <Stack gap={0.5}>
                     <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em">GLOBAL RANK</Text>
                     <Stack direction="row" align="center" gap={1.5}>
@@ -114,14 +113,14 @@ export function ProfileHeader({
                       <Text font="mono" size="lg" weight="bold" color="#FFBE4D">#{globalRank}</Text>
                     </Stack>
                   </Stack>
-                </Box>
+                </Stack>
               </>
             )}
           </Stack>
 
           {/* Actions */}
           {!isOwnProfile && onAddFriend && (
-            <Box ml="auto">
+            <Stack ml="auto">
               <Button
                 variant={friendRequestSent ? 'secondary' : 'primary'}
                 onClick={onAddFriend}
@@ -131,7 +130,7 @@ export function ProfileHeader({
               >
                 {friendRequestSent ? 'Request Sent' : 'Add Friend'}
               </Button>
-            </Box>
+            </Stack>
           )}
         </Stack>
       </Surface>