website refactor

apps/website/components/drivers/CreateDriverForm.tsx

@@ -3,9 +3,8 @@
 import React, { useState, FormEvent } from 'react';
 import { Input } from '@/ui/Input';
 import { Button } from '@/ui/Button';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
 import { InfoBox } from '@/ui/InfoBox';
 import { AlertCircle } from 'lucide-react';
@@ -81,7 +80,7 @@ export function CreateDriverForm({ onSuccess, isPending }: CreateDriverFormProps
   };
 
   return (
-    <Box as="form" onSubmit={handleSubmit}>
+    <Stack as="form" onSubmit={handleSubmit}>
       <Stack gap={6}>
         <Input
           label="Driver Name *"
@@ -95,7 +94,7 @@ export function CreateDriverForm({ onSuccess, isPending }: CreateDriverFormProps
           disabled={isPending}
         />
 
-        <Box>
+        <Stack>
           <Input
             label="Country Code *"
             id="country"
@@ -109,9 +108,9 @@ export function CreateDriverForm({ onSuccess, isPending }: CreateDriverFormProps
             disabled={isPending}
           />
           <Text size="xs" color="text-gray-500" mt={1} block>Use ISO 3166-1 alpha-2 or alpha-3 code</Text>
-        </Box>
+        </Stack>
 
-        <Box>
+        <Stack>
           <TextArea
             label="Bio (Optional)"
             id="bio"
@@ -122,15 +121,15 @@ export function CreateDriverForm({ onSuccess, isPending }: CreateDriverFormProps
             rows={4}
             disabled={isPending}
           />
-          <Box display="flex" justifyContent="between" mt={1}>
+          <Stack display="flex" justifyContent="between" mt={1}>
             {errors.bio ? (
               <Text size="sm" color="text-warning-amber">{errors.bio}</Text>
-            ) : <Box />}
+            ) : <Stack />}
             <Text size="xs" color="text-gray-500">
               {formData.bio.length}/500
             </Text>
-          </Box>
-        </Box>
+          </Stack>
+        </Stack>
 
         {errors.submit && (
           <InfoBox 
@@ -150,6 +149,6 @@ export function CreateDriverForm({ onSuccess, isPending }: CreateDriverFormProps
           {isPending ? 'Creating Profile...' : 'Create Profile'}
         </Button>
       </Stack>
-    </Box>
+    </Stack>
   );
 }