website refactor

apps/website/ui/Input.tsx

@@ -1,26 +1,30 @@
-import React, { forwardRef, InputHTMLAttributes } from 'react';
-import { Text } from './Text';
+import React, { forwardRef, ReactNode } from 'react';
 import { Box } from './primitives/Box';
 import { Stack } from './primitives/Stack';
+import { Text } from './Text';
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  variant?: 'default' | 'error';
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  icon?: ReactNode;
   errorMessage?: string;
-  icon?: React.ReactNode;
-  label?: React.ReactNode;
+  variant?: 'default' | 'error';
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className = '', variant = 'default', errorMessage, icon, label, ...props }, ref) => {
-    const baseClasses = 'px-3 py-2 border rounded-sm text-white bg-graphite-black focus:outline-none focus:border-primary-accent transition-all duration-150 ease-smooth w-full text-sm placeholder:text-gray-600';
-    const variantClasses = (variant === 'error' || errorMessage) ? 'border-critical-red' : 'border-border-gray';
-    const iconClasses = icon ? 'pl-10' : '';
-    const classes = `${baseClasses} ${variantClasses} ${iconClasses} ${className}`;
+  ({ label, icon, errorMessage, variant = 'default', className = '', ...props }, ref) => {
+    const isError = variant === 'error' || !!errorMessage;
+    
+    const baseClasses = 'w-full px-4 py-2 bg-deep-graphite border rounded-lg text-white placeholder:text-gray-500 focus:outline-none transition-all duration-150 sm:text-sm';
+    const variantClasses = isError 
+      ? 'border-warning-amber focus:border-warning-amber focus:ring-1 focus:ring-warning-amber' 
+      : 'border-charcoal-outline focus:border-primary-blue focus:ring-1 focus:ring-primary-blue';
+    
+    const classes = `${baseClasses} ${variantClasses} ${icon ? 'pl-11' : ''} ${className}`;
 
     return (
       <Stack gap={1.5} fullWidth>
         {label && (
-          <Text as="label" size="xs" weight="bold" color="text-gray-500" className="uppercase tracking-wider">
+          <Text as="label" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
             {label}
           </Text>
         )}
@@ -28,20 +32,21 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {icon && (
             <Box 
               position="absolute" 
-              left="3" 
+              left={0} 
               top="50%" 
-              style={{ transform: 'translateY(-50%)' }}
-              zIndex={10}
-              display="flex"
-              center
-              className="text-gray-500"
+              translateY="-50%" 
+              zIndex={10} 
+              w="11" 
+              display="flex" 
+              center 
+              color="text-gray-500"
             >
               {icon}
             </Box>
           )}
           <input ref={ref} className={classes} {...props} />
           {errorMessage && (
-            <Text size="xs" color="text-critical-red" block mt={1}>
+            <Text size="xs" color="text-warning-amber" mt={1}>
               {errorMessage}
             </Text>
           )}