website refactor

apps/website/components/profile/UserPill.tsx

@@ -9,6 +9,10 @@ import { Icon } from '@/ui/Icon';
 import { Image } from '@/ui/Image';
 import { Link } from '@/ui/Link';
 import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
+import { Stack } from '@/ui/Stack';
+import { Surface } from '@/ui/Surface';
 import { UserDropdown, UserDropdownHeader, UserDropdownItem, UserDropdownFooter } from '@/ui/UserDropdown';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
@@ -143,7 +147,7 @@ export function UserPill() {
   // Handle unauthenticated users
   if (!session) {
     return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+      <Group gap={2}>
         <Link
           href={routes.auth.login}
           variant="secondary"
@@ -156,7 +160,7 @@ export function UserPill() {
         >
           Get Started
         </Link>
-      </div>
+      </Group>
     );
   }
 
@@ -185,7 +189,7 @@ export function UserPill() {
   } as Record<string, 'primary' | 'success' | 'warning' | 'critical'>)[demoRole || 'driver'] : 'low';
 
   return (
-    <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }} data-user-pill>
+    <Box position="relative" display="inline-flex" alignItems="center" data-user-pill>
       <button
         type="button"
         onClick={() => setIsMenuOpen((open) => !open)}
@@ -201,26 +205,26 @@ export function UserPill() {
         }}
       >
         {/* Avatar */}
-        <div style={{ position: 'relative' }}>
+        <Box position="relative">
           {avatarUrl ? (
-            <div style={{ width: '2rem', height: '2rem', borderRadius: '9999px', overflow: 'hidden', border: '1px solid var(--ui-color-border-default)' }}>
+            <Surface width="2rem" height="2rem" rounded="full" overflow="hidden" border>
               <Image
                 src={avatarUrl}
                 alt={displayName}
                 objectFit="cover"
               />
-            </div>
+            </Surface>
           ) : (
-            <div style={{ width: '2rem', height: '2rem', borderRadius: '9999px', backgroundColor: 'var(--ui-color-intent-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Surface width="2rem" height="2rem" rounded="full" variant="gradient-blue" display="flex" alignItems="center" justifyContent="center">
               <Text size="xs" weight="bold" variant="high">
                 {displayName[0]?.toUpperCase() || 'U'}
               </Text>
-            </div>
+            </Surface>
           )}
-        </div>
+        </Box>
 
         {/* Info */}
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}>
+        <Stack align="start" gap={0}>
           <Text size="xs" weight="semibold" variant="high" truncate style={{ maxWidth: '100px' }}>
             {displayName}
           </Text>
@@ -229,7 +233,7 @@ export function UserPill() {
               {roleLabel}
             </Text>
           )}
-        </div>
+        </Stack>
 
         {/* Chevron */}
         <Icon icon={ChevronDown} size={3.5} intent="low" />
@@ -237,32 +241,32 @@ export function UserPill() {
 
       <UserDropdown isOpen={isMenuOpen}>
         <UserDropdownHeader variant={isDemo ? 'demo' : 'default'}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+          <Group gap={3}>
             {avatarUrl ? (
-              <div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '0.5rem', overflow: 'hidden', border: '1px solid var(--ui-color-border-default)' }}>
+              <Surface width="2.5rem" height="2.5rem" rounded="md" overflow="hidden" border>
                 <Image
                   src={avatarUrl}
                   alt={displayName}
                   objectFit="cover"
                 />
-              </div>
+              </Surface>
             ) : (
-              <div style={{ width: '2.5rem', height: '2.5rem', borderRadius: '0.5rem', backgroundColor: 'var(--ui-color-intent-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              <Surface width="2.5rem" height="2.5rem" rounded="md" variant="gradient-blue" display="flex" alignItems="center" justifyContent="center">
                 <Text size="xs" weight="bold" variant="high">
                   {displayName[0]?.toUpperCase() || 'U'}
                 </Text>
-              </div>
+              </Surface>
             )}
-            <div>
+            <Stack gap={0}>
               <Text size="sm" weight="semibold" variant="high" block>{displayName}</Text>
               {roleLabel && (
                 <Text size="xs" variant="low" block>{roleLabel}</Text>
               )}
-            </div>
-          </div>
+            </Stack>
+          </Group>
         </UserDropdownHeader>
 
-        <div style={{ padding: '0.25rem 0' }}>
+        <Box paddingY={1}>
           {hasAdminAccess && (
             <UserDropdownItem href="/admin" icon={Shield} label="Admin Area" intent="primary" onClick={() => setIsMenuOpen(false)} />
           )}
@@ -280,7 +284,7 @@ export function UserPill() {
           <UserDropdownItem href={routes.protected.profileLiveries} icon={Paintbrush} label="Liveries" onClick={() => setIsMenuOpen(false)} />
           <UserDropdownItem href={routes.protected.profileSponsorshipRequests} icon={Handshake} label="Sponsorship Requests" intent="success" onClick={() => setIsMenuOpen(false)} />
           <UserDropdownItem href={routes.protected.profileSettings} icon={Settings} label="Settings" onClick={() => setIsMenuOpen(false)} />
-        </div>
+        </Box>
 
         <UserDropdownFooter>
           <UserDropdownItem 
@@ -291,6 +295,6 @@ export function UserPill() {
           />
         </UserDropdownFooter>
       </UserDropdown>
-    </div>
+    </Box>
   );
 }