Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Redesign settings profile header UI

Browse Source 
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.
This commit is contained in:
Achintha Isuru
2026-01-22 11:59:17 -05:00
parent 6ef691881a
commit 5bc5530540
2 changed files with 43 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/mobile/packages/design_system/lib/src/ui_constants.dart
View File

@@ -35,4 +35,6 @@ class UiConstants {
static const double space8 = 32.0; static const double space8 = 32.0;
static const double space10 = 40.0; static const double space10 = 40.0;
static const double space12 = 48.0; static const double space12 = 48.0;
static const double space14 = 56.0;
static const double space16 = 64.0;
} }

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

@@ -13,64 +13,63 @@ class SettingsProfileHeader extends StatelessWidget {
final labels = t.client_settings.profile; final labels = t.client_settings.profile;
return SliverAppBar( return SliverAppBar(
backgroundColor: UiColors.primary, backgroundColor: UiColors.bgSecondary,
expandedHeight: 200, expandedHeight: 140,
pinned: true, 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( flexibleSpace: FlexibleSpaceBar(
background: Container( 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: [ children: [
const SizedBox(height: UiConstants.space5 * 2),
Container( Container(
width: 80, width: 64,
height: 80, height: 64,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, 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, color: UiColors.white,
), ),
child: const Center( child: const Center(
child: Text( child: Text(
'C', 'C',
style: TextStyle( style: TextStyle(
fontSize: 32, fontSize: 24,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: UiColors.primary, color: UiColors.primary,
), ),
), ),
), ),
), ),
const SizedBox(height: UiConstants.space3), Column(
Text( crossAxisAlignment: CrossAxisAlignment.start,
'Your Company', mainAxisAlignment: MainAxisAlignment.center,
style: UiTypography.body1b.copyWith(color: UiColors.white), children: [
), Text('Your Company', style: UiTypography.body1b),
const SizedBox(height: UiConstants.space1), const SizedBox(height: UiConstants.space1),
Row( Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.start,
spacing: UiConstants.space1,
children: [ children: [
Icon( Icon(
UiIcons.mail, UiIcons.mail,
size: 14, size: 14,
color: UiColors.white.withValues(alpha: 0.7), color: UiColors.textSecondary,
), ),
const SizedBox(width: UiConstants.space2),
Text( Text(
'client@example.com', 'client@example.com',
style: UiTypography.footnote1r.copyWith( style: UiTypography.footnote1r.textSecondary,
color: UiColors.white.withValues(alpha: 0.7),
), ),
],
), ),
], ],
), ),
@@ -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),
),
); );
} }
} }