From 825cffbc33667915c2a96edd46ffa5e13b983bb7 Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Tue, 10 Mar 2026 12:07:36 -0400 Subject: [PATCH] feat: Update typography styles and improve layout in coverage components --- .../design_system/lib/src/ui_typography.dart | 2 +- .../src/presentation/pages/coverage_page.dart | 28 +++++++----- .../widgets/coverage_quick_stats.dart | 44 ++++++++----------- .../widgets/late_workers_alert.dart | 19 ++++---- 4 files changed, 44 insertions(+), 49 deletions(-) diff --git a/apps/mobile/packages/design_system/lib/src/ui_typography.dart b/apps/mobile/packages/design_system/lib/src/ui_typography.dart index 42567ce4..2293ecd8 100644 --- a/apps/mobile/packages/design_system/lib/src/ui_typography.dart +++ b/apps/mobile/packages/design_system/lib/src/ui_typography.dart @@ -322,7 +322,7 @@ class UiTypography { /// Body 1 Medium - Font: Instrument Sans, Size: 16, Height: 1.5 (#121826) static final TextStyle body1m = _primaryBase.copyWith( - fontWeight: FontWeight.w500, + fontWeight: FontWeight.w600, fontSize: 16, height: 1.5, letterSpacing: -0.025, diff --git a/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/pages/coverage_page.dart b/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/pages/coverage_page.dart index 7d3bf602..592a8c40 100644 --- a/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/pages/coverage_page.dart +++ b/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/pages/coverage_page.dart @@ -59,7 +59,8 @@ class _CoveragePageState extends State { child: Scaffold( body: BlocConsumer( listener: (BuildContext context, CoverageState state) { - if (state.status == CoverageStatus.failure && state.errorMessage != null) { + if (state.status == CoverageStatus.failure && + state.errorMessage != null) { UiSnackbar.show( context, message: translateErrorKey(state.errorMessage!), @@ -251,8 +252,8 @@ class _CoveragePageState extends State { UiButton.secondary( text: 'Retry', onPressed: () => BlocProvider.of(context).add( - const CoverageRefreshRequested(), - ), + const CoverageRefreshRequested(), + ), ), ], ), @@ -265,22 +266,25 @@ class _CoveragePageState extends State { padding: const EdgeInsets.all(UiConstants.space5), child: Column( crossAxisAlignment: CrossAxisAlignment.start, + spacing: UiConstants.space6, children: [ - if (state.stats != null) ...[ - CoverageQuickStats(stats: state.stats!), - const SizedBox(height: UiConstants.space5), - ], - if (state.stats != null && state.stats!.late > 0) ...[ - LateWorkersAlert(lateCount: state.stats!.late), - const SizedBox(height: UiConstants.space5), - ], + Column( + spacing: UiConstants.space2, + children: [ + if (state.stats != null && state.stats!.late > 0) ...[ + LateWorkersAlert(lateCount: state.stats!.late), + ], + if (state.stats != null) ...[ + CoverageQuickStats(stats: state.stats!), + ], + ], + ), Text( 'Shifts (${state.shifts.length})', style: UiTypography.title2b.copyWith( color: UiColors.textPrimary, ), ), - const SizedBox(height: UiConstants.space3), CoverageShiftList(shifts: state.shifts), const SizedBox( height: UiConstants.space24, diff --git a/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/coverage_quick_stats.dart b/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/coverage_quick_stats.dart index e2b90af2..25f98b0f 100644 --- a/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/coverage_quick_stats.dart +++ b/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/coverage_quick_stats.dart @@ -18,6 +18,7 @@ class CoverageQuickStats extends StatelessWidget { @override Widget build(BuildContext context) { return Row( + spacing: UiConstants.space2, children: [ Expanded( child: _StatCard( @@ -27,7 +28,6 @@ class CoverageQuickStats extends StatelessWidget { color: UiColors.iconSuccess, ), ), - const SizedBox(width: UiConstants.space3), Expanded( child: _StatCard( icon: UiIcons.clock, @@ -36,15 +36,6 @@ class CoverageQuickStats extends StatelessWidget { color: UiColors.textWarning, ), ), - const SizedBox(width: UiConstants.space3), - Expanded( - child: _StatCard( - icon: UiIcons.warning, - label: 'Late', - value: stats.late.toString(), - color: UiColors.destructive, - ), - ), ], ); } @@ -84,27 +75,30 @@ class _StatCard extends StatelessWidget { width: 0.75, ), ), - child: Column( + child: Row( + spacing: UiConstants.space2, children: [ Icon( icon, color: color, size: UiConstants.space6, ), - const SizedBox(height: UiConstants.space2), - Text( - value, - style: UiTypography.title1m.copyWith( - color: UiColors.textPrimary, - ), - ), - const SizedBox(height: UiConstants.space1), - Text( - label, - style: UiTypography.body3r.copyWith( - color: UiColors.mutedForeground, - ), - textAlign: TextAlign.center, + Row( + spacing: UiConstants.space1, + children: [ + Text( + value, + style: UiTypography.title1b.copyWith( + color: color, + ), + ), + Text( + label, + style: UiTypography.body3r.copyWith( + color: color, + ), + ), + ], ), ], ), diff --git a/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/late_workers_alert.dart b/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/late_workers_alert.dart index c501796a..8090e0a0 100644 --- a/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/late_workers_alert.dart +++ b/apps/mobile/packages/features/client/client_coverage/lib/src/presentation/widgets/late_workers_alert.dart @@ -22,32 +22,29 @@ class LateWorkersAlert extends StatelessWidget { color: UiColors.destructive.withValues(alpha: 0.1), borderRadius: UiConstants.radiusLg, border: Border.all( - color: UiColors.destructive.withValues(alpha: 0.3), + color: UiColors.destructive, + width: 0.5, ), ), child: Row( + spacing: UiConstants.space4, children: [ const Icon( UiIcons.warning, color: UiColors.destructive, - size: UiConstants.space5, ), - const SizedBox(width: UiConstants.space3), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text( - 'Late Workers Alert', - style: UiTypography.body1b.copyWith( - color: UiColors.destructive, - ), - ), - const SizedBox(height: UiConstants.space1), Text( '$lateCount ${lateCount == 1 ? 'worker is' : 'workers are'} running late', + style: UiTypography.body1b.textError, + ), + Text( + 'Auto-backup system system is searching for replacements.', style: UiTypography.body3r.copyWith( - color: UiColors.destructiveForeground, + color: UiColors.textError.withValues(alpha: 0.7), ), ), ],