usite-sas-bic/prosappweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign professional profile UI + sidebar mode indicator

Browse Source 
- professional_profile_view: gradient header card with avatar overlay,
  sectioned cards (service modality, address, rate, payment chips, schedule),
  animated payment method chips, full-width save button with loading state
- sidebar: teal-dark background in pro mode vs navy in user mode,
  animated mode indicator pill, muted toggle button in pro mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-29 11:34:25 -05:00
co-authored by Claude Sonnet 4.6
parent 9f2612ec70
commit ef8ccb9aee
2 changed files with 812 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/ui/shared/sidebar.dart
+75 -14
View File
@@ -29,13 +29,62 @@ class Sidebar extends StatelessWidget {
return Container(
width: 220,
height: double.infinity,
decoration: buildBoxDecoration(),
decoration: buildBoxDecoration(professionalProvider.isProModeActive),
child: ListView(
physics: const ClampingScrollPhysics(),
children: [
const Logo(),
const SizedBox(height: 8),
// Mode indicator pill
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
color: professionalProvider.isProModeActive
? const Color(0xFF16A34A).withOpacity(0.18)
: const Color(0xFF42A4EF).withOpacity(0.14),
border: Border.all(
color: professionalProvider.isProModeActive
? const Color(0xFF22C55E).withOpacity(0.5)
: const Color(0xFF42A4EF).withOpacity(0.4),
width: 1,
),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
professionalProvider.isProModeActive
? Icons.work_outline
: Icons.person_outline,
size: 13,
color: professionalProvider.isProModeActive
? const Color(0xFF4ADE80)
: const Color(0xFF7DD3FC),
),
const SizedBox(width: 6),
Text(
professionalProvider.isProModeActive
? 'Modo Profesional'
: 'Modo Usuario',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: professionalProvider.isProModeActive
? const Color(0xFF4ADE80)
: const Color(0xFF7DD3FC),
),
),
],
),
),
),
const SizedBox(height: 4),
if (professionalProvider.isProModeActive) ...[
const TextSeparator(text: 'Profesional'),
MenuItem(
@@ -147,13 +196,20 @@ class Sidebar extends StatelessWidget {
navigateTo(Flurorouter.requestProfessionalRoute);
}
},
child: Container(
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
padding: const EdgeInsets.symmetric(vertical: 11),
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
gradient: LinearGradient(
colors: professionalProvider.isProModeActive
? [const Color(0xFF374151), const Color(0xFF1F2937)]
: [const Color(0xFF42A4EF), const Color(0xFF1565C0)],
),
borderRadius: BorderRadius.circular(10),
border: professionalProvider.isProModeActive
? Border.all(
color: Colors.white.withOpacity(0.1), width: 1)
: null,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
@@ -162,14 +218,20 @@ class Sidebar extends StatelessWidget {
professionalProvider.isProModeActive
? Icons.person_outlined
: Icons.work_outline,
color: Colors.white,
color: professionalProvider.isProModeActive
? Colors.white70
: Colors.white,
size: 16,
),
const SizedBox(width: 8),
Text(
'Modo ${professionalProvider.isProModeActive ? 'Usuario' : 'Profesional'}',
style: const TextStyle(
color: Colors.white,
professionalProvider.isProModeActive
? 'Ir a modo Usuario'
: 'Ir a modo Profesional',
style: TextStyle(
color: professionalProvider.isProModeActive
? Colors.white70
: Colors.white,
fontSize: 13,
fontWeight: FontWeight.w600,
),
@@ -193,16 +255,15 @@ class Sidebar extends StatelessWidget {
);
}
BoxDecoration buildBoxDecoration() => const BoxDecoration(
BoxDecoration buildBoxDecoration(bool isProMode) => BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF0D1B3E),
Color(0xFF0A1628),
],
colors: isProMode
? const [Color(0xFF0A1F18), Color(0xFF061510)]
: const [Color(0xFF0D1B3E), Color(0xFF0A1628)],
),
boxShadow: [
boxShadow: const [
BoxShadow(
color: Colors.black38,
blurRadius: 12,