refactor: Update UI theme and shift details layout for improved consistency
This commit is contained in:
Achintha Isuru
@@ -40,7 +40,7 @@ class UiTheme {
|
||||
dividerTheme: const DividerThemeData(
|
||||
color: UiColors.separatorPrimary,
|
||||
space: 1,
|
||||
thickness: 1,
|
||||
thickness: 0.5,
|
||||
),
|
||||
|
||||
// Card Theme
|
||||
|
||||
@@ -72,9 +72,8 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: UiConstants.space3),
|
||||
decoration: BoxDecoration(
|
||||
color: UiColors.background,
|
||||
borderRadius: BorderRadius.circular(UiConstants.radiusMdValue),
|
||||
border: Border.all(color: UiColors.border),
|
||||
color: UiColors.bgThird,
|
||||
borderRadius: BorderRadius.circular(UiConstants.radiusBase),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
@@ -104,8 +103,8 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(UiConstants.space3),
|
||||
decoration: BoxDecoration(
|
||||
color: UiColors.background,
|
||||
borderRadius: BorderRadius.circular(UiConstants.radiusMdValue),
|
||||
color: UiColors.bgThird,
|
||||
borderRadius: BorderRadius.circular(UiConstants.radiusBase),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
@@ -184,12 +183,13 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
|
||||
children: [
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(UiConstants.space5),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Role & Client Section
|
||||
Row(
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(UiConstants.space5),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: UiConstants.space4,
|
||||
children: [
|
||||
@@ -211,10 +211,10 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
displayShift.title,
|
||||
@@ -223,27 +223,34 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
|
||||
),
|
||||
Text(
|
||||
displayShift.clientName,
|
||||
style: UiTypography.body1m.textSecondary,
|
||||
style:
|
||||
UiTypography.body1m.textSecondary,
|
||||
),
|
||||
Text(
|
||||
displayShift.locationAddress,
|
||||
style: UiTypography.body2r.textSecondary,
|
||||
style:
|
||||
UiTypography.body2r.textSecondary,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: UiConstants.space6),
|
||||
),
|
||||
|
||||
const Divider(height: 1, thickness: 0.5),
|
||||
|
||||
// Date Section
|
||||
Column(
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(UiConstants.space5),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
i18n.shift_date,
|
||||
style:
|
||||
UiTypography.titleUppercase4b.textSecondary,
|
||||
style: UiTypography
|
||||
.titleUppercase4b
|
||||
.textSecondary,
|
||||
),
|
||||
const SizedBox(height: UiConstants.space2),
|
||||
Row(
|
||||
@@ -256,16 +263,21 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
|
||||
const SizedBox(width: UiConstants.space2),
|
||||
Text(
|
||||
_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)
|
||||
Row(
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(UiConstants.space5),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _buildStatCard(
|
||||
@@ -286,16 +298,20 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
|
||||
Expanded(
|
||||
child: _buildStatCard(
|
||||
UiIcons.clock,
|
||||
"${duration.toStringAsFixed(1)}",
|
||||
duration.toStringAsFixed(1),
|
||||
"Hours",
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: UiConstants.space6),
|
||||
),
|
||||
|
||||
const Divider(height: 1, thickness: 0.5),
|
||||
|
||||
// Time Section (New)
|
||||
Row(
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(UiConstants.space5),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
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)
|
||||
Column(
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(UiConstants.space5),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"LOCATION",
|
||||
style:
|
||||
UiTypography.titleUppercase4b.textSecondary,
|
||||
style: UiTypography
|
||||
.titleUppercase4b
|
||||
.textSecondary,
|
||||
),
|
||||
const SizedBox(height: UiConstants.space3),
|
||||
Row(
|
||||
@@ -348,10 +369,13 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
|
||||
displayShift!
|
||||
.locationAddress
|
||||
.isNotEmpty
|
||||
? displayShift!.locationAddress
|
||||
? displayShift!
|
||||
.locationAddress
|
||||
: 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
|
||||
if ((displayShift.description ?? '').isNotEmpty) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(UiConstants.space5),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
i18n.job_description,
|
||||
style:
|
||||
UiTypography.titleUppercase4b.textSecondary,
|
||||
style: UiTypography
|
||||
.titleUppercase4b
|
||||
.textSecondary,
|
||||
),
|
||||
const SizedBox(height: UiConstants.space2),
|
||||
Text(
|
||||
displayShift.description!,
|
||||
style: UiTypography.body2r.textSecondary,
|
||||
),
|
||||
const SizedBox(height: UiConstants.space8),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Bottom Action Bar
|
||||
Container(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
@@ -421,7 +456,7 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
|
||||
border: Border(top: BorderSide(color: UiColors.border)),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: UiColors.black.withValues(alpha: 0.05),
|
||||
color: UiColors.popupShadow.withValues(alpha: 0.05),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, -4),
|
||||
),
|
||||
@@ -628,46 +663,18 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
|
||||
}
|
||||
|
||||
if (status == 'open' || status == 'available') {
|
||||
return Row(
|
||||
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(
|
||||
return ElevatedButton(
|
||||
onPressed: () => _bookShift(context, shift),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: UiColors.primary,
|
||||
foregroundColor: UiColors.white,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: UiConstants.space4,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(vertical: UiConstants.space4),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(UiConstants.radiusBase),
|
||||
),
|
||||
elevation: 0,
|
||||
),
|
||||
child: Text(i18n.apply_now, style: UiTypography.body2b.white),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user