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 space10 = 40.0;
static const double space12 = 48.0;
static const double space14 = 56.0;
static const double space16 = 64.0;
}

82
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;
return SliverAppBar(
backgroundColor: UiColors.primary,
expandedHeight: 200,
backgroundColor: UiColors.bgSecondary,
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(
gradient: LinearGradient(
colors: [UiColors.primary, Color(0xFF0047FF)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space8),
margin: const EdgeInsets.only(top: UiConstants.space14),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
spacing: UiConstants.space4,
children: [
const SizedBox(height: UiConstants.space5 * 2),
Container(
width: 80,
height: 80,
width: 64,
height: 64,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: UiColors.white.withValues(alpha: 0.24),
width: 4,
),
border: Border.all(color: UiColors.border, width: 2),
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),
Text(
'Your Company',
style: UiTypography.body1b.copyWith(color: UiColors.white),
),
const SizedBox(height: UiConstants.space1),
Row(
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
UiIcons.mail,
size: 14,
color: UiColors.white.withValues(alpha: 0.7),
),
const SizedBox(width: UiConstants.space2),
Text(
'client@example.com',
style: UiTypography.footnote1r.copyWith(
color: UiColors.white.withValues(alpha: 0.7),
),
Text('Your Company', style: UiTypography.body1b),
const SizedBox(height: UiConstants.space1),
Row(
mainAxisAlignment: MainAxisAlignment.start,
spacing: UiConstants.space1,
children: [
Icon(
UiIcons.mail,
size: 14,
color: UiColors.textSecondary,
),
Text(
'client@example.com',
style: UiTypography.footnote1r.textSecondary,
),
],
),
],
),
@@ -78,14 +77,7 @@ class SettingsProfileHeader extends StatelessWidget {
),
),
),
leading: IconButton(
icon: const Icon(UiIcons.arrowLeft, color: UiColors.white),
onPressed: () => Modular.to.pop(),
),
title: Text(
labels.title,
style: UiTypography.body1b.copyWith(color: UiColors.white),
),
title: Text(labels.title, style: UiTypography.body1b),
);
}
}