fix: auth pages visibles en modo oscuro y claro
- AuthLayout desktop: fondo usa scaffoldBackgroundColor en vez de Colors.white fijo - PhoneLoginView y LoginView: todos los textos, inputs y bordes usan colores tema-aware (titulos, subtítulos, fillColor, borderColor se adaptan a modo día/noche) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
7434bc8644
commit
35599276ed
@@ -11,12 +11,40 @@ class LoginView extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final authProvider = Provider.of<AuthProvider>(context);
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
final titleColor = isDark ? Colors.white : const Color(0xFF1E293B);
|
||||
final subtitleColor = isDark ? Colors.white54 : Colors.grey;
|
||||
final inputFill = isDark ? const Color(0xFF1E293B) : const Color(0xFFF5F8FF);
|
||||
final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E7FF);
|
||||
|
||||
return ChangeNotifierProvider(
|
||||
create: (_) => LoginFormProvider(),
|
||||
child: Builder(builder: (context) {
|
||||
final loginFormProvider = Provider.of<LoginFormProvider>(context, listen: false);
|
||||
|
||||
InputDecoration inputDecoration(String label, String hint, IconData icon) {
|
||||
return InputDecoration(
|
||||
labelText: label,
|
||||
hintText: hint,
|
||||
prefixIcon: const Icon(Icons.email_outlined, color: Color(0xFF42A4EF)),
|
||||
filled: true,
|
||||
fillColor: inputFill,
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: BorderSide(color: inputBorder)),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Colors.red)),
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Colors.red, width: 2)),
|
||||
);
|
||||
}
|
||||
|
||||
return Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 400),
|
||||
@@ -28,24 +56,23 @@ class LoginView extends StatelessWidget {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text('Iniciar sesión',
|
||||
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
|
||||
Text('Iniciar sesión',
|
||||
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: titleColor)),
|
||||
const SizedBox(height: 4),
|
||||
const Text('Ingresa con tu cuenta de email',
|
||||
style: TextStyle(color: Colors.grey, fontSize: 13)),
|
||||
Text('Ingresa con tu cuenta de email',
|
||||
style: TextStyle(color: subtitleColor, fontSize: 13)),
|
||||
const SizedBox(height: 28),
|
||||
|
||||
// Email
|
||||
TextFormField(
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
|
||||
validator: (v) => EmailValidator.validate(v ?? '') ? null : 'Email no válido',
|
||||
onChanged: (v) => loginFormProvider.email = v,
|
||||
decoration: _inputDecoration('Email', 'correo@ejemplo.com', Icons.email_outlined),
|
||||
style: TextStyle(color: titleColor),
|
||||
decoration: inputDecoration('Email', 'correo@ejemplo.com', Icons.email_outlined),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Password
|
||||
TextFormField(
|
||||
obscureText: true,
|
||||
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
|
||||
@@ -55,7 +82,8 @@ class LoginView extends StatelessWidget {
|
||||
return null;
|
||||
},
|
||||
onChanged: (v) => loginFormProvider.password = v,
|
||||
decoration: _inputDecoration('Contraseña', '••••••••', Icons.lock_outline),
|
||||
style: TextStyle(color: titleColor),
|
||||
decoration: inputDecoration('Contraseña', '••••••••', Icons.lock_outline),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
@@ -76,12 +104,12 @@ class LoginView extends StatelessWidget {
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
Row(children: const [
|
||||
Expanded(child: Divider()),
|
||||
Row(children: [
|
||||
const Expanded(child: Divider()),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Text('o', style: TextStyle(color: Colors.grey))),
|
||||
Expanded(child: Divider()),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Text('o', style: TextStyle(color: subtitleColor))),
|
||||
const Expanded(child: Divider()),
|
||||
]),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
@@ -107,9 +135,9 @@ class LoginView extends StatelessWidget {
|
||||
onPressed: () =>
|
||||
Navigator.pushReplacementNamed(context, Flurorouter.registerRoute),
|
||||
child: RichText(
|
||||
text: const TextSpan(
|
||||
style: TextStyle(color: Colors.grey, fontSize: 13),
|
||||
children: [
|
||||
text: TextSpan(
|
||||
style: TextStyle(color: subtitleColor, fontSize: 13),
|
||||
children: const [
|
||||
TextSpan(text: '¿No tienes cuenta? '),
|
||||
TextSpan(
|
||||
text: 'Regístrate',
|
||||
@@ -131,29 +159,6 @@ class LoginView extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
InputDecoration _inputDecoration(String label, String hint, IconData icon) {
|
||||
return InputDecoration(
|
||||
labelText: label,
|
||||
hintText: hint,
|
||||
prefixIcon: Icon(icon, color: const Color(0xFF42A4EF)),
|
||||
filled: true,
|
||||
fillColor: const Color(0xFFF5F8FF),
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Color(0xFFE0E7FF))),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Colors.red)),
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Colors.red, width: 2)),
|
||||
);
|
||||
}
|
||||
|
||||
void _submit(LoginFormProvider form, AuthProvider auth) async {
|
||||
if (form.validateForm()) {
|
||||
await auth.login(form.email, form.password);
|
||||
|
||||
Reference in New Issue
Block a user