chore: Redesign settings profile header UI

Updated the SettingsProfileHeader widget to use a lighter background, reduced the expanded height, and adjusted layout to a horizontal row with updated avatar and text styles. Added new spacing constants to UiConstants for improved layout control.

apps/mobile/packages/design_system/lib/src/ui_constants.dart

@@ -5,11 +5,11 @@ class UiConstants {
   UiConstants._();
 
   // --- Border Radii ---
-  
+
   /// Base radius: 12px
   static const double radiusBase = 12.0;
   static final BorderRadius radiusLg = BorderRadius.circular(radiusBase);
-  
+
   /// Medium radius: 6px
   static const double radiusMdValue = 6.0;
   static final BorderRadius radiusMd = BorderRadius.circular(radiusMdValue);
@@ -19,12 +19,12 @@ class UiConstants {
 
   /// Extra small radius: 2px
   static final BorderRadius radiusXs = BorderRadius.circular(2.0);
-  
+
   /// Large/Full radius
   static final BorderRadius radiusFull = BorderRadius.circular(999.0);
 
   // --- Spacing ---
-  
+
   static const double space0 = 0.0;
   static const double space1 = 4.0;
   static const double space2 = 8.0;
@@ -35,4 +35,6 @@ class UiConstants {
   static const double space8 = 32.0;
   static const double space10 = 40.0;
   static const double space12 = 48.0;
+  static const double space14 = 56.0;
+  static const double space16 = 64.0;
 }

apps/mobile/packages/features/client/settings/lib/src/presentation/widgets/client_settings_page/settings_profile_header.dart

@@ -13,64 +13,63 @@ class SettingsProfileHeader extends StatelessWidget {
     final labels = t.client_settings.profile;
 
     return SliverAppBar(
-      backgroundColor: UiColors.primary,
+      backgroundColor: UiColors.bgSecondary,
-      expandedHeight: 200,
+      expandedHeight: 140,
       pinned: true,
+      elevation: 0,
+      shape: const Border(bottom: BorderSide(color: UiColors.border, width: 1)),
+      leading: IconButton(
+        icon: const Icon(UiIcons.chevronLeft, color: UiColors.textSecondary),
+        onPressed: () => Modular.to.pop(),
+      ),
       flexibleSpace: FlexibleSpaceBar(
         background: Container(
-          decoration: const BoxDecoration(
+          padding: const EdgeInsets.symmetric(horizontal: UiConstants.space8),
-            gradient: LinearGradient(
+          margin: const EdgeInsets.only(top: UiConstants.space14),
-              colors: [UiColors.primary, Color(0xFF0047FF)],
+          child: Row(
-              begin: Alignment.topLeft,
+            crossAxisAlignment: CrossAxisAlignment.center,
-              end: Alignment.bottomRight,
+            mainAxisAlignment: MainAxisAlignment.start,
-            ),
+            spacing: UiConstants.space4,
-          ),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              const SizedBox(height: UiConstants.space5 * 2),
               Container(
-                width: 80,
+                width: 64,
-                height: 80,
+                height: 64,
                 decoration: BoxDecoration(
                   shape: BoxShape.circle,
-                  border: Border.all(
+                  border: Border.all(color: UiColors.border, width: 2),
-                    color: UiColors.white.withValues(alpha: 0.24),
-                    width: 4,
-                  ),
                   color: UiColors.white,
                 ),
                 child: const Center(
                   child: Text(
                     'C',
                     style: TextStyle(
-                      fontSize: 32,
+                      fontSize: 24,
                       fontWeight: FontWeight.bold,
                       color: UiColors.primary,
                     ),
                   ),
                 ),
               ),
-              const SizedBox(height: UiConstants.space3),
+              Column(
-              Text(
+                crossAxisAlignment: CrossAxisAlignment.start,
-                'Your Company',
-                style: UiTypography.body1b.copyWith(color: UiColors.white),
-              ),
-              const SizedBox(height: UiConstants.space1),
-              Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  Icon(
+                  Text('Your Company', style: UiTypography.body1b),
-                    UiIcons.mail,
+                  const SizedBox(height: UiConstants.space1),
-                    size: 14,
+                  Row(
-                    color: UiColors.white.withValues(alpha: 0.7),
+                    mainAxisAlignment: MainAxisAlignment.start,
-                  ),
+                    spacing: UiConstants.space1,
-                  const SizedBox(width: UiConstants.space2),
+                    children: [
-                  Text(
+                      Icon(
-                    'client@example.com',
+                        UiIcons.mail,
-                    style: UiTypography.footnote1r.copyWith(
+                        size: 14,
-                      color: UiColors.white.withValues(alpha: 0.7),
+                        color: UiColors.textSecondary,
-                    ),
+                      ),
+                      Text(
+                        'client@example.com',
+                        style: UiTypography.footnote1r.textSecondary,
+                      ),
+                    ],
                   ),
                 ],
               ),
@@ -78,14 +77,7 @@ class SettingsProfileHeader extends StatelessWidget {
           ),
         ),
       ),
-      leading: IconButton(
+      title: Text(labels.title, style: UiTypography.body1b),
-        icon: const Icon(UiIcons.arrowLeft, color: UiColors.white),
-        onPressed: () => Modular.to.pop(),
-      ),
-      title: Text(
-        labels.title,
-        style: UiTypography.body1b.copyWith(color: UiColors.white),
-      ),
     );
   }
 }