website refactor

apps/website/templates/auth/LoginTemplate.tsx

@@ -7,14 +7,14 @@ import { EnhancedFormError } from '@/components/errors/EnhancedFormError';
 import { FormState } from '@/lib/builders/view-data/types/FormState';
 import { LoginViewData } from '@/lib/builders/view-data/types/LoginViewData';
 import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
+import { Checkbox } from '@/ui/Checkbox';
+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 { AlertCircle, LogIn, Mail } from 'lucide-react';
 import React from 'react';
@@ -43,7 +43,7 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
       description="Sign in to access your racing dashboard"
     >
       <AuthForm onSubmit={formActions.handleSubmit}>
-        <Stack gap={4}>
+        <Group direction="column" gap={4} fullWidth>
           <Input
             label="Email Address"
             id="email"
@@ -58,7 +58,7 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
             icon={<Mail size={16} />}
           />
 
-          <Stack gap={1.5}>
+          <Group direction="column" gap={1.5} fullWidth>
             <PasswordField
               label="Password"
               id="password"
@@ -72,50 +72,43 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
               showPassword={viewData.showPassword}
               onTogglePassword={() => formActions.setShowPassword(!viewData.showPassword)}
             />
-            <Box textAlign="right">
+            <Group justify="end" fullWidth>
               <Link href={routes.auth.forgotPassword}>
                 <Text size="xs" color="text-primary-accent">
                   Forgot password?
                 </Text>
               </Link>
-            </Box>
-          </Stack>
+            </Group>
+          </Group>
 
-          <Stack direction="row" align="center" gap={2}>
-            <Box
-              as="input"
-              id="rememberMe"
-              name="rememberMe"
-              type="checkbox"
-              rounded="sm"
-              borderColor="outline-steel"
-              bg="surface-charcoal"
-              color="text-primary-accent"
-              ring="focus:ring-primary-accent/50"
-              w="1rem"
-              h="1rem"
-              checked={viewData.formState.fields.rememberMe.value as boolean}
-              onChange={formActions.handleChange}
-              disabled={isSubmitting}
-            />
-            <Text as="label" htmlFor="rememberMe" size="sm" color="text-med" cursor="pointer">
-              Keep me signed in
-            </Text>
-          </Stack>
-        </Stack>
+          <Checkbox
+            label="Keep me signed in"
+            checked={viewData.formState.fields.rememberMe.value as boolean}
+            onChange={(checked) => {
+              const event = {
+                target: {
+                  name: 'rememberMe',
+                  value: checked,
+                  type: 'checkbox',
+                  checked
+                }
+              } as any;
+              formActions.handleChange(event);
+            }}
+            disabled={isSubmitting}
+          />
+        </Group>
 
         {viewData.hasInsufficientPermissions && (
-          <Box p={4} bg="warning-amber/10" border borderColor="warning-amber/30" rounded="md">
-            <Stack direction="row" align="start" gap={3}>
-              <Icon icon={AlertCircle} size={5} color="var(--color-warning)" />
-              <Box>
-                <Text weight="bold" color="text-warning-amber" block size="sm">Insufficient Permissions</Text>
-                <Text size="xs" color="text-gray-400" block mt={1}>
-                  Please log in with an account that has the required role.
-                </Text>
-              </Box>
-            </Stack>
-          </Box>
+          <Group direction="row" align="start" gap={3} fullWidth>
+            <Icon icon={AlertCircle} size={5} color="var(--color-warning)" />
+            <Group direction="column" gap={1}>
+              <Text weight="bold" color="text-warning-amber" block size="sm">Insufficient Permissions</Text>
+              <Text size="xs" color="text-gray-400" block>
+                Please log in with an account that has the required role.
+              </Text>
+            </Group>
+          </Group>
         )}
 
         {viewData.submitError && (
@@ -149,14 +142,14 @@ export function LoginTemplate({ viewData, formActions, mutationState }: LoginTem
           </Link>
         </Text>
         
-        <Box mt={2}>
+        <Group direction="column" gap={1} align="center" fullWidth>
           <Text size="xs" color="text-gray-600">
             By signing in, you agree to our{' '}
             <Link href="/terms">Terms</Link>
             {' '}and{' '}
             <Link href="/privacy">Privacy</Link>
           </Text>
-        </Box>
+        </Group>
       </AuthFooterLinks>
     </AuthCard>
   );