website refactor

apps/website/components/onboarding/AvatarStep.tsx

@@ -1,7 +1,6 @@
 import { useRef, ChangeEvent } from 'react';
 import { Upload, Loader2, Sparkles, Palette, Check, User } from 'lucide-react';
 import { Button } from '@/ui/Button';
-import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Icon } from '@/ui/Icon';
@@ -94,13 +93,13 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
   return (
     <Stack gap={8}>
       {/* Photo Upload */}
-      <Box>
+      <Stack>
         <Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
           Upload Your Photo *
         </Text>
         <Stack direction="row" gap={6}>
           {/* Upload Area */}
-          <Box
+          <Stack
             onClick={() => fileInputRef.current?.click()}
             flex={1}
             display="flex"
@@ -120,7 +119,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
             hoverBg="bg-primary-blue/5"
             position="relative"
           >
-            <Box
+            <Stack
               as="input"
               ref={fileInputRef}
               type="file"
@@ -136,7 +135,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
               </Stack>
             ) : avatarInfo.facePhoto ? (
               <Stack alignItems="center" center>
-                <Box w="24" h="24" rounded="xl" overflow="hidden" mb={3} ring="ring-2 ring-performance-green">
+                <Stack w="24" h="24" rounded="xl" overflow="hidden" mb={3} ring="ring-2 ring-performance-green">
                   <Image
                     src={avatarInfo.facePhoto}
                     alt="Your photo"
@@ -146,7 +145,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
                     fullWidth
                     fullHeight
                   />
-                </Box>
+                </Stack>
                 <Text size="sm" color="text-performance-green" block>
                   <Stack flexDirection="row" alignItems="center" gap={1}>
                     <Icon icon={Check} size={4} />
@@ -166,7 +165,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
                 </Text>
               </Stack>
             )}
-          </Box>
+          </Stack>
 
           {/* Preview area */}
           <Stack w="32" alignItems="center" center>
@@ -190,10 +189,10 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
         {errors.facePhoto && (
           <Text size="sm" color="text-racing-red" block mt={2}>{errors.facePhoto}</Text>
         )}
-      </Box>
+      </Stack>
 
       {/* Suit Color Selection */}
-      <Box>
+      <Stack>
         <Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
           <Stack flexDirection="row" alignItems="center" gap={2}>
             <Icon icon={Palette} size={4} />
@@ -229,11 +228,11 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
         <Text size="xs" color="text-gray-500" block mt={2}>
           Selected: {SUIT_COLORS.find(c => c.value === avatarInfo.suitColor)?.label}
         </Text>
-      </Box>
+      </Stack>
 
       {/* Generate Button */}
       {avatarInfo.facePhoto && !errors.facePhoto && (
-        <Box>
+        <Stack>
           <Button
             type="button"
             variant="primary"
@@ -244,12 +243,12 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
           >
             {avatarInfo.isGenerating ? 'Generating your avatars...' : (avatarInfo.generatedAvatars.length > 0 ? 'Regenerate Avatars' : 'Generate Racing Avatars')}
           </Button>
-        </Box>
+        </Stack>
       )}
 
       {/* Generated Avatars */}
       {avatarInfo.generatedAvatars.length > 0 && (
-        <Box>
+        <Stack>
           <Text as="label" size="sm" weight="medium" color="text-gray-300" block mb={3}>
             Choose Your Avatar *
           </Text>
@@ -274,9 +273,9 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
               >
                 <Image src={url} alt={`Avatar option ${index + 1}`} width={200} height={200} objectFit="cover" fullWidth fullHeight />
                 {avatarInfo.selectedAvatarIndex === index && (
-                  <Box position="absolute" top={2} right={2} w="6" h="6" rounded="full" bg="bg-primary-blue" display="flex" center>
+                  <Stack position="absolute" top={2} right={2} w="6" h="6" rounded="full" bg="bg-primary-blue" display="flex" center>
                     <Icon icon={Check} size={4} color="text-white" />
-                  </Box>
+                  </Stack>
                 )}
               </Button>
             ))}
@@ -284,7 +283,7 @@ export function AvatarStep({ avatarInfo, setAvatarInfo, errors, setErrors, onGen
           {errors.avatar && (
             <Text size="sm" color="text-error-red" block mt={2}>{errors.avatar}</Text>
           )}
-        </Box>
+        </Stack>
       )}
     </Stack>
   );