website refactor

apps/website/components/teams/CreateTeamForm.tsx

@@ -4,7 +4,7 @@ import { useCreateTeam } from "@/hooks/team/useCreateTeam";
 import { Button } from '@/ui/Button';
 import { InfoBanner } from '@/ui/InfoBanner';
 import { Input } from '@/ui/Input';
-import { Stack } from '@/ui/Stack';
+import { Group } from '@/ui/Group';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
 import React, { useState } from 'react';
@@ -79,8 +79,8 @@ export function CreateTeamForm({ onCancel, onSuccess, onNavigate }: CreateTeamFo
   };
 
   return (
-    <Stack as="form" onSubmit={handleSubmit}>
-      <Stack gap={6}>
+    <form onSubmit={handleSubmit}>
+      <Group direction="col" align="stretch" gap={6}>
         <Input
           label="Team Name *"
           type="text"
@@ -88,8 +88,7 @@ export function CreateTeamForm({ onCancel, onSuccess, onNavigate }: CreateTeamFo
           onChange={(e) => setFormData({ ...formData, name: e.target.value })}
           placeholder="Enter team name..."
           disabled={createTeamMutation.isPending}
-          variant={errors.name ? 'error' : 'default'}
-          errorMessage={errors.name}
+          error={errors.name}
         />
 
         <Input
@@ -100,8 +99,7 @@ export function CreateTeamForm({ onCancel, onSuccess, onNavigate }: CreateTeamFo
           placeholder="e.g., APEX"
           maxLength={4}
           disabled={createTeamMutation.isPending}
-          variant={errors.tag ? 'error' : 'default'}
-          errorMessage={errors.tag}
+          error={errors.tag}
         />
 
         <TextArea
@@ -111,20 +109,19 @@ export function CreateTeamForm({ onCancel, onSuccess, onNavigate }: CreateTeamFo
           onChange={(e) => setFormData({ ...formData, description: e.target.value })}
           placeholder="Describe your team's goals and racing style..."
           disabled={createTeamMutation.isPending}
-          variant={errors.description ? 'error' : 'default'}
-          errorMessage={errors.description}
+          error={errors.description}
         />
 
         <InfoBanner title="About Team Creation">
-          <Stack as="ul" gap={1}>
-            <Text as="li" size="sm" color="text-gray-400">• You will be assigned as the team owner</Text>
-            <Text as="li" size="sm" color="text-gray-400">• You can invite other drivers to join your team</Text>
-            <Text as="li" size="sm" color="text-gray-400">• Team standings are calculated across leagues</Text>
-            <Text as="li" size="sm" color="text-gray-400">• This is alpha data - it resets on page reload</Text>
-          </Stack>
+          <Group direction="col" align="start" gap={1}>
+            <Text size="sm" variant="low">• You will be assigned as the team owner</Text>
+            <Text size="sm" variant="low">• You can invite other drivers to join your team</Text>
+            <Text size="sm" variant="low">• Team standings are calculated across leagues</Text>
+            <Text size="sm" variant="low">• This is alpha data - it resets on page reload</Text>
+          </Group>
         </InfoBanner>
 
-        <Stack display="flex" gap={3}>
+        <Group gap={3} fullWidth>
           <Button
             type="submit"
             variant="primary"
@@ -143,8 +140,8 @@ export function CreateTeamForm({ onCancel, onSuccess, onNavigate }: CreateTeamFo
               Cancel
             </Button>
           )}
-        </Stack>
-      </Stack>
-    </Stack>
+        </Group>
+      </Group>
+    </form>
   );
 }