Mobile App design

apps/frontend-mobile/app/auth/register.tsx

@@ -11,10 +11,12 @@ import {
 } from 'react-native';
 import { useRouter } from 'expo-router';
 import { register } from '../../services/auth';
-import { colors, spacing, borderRadius } from '../../constants/theme';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { spacing, borderRadius } from '../../constants/theme';
 
 export default function RegisterScreen() {
   const router = useRouter();
+  const { colors } = useThemeContext();
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
@@ -44,17 +46,17 @@ export default function RegisterScreen() {
 
   return (
     <KeyboardAvoidingView
-      style={styles.container}
+      style={[styles.container, { backgroundColor: colors.background }]}
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
     >
       <View style={styles.form}>
-        <Text style={styles.title}>Crear Cuenta</Text>
-        <Text style={styles.subtitle}>Regístrate para empezar</Text>
+        <Text style={[styles.title, { color: colors.text }]}>Crear Cuenta</Text>
+        <Text style={[styles.subtitle, { color: colors.textSecondary }]}>Regístrate para empezar</Text>
 
         <View style={styles.inputContainer}>
-          <Text style={styles.label}>Usuario</Text>
+          <Text style={[styles.label, { color: colors.text }]}>Usuario</Text>
           <TextInput
-            style={styles.input}
+            style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
             value={username}
             onChangeText={setUsername}
             placeholder="Elige un usuario"
@@ -65,9 +67,9 @@ export default function RegisterScreen() {
         </View>
 
         <View style={styles.inputContainer}>
-          <Text style={styles.label}>Contraseña</Text>
+          <Text style={[styles.label, { color: colors.text }]}>Contraseña</Text>
           <TextInput
-            style={styles.input}
+            style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
             value={password}
             onChangeText={setPassword}
             placeholder="Elige una contraseña"
@@ -77,9 +79,9 @@ export default function RegisterScreen() {
         </View>
 
         <View style={styles.inputContainer}>
-          <Text style={styles.label}>Confirmar Contraseña</Text>
+          <Text style={[styles.label, { color: colors.text }]}>Confirmar Contraseña</Text>
           <TextInput
-            style={styles.input}
+            style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
             value={confirmPassword}
             onChangeText={setConfirmPassword}
             placeholder="Repite la contraseña"
@@ -102,7 +104,7 @@ export default function RegisterScreen() {
           style={styles.linkButton}
           onPress={() => router.back()}
         >
-          <Text style={styles.linkText}>¿Ya tienes cuenta? Inicia sesión</Text>
+          <Text style={[styles.linkText, { color: colors.primary }]}>¿Ya tienes cuenta? Inicia sesión</Text>
         </TouchableOpacity>
       </View>
     </KeyboardAvoidingView>
@@ -112,7 +114,6 @@ export default function RegisterScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.background,
   },
   form: {
     flex: 1,
@@ -122,12 +123,10 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 28,
     fontWeight: 'bold',
-    color: colors.text,
     marginBottom: spacing.sm,
   },
   subtitle: {
     fontSize: 16,
-    color: colors.textSecondary,
     marginBottom: spacing.xl,
   },
   inputContainer: {
@@ -136,18 +135,15 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 14,
     fontWeight: '500',
-    color: colors.text,
     marginBottom: spacing.xs,
   },
   input: {
-    backgroundColor: colors.card,
     borderRadius: borderRadius.md,
     padding: spacing.md,
     fontSize: 16,
-    color: colors.text,
   },
   button: {
-    backgroundColor: colors.primary,
+    backgroundColor: '#7fbf8f',
     borderRadius: borderRadius.md,
     padding: spacing.md,
     alignItems: 'center',
@@ -157,7 +153,7 @@ const styles = StyleSheet.create({
     opacity: 0.6,
   },
   buttonText: {
-    color: colors.textInverse,
+    color: '#ffffff',
     fontSize: 16,
     fontWeight: '600',
   },
@@ -166,7 +162,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   linkText: {
-    color: colors.primary,
     fontSize: 14,
   },
 });