website refactor

apps/website/components/profile/ProfileDetailsPanel.tsx

@@ -5,6 +5,9 @@ import { Panel } from '@/ui/Panel';
 import { Input } from '@/ui/Input';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
 import { ProfileStat } from '@/ui/ProfileHero';
 import React from 'react';
 
@@ -22,7 +25,7 @@ export function ProfileDetailsPanel({ driver, isEditing, onUpdate }: ProfileDeta
   if (isEditing) {
     return (
       <Panel title="Profile Details">
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+        <Stack gap={6}>
           <Input
             label="Nationality (ISO Code)"
             value={driver.country}
@@ -35,31 +38,31 @@ export function ProfileDetailsPanel({ driver, isEditing, onUpdate }: ProfileDeta
             onChange={(e) => onUpdate?.({ bio: e.target.value })}
             placeholder="Tell the community about your racing career..."
           />
-        </div>
+        </Stack>
       </Panel>
     );
   }
 
   return (
     <Panel title="Profile Details">
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
-        <div>
-          <Text size="xs" variant="low" weight="bold" uppercase block marginBottom={1}>Nationality</Text>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+      <Stack gap={6}>
+        <Stack gap={1}>
+          <Text size="xs" variant="low" weight="bold" uppercase block>Nationality</Text>
+          <Group gap={2}>
             <Text size="xl">
               {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
             </Text>
             <Text variant="med">{driver.country}</Text>
-          </div>
-        </div>
+          </Group>
+        </Stack>
 
-        <div>
-          <Text size="xs" variant="low" weight="bold" uppercase block marginBottom={1}>Bio</Text>
+        <Stack gap={1}>
+          <Text size="xs" variant="low" weight="bold" uppercase block>Bio</Text>
           <Text variant="med" leading="relaxed">
             {driver.bio || 'No bio provided.'}
           </Text>
-        </div>
-      </div>
+        </Stack>
+      </Stack>
     </Panel>
   );
 }