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
@@ -95,12 +95,21 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
return 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('Te enviaremos un código de 6 dígitos', style: TextStyle(color: Colors.grey, 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,
|
||||
@@ -108,28 +117,30 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 18),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFF5F5F5),
|
||||
color: prefixFill,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
border: Border.all(color: const Color(0xFFE0E0E0)),
|
||||
border: Border.all(color: prefixBorder),
|
||||
),
|
||||
child: const Text('+57', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
|
||||
child: Text('+57', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: prefixText)),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _phoneController,
|
||||
keyboardType: TextInputType.phone,
|
||||
style: TextStyle(color: titleColor),
|
||||
decoration: InputDecoration(
|
||||
hintText: '300 123 4567',
|
||||
hintStyle: TextStyle(color: subtitleColor),
|
||||
filled: true,
|
||||
fillColor: const Color(0xFFF5F8FF),
|
||||
fillColor: inputFill,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: Color(0xFFE0E7FF)),
|
||||
borderSide: BorderSide(color: inputBorder),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
@@ -158,7 +169,14 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Row(children: const [Expanded(child: Divider()), Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('o', style: TextStyle(color: Colors.grey))), Expanded(child: Divider())]),
|
||||
Row(children: [
|
||||
const Expanded(child: Divider()),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Text('o', style: TextStyle(color: subtitleColor)),
|
||||
),
|
||||
const Expanded(child: Divider()),
|
||||
]),
|
||||
const SizedBox(height: 16),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
@@ -177,9 +195,9 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
child: TextButton(
|
||||
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', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
|
||||
],
|
||||
@@ -192,17 +210,23 @@ 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);
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(Icons.sms_outlined, size: 52, color: Color(0xFF42A4EF)),
|
||||
const SizedBox(height: 12),
|
||||
const Text('Código de verificación', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
|
||||
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',
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(color: Colors.grey, fontSize: 13),
|
||||
style: TextStyle(color: subtitleColor, fontSize: 13),
|
||||
),
|
||||
const SizedBox(height: 28),
|
||||
TextField(
|
||||
@@ -210,15 +234,15 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
keyboardType: TextInputType.number,
|
||||
textAlign: TextAlign.center,
|
||||
maxLength: 6,
|
||||
style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 12),
|
||||
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 12, color: titleColor),
|
||||
decoration: InputDecoration(
|
||||
counterText: '',
|
||||
hintText: '------',
|
||||
hintStyle: const TextStyle(letterSpacing: 12, color: Colors.grey),
|
||||
hintStyle: TextStyle(letterSpacing: 12, color: subtitleColor),
|
||||
filled: true,
|
||||
fillColor: const Color(0xFFF5F8FF),
|
||||
fillColor: inputFill,
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide.none),
|
||||
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: Color(0xFFE0E7FF))),
|
||||
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: inputBorder)),
|
||||
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
|
||||
),
|
||||
),
|
||||
@@ -241,7 +265,7 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_resendSeconds > 0
|
||||
? Text('Reenviar en $_resendSeconds s', style: const TextStyle(color: Colors.grey, fontSize: 13))
|
||||
? 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)),
|
||||
@@ -249,7 +273,7 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
|
||||
const SizedBox(height: 8),
|
||||
TextButton(
|
||||
onPressed: () => setState(() { _codeSent = false; _otpController.clear(); }),
|
||||
child: const Text('← Cambiar número', style: TextStyle(color: Colors.grey, fontSize: 13)),
|
||||
child: Text('← Cambiar número', style: TextStyle(color: subtitleColor, fontSize: 13)),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user