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

refactor: Update UI theme and shift details layout for improved consistency

Browse Source
This commit is contained in:
Achintha Isuru
2026-02-16 13:09:10 -05:00
parent e6b512ee84
commit 2a0b39926a
2 changed files with 231 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,7 @@ class UiTheme {
dividerTheme: const DividerThemeData( dividerTheme: const DividerThemeData(
color: UiColors.separatorPrimary, color: UiColors.separatorPrimary,
space: 1, space: 1,
thickness: 1, thickness: 0.5,
), ),
// Card Theme // Card Theme

131
apps/mobile/packages/features/staff/shifts/lib/src/presentation/pages/shift_details_page.dart
View File

@@ -72,9 +72,8 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
return Container( return Container(
padding: const EdgeInsets.symmetric(vertical: UiConstants.space3), padding: const EdgeInsets.symmetric(vertical: UiConstants.space3),
decoration: BoxDecoration( decoration: BoxDecoration(
color: UiColors.background, color: UiColors.bgThird,
borderRadius: BorderRadius.circular(UiConstants.radiusMdValue), borderRadius: BorderRadius.circular(UiConstants.radiusBase),
border: Border.all(color: UiColors.border),
), ),
child: Column( child: Column(
children: [ children: [
@@ -104,8 +103,8 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
return Container( return Container(
padding: const EdgeInsets.all(UiConstants.space3), padding: const EdgeInsets.all(UiConstants.space3),
decoration: BoxDecoration( decoration: BoxDecoration(
color: UiColors.background, color: UiColors.bgThird,
borderRadius: BorderRadius.circular(UiConstants.radiusMdValue), borderRadius: BorderRadius.circular(UiConstants.radiusBase),
), ),
child: Column( child: Column(
children: [ children: [
@@ -184,12 +183,13 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
children: [ children: [
Expanded( Expanded(
child: SingleChildScrollView( child: SingleChildScrollView(
padding: const EdgeInsets.all(UiConstants.space5),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Role & Client Section // Role & Client Section
Row( Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
spacing: UiConstants.space4, spacing: UiConstants.space4,
children: [ children: [
@@ -211,10 +211,10 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
), ),
), ),
), ),
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment:
CrossAxisAlignment.start,
children: [ children: [
Text( Text(
displayShift.title, displayShift.title,
@@ -223,27 +223,34 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
), ),
Text( Text(
displayShift.clientName, displayShift.clientName,
style: UiTypography.body1m.textSecondary, style:
UiTypography.body1m.textSecondary,
), ),
Text( Text(
displayShift.locationAddress, displayShift.locationAddress,
style: UiTypography.body2r.textSecondary, style:
UiTypography.body2r.textSecondary,
), ),
], ],
), ),
), ),
], ],
), ),
const SizedBox(height: UiConstants.space6), ),
const Divider(height: 1, thickness: 0.5),
// Date Section // Date Section
Column( Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
i18n.shift_date, i18n.shift_date,
style: style: UiTypography
UiTypography.titleUppercase4b.textSecondary, .titleUppercase4b
.textSecondary,
), ),
const SizedBox(height: UiConstants.space2), const SizedBox(height: UiConstants.space2),
Row( Row(
@@ -256,16 +263,21 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
const SizedBox(width: UiConstants.space2), const SizedBox(width: UiConstants.space2),
Text( Text(
_formatDate(displayShift.date), _formatDate(displayShift.date),
style: UiTypography.headline5m.textPrimary, style:
UiTypography.headline5m.textPrimary,
), ),
], ],
), ),
], ],
), ),
const SizedBox(height: UiConstants.space6), ),
const Divider(height: 1, thickness: 0.5),
// Stats Row (New) // Stats Row (New)
Row( Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Row(
children: [ children: [
Expanded( Expanded(
child: _buildStatCard( child: _buildStatCard(
@@ -286,16 +298,20 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
Expanded( Expanded(
child: _buildStatCard( child: _buildStatCard(
UiIcons.clock, UiIcons.clock,
"${duration.toStringAsFixed(1)}", duration.toStringAsFixed(1),
"Hours", "Hours",
), ),
), ),
], ],
), ),
const SizedBox(height: UiConstants.space6), ),
const Divider(height: 1, thickness: 0.5),
// Time Section (New) // Time Section (New)
Row( Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Row(
children: [ children: [
Expanded( Expanded(
child: _buildTimeBox( child: _buildTimeBox(
@@ -312,16 +328,21 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
), ),
], ],
), ),
const SizedBox(height: UiConstants.space6), ),
const Divider(height: 1, thickness: 0.5),
// Location Section (New with Map) // Location Section (New with Map)
Column( Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
"LOCATION", "LOCATION",
style: style: UiTypography
UiTypography.titleUppercase4b.textSecondary, .titleUppercase4b
.textSecondary,
), ),
const SizedBox(height: UiConstants.space3), const SizedBox(height: UiConstants.space3),
Row( Row(
@@ -348,10 +369,13 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
displayShift! displayShift!
.locationAddress .locationAddress
.isNotEmpty .isNotEmpty
? displayShift!.locationAddress ? displayShift!
.locationAddress
: displayShift!.location, : displayShift!.location,
), ),
duration: const Duration(seconds: 3), duration: const Duration(
seconds: 3,
),
), ),
); );
}, },
@@ -387,26 +411,37 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
), ),
], ],
), ),
const SizedBox(height: UiConstants.space8), ),
const Divider(height: 1, thickness: 0.5),
// Description / Instructions // Description / Instructions
if ((displayShift.description ?? '').isNotEmpty) ...[ if ((displayShift.description ?? '').isNotEmpty) ...[
Padding(
padding: const EdgeInsets.all(UiConstants.space5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text( Text(
i18n.job_description, i18n.job_description,
style: style: UiTypography
UiTypography.titleUppercase4b.textSecondary, .titleUppercase4b
.textSecondary,
), ),
const SizedBox(height: UiConstants.space2), const SizedBox(height: UiConstants.space2),
Text( Text(
displayShift.description!, displayShift.description!,
style: UiTypography.body2r.textSecondary, style: UiTypography.body2r.textSecondary,
), ),
const SizedBox(height: UiConstants.space8), ],
),
),
], ],
], ],
), ),
), ),
), ),
// Bottom Action Bar // Bottom Action Bar
Container( Container(
padding: EdgeInsets.fromLTRB( padding: EdgeInsets.fromLTRB(
@@ -421,7 +456,7 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
border: Border(top: BorderSide(color: UiColors.border)), border: Border(top: BorderSide(color: UiColors.border)),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: UiColors.black.withValues(alpha: 0.05), color: UiColors.popupShadow.withValues(alpha: 0.05),
blurRadius: 10, blurRadius: 10,
offset: const Offset(0, -4), offset: const Offset(0, -4),
), ),
@@ -628,46 +663,18 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
} }
if (status == 'open' || status == 'available') { if (status == 'open' || status == 'available') {
return Row( return ElevatedButton(
children: [
Expanded(
child: OutlinedButton(
onPressed: () => _declineShift(context, shift.id),
style: OutlinedButton.styleFrom(
foregroundColor: UiColors.textSecondary,
padding: const EdgeInsets.symmetric(
vertical: UiConstants.space4,
),
side: const BorderSide(color: UiColors.border),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(UiConstants.radiusBase),
),
),
child: Text(
i18n.decline,
style: UiTypography.body2b.textSecondary,
),
),
),
const SizedBox(width: UiConstants.space4),
Expanded(
child: ElevatedButton(
onPressed: () => _bookShift(context, shift), onPressed: () => _bookShift(context, shift),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: UiColors.primary, backgroundColor: UiColors.primary,
foregroundColor: UiColors.white, foregroundColor: UiColors.white,
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(vertical: UiConstants.space4),
vertical: UiConstants.space4,
),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(UiConstants.radiusBase), borderRadius: BorderRadius.circular(UiConstants.radiusBase),
), ),
elevation: 0, elevation: 0,
), ),
child: Text(i18n.apply_now, style: UiTypography.body2b.white), child: Text(i18n.apply_now, style: UiTypography.body2b.white),
),
),
],
); );
} }