website refactor

apps/website/templates/auth/SignupTemplate.tsx

@@ -5,15 +5,16 @@ import { AuthFooterLinks } from '@/components/auth/AuthFooterLinks';
 import { AuthForm } from '@/components/auth/AuthForm';
 import { SignupViewData } from '@/lib/builders/view-data/types/SignupViewData';
 import { checkPasswordStrength } from '@/lib/utils/validation';
-import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
+import { Grid } from '@/ui/Grid';
+import { Group } from '@/ui/Group';
 import { Icon } from '@/ui/Icon';
 import { Input } from '@/ui/Input';
 import { Link } from '@/ui/Link';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
 import { PasswordField } from '@/ui/PasswordField';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
+import { ProgressBar } from '@/ui/ProgressBar';
 import { AlertCircle, Check, Mail, User, UserPlus, X } from 'lucide-react';
 import React from 'react';
 
@@ -47,16 +48,22 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
     { met: /[^a-zA-Z\d]/.test(passwordValue), label: 'Special' },
   ];
 
+  const getStrengthIntent = () => {
+    if (passwordStrength.score <= 2) return 'critical';
+    if (passwordStrength.score <= 4) return 'warning';
+    return 'success';
+  };
+
   return (
     <AuthCard 
       title="Create Account" 
       description="Join the GridPilot racing community"
     >
       <AuthForm onSubmit={formActions.handleSubmit}>
-        <Stack gap={6}>
-          <Stack gap={4}>
+        <Group direction="column" gap={6} fullWidth>
+          <Group direction="column" gap={4} fullWidth>
             <Text size="xs" weight="bold" color="text-low" uppercase letterSpacing="wide" block>Personal Information</Text>
-            <Box display="grid" gridCols={{ base: 1, md: 2 }} gap={4}>
+            <Grid cols={{ base: 1, md: 2 }} gap={4}>
               <Input
                 label="First Name"
                 id="firstName"
@@ -81,16 +88,14 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
                 autoComplete="family-name"
                 icon={<User size={16} />}
               />
-            </Box>
+            </Grid>
             
-            <Box p={3} bg="warning-amber/5" border borderColor="warning-amber/20" rounded="md">
-              <Stack direction="row" align="start" gap={2}>
-                <Icon icon={AlertCircle} size={3.5} color="var(--color-warning)" mt={0.5} />
-                <Text size="xs" color="text-med">
-                  <Text weight="bold" color="text-warning-amber">Note:</Text> Your name cannot be changed after signup.
-                </Text>
-              </Stack>
-            </Box>
+            <Group direction="row" align="start" gap={2} fullWidth>
+              <Icon icon={AlertCircle} size={3.5} color="var(--color-warning)" />
+              <Text size="xs" color="text-med">
+                <Text weight="bold" color="text-warning-amber">Note:</Text> Your name cannot be changed after signup.
+              </Text>
+            </Group>
 
             <Input
               label="Email Address"
@@ -105,9 +110,9 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
               autoComplete="email"
               icon={<Mail size={16} />}
             />
-          </Stack>
+          </Group>
 
-          <Stack gap={4}>
+          <Group direction="column" gap={4} fullWidth>
             <Text size="xs" weight="bold" color="text-low" uppercase letterSpacing="wide" block>Security</Text>
             <PasswordField
               label="Password"
@@ -124,34 +129,30 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
             />
 
             {passwordValue && (
-              <Stack gap={3}>
-                <Stack direction="row" align="center" gap={2}>
-                  <Box flexGrow={1} h="1px" bg="outline-steel" rounded="full" overflow="hidden">
-                    <Box 
-                      h="full" 
-                      transition
-                      w={`${(passwordStrength.score / 5) * 100}%`}
-                      bg={
-                        passwordStrength.score <= 2 ? 'critical-red' : 
-                        passwordStrength.score <= 4 ? 'warning-amber' : 'success-green'
-                      }
+              <Group direction="column" gap={3} fullWidth>
+                <Group direction="row" align="center" gap={2} fullWidth>
+                  <Group fullWidth>
+                    <ProgressBar 
+                      value={(passwordStrength.score / 5) * 100} 
+                      intent={getStrengthIntent()} 
+                      size="sm"
                     />
-                  </Box>
+                  </Group>
                   <Text size="xs" weight="bold" color="text-low" uppercase>
                     {passwordStrength.label}
                   </Text>
-                </Stack>
-                <Box display="grid" gridCols={2} gap={2}>
+                </Group>
+                <Grid cols={2} gap={2}>
                   {passwordRequirements.map((req, index) => (
-                    <Stack key={index} direction="row" align="center" gap={1.5}>
+                    <Group key={index} direction="row" align="center" gap={1.5}>
                       <Icon icon={req.met ? Check : X} size={3} color={req.met ? 'var(--color-success)' : 'var(--color-text-low)'} />
                       <Text size="xs" color={req.met ? 'text-med' : 'text-low'}>
                         {req.label}
                       </Text>
-                    </Stack>
+                    </Group>
                   ))}
-                </Box>
-              </Stack>
+                </Grid>
+              </Group>
             )}
 
             <PasswordField
@@ -167,16 +168,14 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
               showPassword={uiState.showConfirmPassword}
               onTogglePassword={() => formActions.setShowConfirmPassword(!uiState.showConfirmPassword)}
             />
-          </Stack>
-        </Stack>
+          </Group>
+        </Group>
 
         {mutationState.error && (
-          <Box p={4} bg="critical-red/10" border borderColor="critical-red/30" rounded="md">
-            <Stack direction="row" align="start" gap={3}>
-              <Icon icon={AlertCircle} size={4.5} color="var(--color-critical)" />
-              <Text size="sm" color="text-critical-red">{mutationState.error}</Text>
-            </Stack>
-          </Box>
+          <Group direction="row" align="start" gap={3} fullWidth>
+            <Icon icon={AlertCircle} size={4.5} color="var(--color-critical)" />
+            <Text size="sm" color="text-critical-red">{mutationState.error}</Text>
+          </Group>
         )}
 
         <Button
@@ -200,14 +199,14 @@ export function SignupTemplate({ viewData, formActions, uiState, mutationState }
           </Link>
         </Text>
         
-        <Box mt={2}>
+        <Group direction="column" gap={1} align="center" fullWidth>
           <Text size="xs" color="text-gray-600">
             By creating an account, you agree to our{' '}
             <Link href="/terms">Terms</Link>
             {' '}and{' '}
             <Link href="/privacy">Privacy</Link>
           </Text>
-        </Box>
+        </Group>
       </AuthFooterLinks>
     </AuthCard>
   );