style(shift_header): improve layout and styling of shift header components

This commit is contained in:
Achintha Isuru
2026-03-19 00:27:42 -04:00
parent af1ff53749
commit c8f944e1ac

View File

@@ -86,7 +86,7 @@ class ShiftHeader extends StatelessWidget {
children: <Widget>[ children: <Widget>[
// Row 1: status dot, title + time, badge, chevron. // Row 1: status dot, title + time, badge, chevron.
Row( Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[ children: <Widget>[
// Status dot. // Status dot.
Padding( Padding(
@@ -100,7 +100,7 @@ class ShiftHeader extends StatelessWidget {
), ),
), ),
), ),
const SizedBox(width: UiConstants.space3), const SizedBox(width: UiConstants.space4),
// Title and start time. // Title and start time.
Expanded( Expanded(
child: Column( child: Column(
@@ -157,21 +157,29 @@ class ShiftHeader extends StatelessWidget {
const SizedBox(height: UiConstants.space3), const SizedBox(height: UiConstants.space3),
// Progress bar. // Progress bar.
ClipRRect( ClipRRect(
borderRadius: UiConstants.radiusSm, borderRadius: UiConstants.radiusFull,
child: Container( child: SizedBox(
height: 6, height: 8,
decoration: const BoxDecoration( width: double.infinity,
color: UiColors.muted, child: Stack(
), children: <Widget>[
child: FractionallySizedBox( Container(
alignment: Alignment.centerLeft, decoration: BoxDecoration(
widthFactor: fillFraction, color: UiColors.muted,
child: Container( borderRadius: UiConstants.radiusFull,
decoration: BoxDecoration( ),
color: statusColor,
borderRadius: UiConstants.radiusSm,
), ),
), FractionallySizedBox(
alignment: Alignment.centerLeft,
widthFactor: fillFraction,
child: Container(
decoration: BoxDecoration(
color: statusColor,
borderRadius: UiConstants.radiusFull,
),
),
),
],
), ),
), ),
), ),
@@ -181,9 +189,7 @@ class ShiftHeader extends StatelessWidget {
'$onSiteCount ${stats.on_site} · ' '$onSiteCount ${stats.on_site} · '
'$enRouteCount ${stats.en_route} · ' '$enRouteCount ${stats.en_route} · '
'$lateCount ${stats.late}', '$lateCount ${stats.late}',
style: UiTypography.body3r.copyWith( style: UiTypography.body3r.textSecondary,
color: UiColors.textSecondary,
),
), ),
], ],
), ),