fix: logo not showing and duplicate ProsApp text in auth layout

- Put logo inside white container on gradient so colors are correct
- Remove BlendMode.srcATop which was making logo invisible on gradient
- Simplify auth_layout mobile/desktop branches

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-25 17:17:49 -05:00
co-authored by Claude Sonnet 4.6
parent 1ae5b72ed7
commit 2688aa94c9
2 changed files with 36 additions and 27 deletions
+22 -19
View File
@@ -7,9 +7,9 @@ class AuthLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final width = MediaQuery.of(context).size.width;
return Scaffold(
body: size.width > 900
body: width > 900
? _DesktopBody(child: child)
: _MobileBody(child: child),
);
@@ -24,10 +24,9 @@ class _MobileBody extends StatelessWidget {
Widget build(BuildContext context) {
return Column(
children: [
// Gradient header with logo
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 36),
padding: const EdgeInsets.symmetric(vertical: 28),
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
@@ -35,26 +34,32 @@ class _MobileBody extends StatelessWidget {
colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32),
bottomRight: Radius.circular(32),
bottomLeft: Radius.circular(28),
bottomRight: Radius.circular(28),
),
),
child: Column(
children: [
Image.network(
'https://prosapp.co/img/logo_prosapp.png',
height: 52,
color: Colors.white,
colorBlendMode: BlendMode.srcATop,
errorBuilder: (_, __, ___) => const Text(
'ProsApp',
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: Colors.white),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Image.network(
'https://prosapp.co/img/logo_prosapp.png',
height: 36,
fit: BoxFit.contain,
errorBuilder: (_, __, ___) => const Text(
'ProsApp',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Color(0xFF42A4EF)),
),
),
),
const SizedBox(height: 8),
const Text(
'Conecta con los mejores profesionales',
style: TextStyle(color: Colors.white70, fontSize: 13),
style: TextStyle(color: Colors.white70, fontSize: 12),
),
],
),
@@ -71,15 +76,13 @@ class _DesktopBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final height = MediaQuery.of(context).size.height;
return Row(
children: [
// Left gradient panel
const SizedBox(width: 420, child: BackgroundAuth()),
// Right form panel
Expanded(
child: Container(
height: size.height,
height: height,
color: Colors.white,
child: Center(child: child),
),
@@ -16,14 +16,20 @@ class BackgroundAuth extends StatelessWidget {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
'https://prosapp.co/img/logo_prosapp.png',
width: 180,
color: Colors.white,
colorBlendMode: BlendMode.srcATop,
errorBuilder: (_, __, ___) => const Text(
'ProsApp',
style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold, color: Colors.white),
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
child: Image.network(
'https://prosapp.co/img/logo_prosapp.png',
height: 48,
fit: BoxFit.contain,
errorBuilder: (_, __, ___) => const Text(
'ProsApp',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Color(0xFF42A4EF)),
),
),
),
const SizedBox(height: 24),