website refactor

apps/website/components/profile/ProfileHeader.tsx

@@ -7,6 +7,9 @@ import { Heading } from '@/ui/Heading';
 import { Image } from '@/ui/Image';
 import { ProfileHero, ProfileAvatar, ProfileStatsGroup, ProfileStat } from '@/ui/ProfileHero';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
 import { Calendar, Globe, Star, Trophy, UserPlus } from 'lucide-react';
 import React from 'react';
 
@@ -37,7 +40,7 @@ export function ProfileHeader({
 }: ProfileHeaderProps) {
   return (
     <ProfileHero variant="muted">
-      <div style={{ display: 'flex', alignItems: 'center', gap: '2rem', flexWrap: 'wrap' }}>
+      <Box display="flex" alignItems="center" gap={8} flexWrap="wrap">
         <ProfileAvatar>
           <Image
             src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
@@ -48,27 +51,29 @@ export function ProfileHeader({
           />
         </ProfileAvatar>
 
-        <div style={{ flex: 1, minWidth: '200px' }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', marginBottom: '0.25rem' }}>
-            <Heading level={1}>{driver.name}</Heading>
-            <Text size="2xl" aria-label={`Country: ${driver.country}`}>
-              {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
-            </Text>
-          </div>
+        <Stack flex={1} minWidth="200px" gap={1}>
+          <Box marginBottom={1}>
+            <Group gap={3}>
+              <Heading level={1}>{driver.name}</Heading>
+              <Text size="2xl" aria-label={`Country: ${driver.country}`}>
+                {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
+              </Text>
+            </Group>
+          </Box>
 
-          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+          <Group gap={4}>
+            <Group gap={1.5}>
               <Globe size={14} color="var(--ui-color-text-low)" />
               <Text size="xs" font="mono" variant="low">ID: {driver.iracingId}</Text>
-            </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '0.375rem' }}>
+            </Group>
+            <Group gap={1.5}>
               <Calendar size={14} color="var(--ui-color-text-low)" />
               <Text size="xs" variant="low">
                 Joined {new Date(driver.joinedAt).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })}
               </Text>
-            </div>
-          </div>
-        </div>
+            </Group>
+          </Group>
+        </Stack>
 
         <ProfileStatsGroup>
           {stats && (
@@ -80,7 +85,7 @@ export function ProfileHeader({
         </ProfileStatsGroup>
 
         {!isOwnProfile && onAddFriend && (
-          <div style={{ marginLeft: 'auto' }}>
+          <Box marginLeft="auto">
             <Button
               variant={friendRequestSent ? 'secondary' : 'primary'}
               onClick={onAddFriend}
@@ -90,9 +95,9 @@ export function ProfileHeader({
             >
               {friendRequestSent ? 'Request Sent' : 'Add Friend'}
             </Button>
-          </div>
+          </Box>
         )}
-      </div>
+      </Box>
     </ProfileHero>
   );
 }