fix: formularios de auth con card blanca y colores con contraste correcto
- PhoneLoginView y LoginView: form envuelto en Card con sombra (blanca en claro, oscura en noche) - Títulos: Color(0xFF0F172A) en claro, blanco en noche - siempre visible - Subtítulos: Color(0xFF64748B) en claro (contraste 4.5:1+) vs Colors.grey anterior - Inputs: fillColor, textColor y borderColor explícitos por tema - AuthLayout desktop: fondo usa scaffoldBackgroundColor del tema 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
35599276ed
commit
dd3053d3b3
@@ -52,7 +52,7 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
setState(() => _loading = true);
|
||||
try {
|
||||
await Provider.of<AuthProvider>(context, listen: false).verifyPhoneNumber(_phone);
|
||||
setState(() { _codeSent = true; });
|
||||
setState(() => _codeSent = true);
|
||||
_startResendTimer();
|
||||
} catch (_) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
@@ -78,38 +78,70 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
final cardColor = isDark ? const Color(0xFF1E293B) : Colors.white;
|
||||
final titleColor = isDark ? Colors.white : const Color(0xFF0F172A);
|
||||
final subtitleColor = isDark ? const Color(0xFF94A3B8) : const Color(0xFF64748B);
|
||||
final inputFill = isDark ? const Color(0xFF0F172A) : const Color(0xFFF8FAFF);
|
||||
final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFCDD5F0);
|
||||
final inputTextColor = isDark ? Colors.white : const Color(0xFF0F172A);
|
||||
final prefixFill = isDark ? const Color(0xFF0F172A) : const Color(0xFFEEF0FF);
|
||||
final prefixBorder = isDark ? const Color(0xFF334155) : const Color(0xFFCDD5F0);
|
||||
|
||||
return Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 420),
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (!_codeSent) _buildPhoneForm() else _buildOtpForm(),
|
||||
],
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 32),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: cardColor,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(isDark ? 0.3 : 0.08),
|
||||
blurRadius: 24,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
padding: const EdgeInsets.all(28),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (!_codeSent)
|
||||
_buildPhoneForm(titleColor, subtitleColor, inputFill, inputBorder, inputTextColor, prefixFill, prefixBorder)
|
||||
else
|
||||
_buildOtpForm(titleColor, subtitleColor, inputFill, inputBorder, inputTextColor),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPhoneForm() {
|
||||
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);
|
||||
final prefixFill = isDark ? const Color(0xFF0F172A) : const Color(0xFFF5F5F5);
|
||||
final prefixBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E0E0);
|
||||
final prefixText = isDark ? Colors.white : Colors.black87;
|
||||
|
||||
Widget _buildPhoneForm(
|
||||
Color titleColor,
|
||||
Color subtitleColor,
|
||||
Color inputFill,
|
||||
Color inputBorder,
|
||||
Color inputTextColor,
|
||||
Color prefixFill,
|
||||
Color prefixBorder,
|
||||
) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Iniciar sesión', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: titleColor)),
|
||||
Text(
|
||||
'Iniciar sesión',
|
||||
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: titleColor),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text('Te enviaremos un código de 6 dígitos', style: TextStyle(color: subtitleColor, fontSize: 13)),
|
||||
Text(
|
||||
'Te enviaremos un código de 6 dígitos',
|
||||
style: TextStyle(color: subtitleColor, fontSize: 13),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
@@ -121,14 +153,17 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
border: Border.all(color: prefixBorder),
|
||||
),
|
||||
child: Text('+57', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: prefixText)),
|
||||
child: Text(
|
||||
'+57',
|
||||
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: titleColor),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _phoneController,
|
||||
keyboardType: TextInputType.phone,
|
||||
style: TextStyle(color: titleColor),
|
||||
style: TextStyle(color: inputTextColor, fontSize: 15),
|
||||
decoration: InputDecoration(
|
||||
hintText: '300 123 4567',
|
||||
hintStyle: TextStyle(color: subtitleColor),
|
||||
@@ -187,7 +222,10 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
||||
side: const BorderSide(color: Color(0xFF42A4EF)),
|
||||
),
|
||||
child: const Text('Iniciar sesión con email', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
|
||||
child: const Text(
|
||||
'Iniciar sesión con email',
|
||||
style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
@@ -199,7 +237,10 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
style: TextStyle(color: subtitleColor, fontSize: 13),
|
||||
children: const [
|
||||
TextSpan(text: '¿No tienes cuenta? '),
|
||||
TextSpan(text: 'Regístrate', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
|
||||
TextSpan(
|
||||
text: 'Regístrate',
|
||||
style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -209,19 +250,22 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildOtpForm() {
|
||||
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);
|
||||
|
||||
Widget _buildOtpForm(
|
||||
Color titleColor,
|
||||
Color subtitleColor,
|
||||
Color inputFill,
|
||||
Color inputBorder,
|
||||
Color inputTextColor,
|
||||
) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(Icons.sms_outlined, size: 52, color: Color(0xFF42A4EF)),
|
||||
const SizedBox(height: 12),
|
||||
Text('Código de verificación', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: titleColor)),
|
||||
Text(
|
||||
'Código de verificación',
|
||||
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: titleColor),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Enviamos un SMS a $_phone',
|
||||
@@ -234,7 +278,12 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
keyboardType: TextInputType.number,
|
||||
textAlign: TextAlign.center,
|
||||
maxLength: 6,
|
||||
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 12, color: titleColor),
|
||||
style: TextStyle(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.bold,
|
||||
letterSpacing: 12,
|
||||
color: inputTextColor,
|
||||
),
|
||||
decoration: InputDecoration(
|
||||
counterText: '',
|
||||
hintText: '------',
|
||||
@@ -242,8 +291,11 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
filled: true,
|
||||
fillColor: inputFill,
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide.none),
|
||||
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: inputBorder)),
|
||||
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: inputBorder)),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
@@ -268,11 +320,15 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
? Text('Reenviar en $_resendSeconds s', style: TextStyle(color: subtitleColor, fontSize: 13))
|
||||
: TextButton(
|
||||
onPressed: _sendCode,
|
||||
child: const Text('Reenviar código', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
|
||||
child: const Text('Reenviar código',
|
||||
style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
TextButton(
|
||||
onPressed: () => setState(() { _codeSent = false; _otpController.clear(); }),
|
||||
onPressed: () => setState(() {
|
||||
_codeSent = false;
|
||||
_otpController.clear();
|
||||
}),
|
||||
child: Text('← Cambiar número', style: TextStyle(color: subtitleColor, fontSize: 13)),
|
||||
),
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user