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:
co-authored by
Claude Sonnet 4.6
parent
1ae5b72ed7
commit
2688aa94c9
@@ -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),
|
||||
|
||||
Reference in New Issue
Block a user