website refactor

apps/website/components/leagues/LeagueBasicsSection.tsx

@@ -7,6 +7,8 @@ import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Grid } from '@/ui/Grid';
 import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Group } from '@/ui/Group';
 import { Surface } from '@/ui/Surface';
 import { Text } from '@/ui/Text';
 import { TextArea } from '@/ui/TextArea';
@@ -46,42 +48,38 @@ export function LeagueBasicsSection({
   return (
     <Stack gap={8}>
       {/* Emotional header for the step */}
-      <Stack textAlign="center" pb={2}>
-        <Stack mb={2}>
+      <Stack textAlign="center" paddingBottom={2}>
+        <Box marginBottom={2}>
           <Heading level={3}>
             Every great championship starts with a name
           </Heading>
-        </Stack>
-        <Stack maxWidth="lg" mx="auto">
-          <Text size="sm" color="text-gray-400">
+        </Box>
+        <Box maxWidth="lg" marginX="auto">
+          <Text size="sm" variant="low">
             This is where legends begin. Give your league an identity that drivers will remember.
           </Text>
-        </Stack>
+        </Box>
       </Stack>
 
       {/* League name */}
       <Stack gap={3}>
         <Input
-          label={
-            <Stack direction="row" align="center" gap={2}>
-              <Icon icon={FileText} size={4} color="var(--primary-blue)" />
-              <Text size="sm" weight="medium" color="text-gray-300">League name *</Text>
-            </Stack>
-          }
+          label="League name *"
+          icon={<Icon icon={FileText} size={4} intent="primary" />}
           value={basics.name}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateBasics({ name: e.target.value })}
           placeholder="e.g., GridPilot Sprint Series"
-          variant={errors?.name ? 'error' : 'default'}
-          errorMessage={errors?.name}
+          error={errors?.name}
           disabled={disabled}
           autoFocus
+          fullWidth
         />
         <Stack gap={2}>
-          <Text size="xs" color="text-gray-500">
+          <Text size="xs" variant="low">
             Make it memorable — this is what drivers will see first
           </Text>
-          <Stack direction="row" wrap gap={2}>
-            <Text size="xs" color="text-gray-500">Try:</Text>
+          <Group wrap gap={2}>
+            <Text size="xs" variant="low">Try:</Text>
             {[
               'Sunday Showdown Series',
               'Midnight Endurance League',
@@ -94,27 +92,19 @@ export function LeagueBasicsSection({
                 variant="secondary"
                 size="sm"
                 disabled={disabled}
-                rounded="full"
-                fontSize="0.75rem"
-                px={2}
-                py={0.5}
-                h="auto"
+                rounded
+                style={{ fontSize: '0.75rem', height: 'auto', padding: '0.125rem 0.5rem' }}
               >
                 {name}
               </Button>
             ))}
-          </Stack>
+          </Group>
         </Stack>
       </Stack>
 
       {/* Description - Now Required */}
       <TextArea
-        label={
-          <Stack direction="row" align="center" gap={2}>
-            <Icon icon={FileText} size={4} color="var(--primary-blue)" />
-            <Text size="sm" weight="medium" color="text-gray-300">Tell your story *</Text>
-          </Stack>
-        }
+        label="Tell your story *"
         value={basics.description ?? ''}
         onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
           updateBasics({
@@ -123,27 +113,27 @@ export function LeagueBasicsSection({
         }
         rows={4}
         disabled={disabled}
-        variant={errors?.description ? 'error' : 'default'}
-        errorMessage={errors?.description}
+        error={errors?.description}
         placeholder="What makes your league special? Tell drivers what to expect..."
+        fullWidth
       />
 
       <Surface variant="muted" rounded="lg" border padding={4}>
-        <Stack mb={3}>
-          <Text size="xs" color="text-gray-400">
-            <Text weight="medium" color="text-gray-300">Great descriptions include:</Text>
+        <Box marginBottom={3}>
+          <Text size="xs" variant="low">
+            <Text weight="medium" variant="med">Great descriptions include:</Text>
           </Text>
-        </Stack>
+        </Box>
         <Grid cols={3} gap={3}>
           {[
             'Racing style & pace',
             'Schedule & timezone',
             'Community vibe'
           ].map(item => (
-            <Stack key={item} direction="row" align="start" gap={2}>
-              <Icon icon={Check} size={3.5} color="var(--performance-green)" mt={0.5} />
-              <Text size="xs" color="text-gray-400">{item}</Text>
-            </Stack>
+            <Group key={item} align="start" gap={2}>
+              <Icon icon={Check} size={3.5} intent="success" style={{ marginTop: '0.125rem' }} />
+              <Text size="xs" variant="low">{item}</Text>
+            </Group>
           ))}
         </Grid>
       </Surface>
@@ -151,16 +141,13 @@ export function LeagueBasicsSection({
       {/* Game Platform */}
       <Stack gap={2}>
         <Input
-          label={
-            <Stack direction="row" align="center" gap={2}>
-              <Icon icon={Gamepad2} size={4} color="var(--text-gray-400)" />
-              <Text size="sm" weight="medium" color="text-gray-300">Game platform</Text>
-            </Stack>
-          }
+          label="Game platform"
+          icon={<Icon icon={Gamepad2} size={4} intent="low" />}
           value="iRacing"
           disabled
+          fullWidth
         />
-        <Text size="xs" color="text-gray-500">
+        <Text size="xs" variant="low">
           More platforms soon
         </Text>
       </Stack>