diff --git a/apps/mobile/packages/features/staff/availability/lib/src/presentation/pages/availability_page.dart b/apps/mobile/packages/features/staff/availability/lib/src/presentation/pages/availability_page.dart index 8725ceac..c07e0307 100644 --- a/apps/mobile/packages/features/staff/availability/lib/src/presentation/pages/availability_page.dart +++ b/apps/mobile/packages/features/staff/availability/lib/src/presentation/pages/availability_page.dart @@ -4,11 +4,11 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_modular/flutter_modular.dart' hide ModularWatchExtension; import 'package:intl/intl.dart'; +import 'package:krow_domain/krow_domain.dart'; import '../blocs/availability_bloc.dart'; import '../blocs/availability_event.dart'; import '../blocs/availability_state.dart'; -import 'package:krow_domain/krow_domain.dart'; class AvailabilityPage extends StatefulWidget { const AvailabilityPage({super.key}); @@ -102,7 +102,12 @@ class _AvailabilityPageState extends State { ], ); } else if (state is AvailabilityError) { - return Center(child: Text('Error: ${state.message}')); + return Center( + child: Text( + 'Error: ${state.message}', + style: UiTypography.body2r.textError, + ), + ); } return const SizedBox.shrink(); }, @@ -124,7 +129,7 @@ class _AvailabilityPageState extends State { children: [ Text( 'Quick Set Availability', - style: UiTypography.body4r.copyWith(color: UiColors.textFilter), + style: UiTypography.body2b, ), const SizedBox(height: 12), Row( @@ -172,11 +177,13 @@ class _AvailabilityPageState extends State { ? UiColors.destructive.withValues(alpha: 0.2) : UiColors.primary.withValues(alpha: 0.2), ), - backgroundColor: Colors.transparent, + backgroundColor: UiColors.transparent, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), - foregroundColor: isDestructive ? UiColors.destructive : UiColors.primary, + foregroundColor: isDestructive + ? UiColors.destructive + : UiColors.primary, ), child: Text( label, @@ -196,16 +203,9 @@ class _AvailabilityPageState extends State { return Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( - color: Colors.white, + color: UiColors.cardViewBackground, borderRadius: BorderRadius.circular(16), - border: Border.all(color: Colors.grey.shade100), - boxShadow: [ - BoxShadow( - color: UiColors.black.withValues(alpha: 0.05), - blurRadius: 2, - offset: const Offset(0, 1), - ), - ], + border: Border.all(color: UiColors.border), ), child: Column( children: [ @@ -223,11 +223,7 @@ class _AvailabilityPageState extends State { ), Text( monthYear, - style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.w600, - color: UiColors.foreground, - ), + style: UiTypography.title2b, ), _buildNavButton( UiIcons.chevronRight, @@ -257,10 +253,10 @@ class _AvailabilityPageState extends State { width: 32, height: 32, decoration: const BoxDecoration( - color: Color(0xFFF1F5F9), // slate-100 + color: UiColors.separatorSecondary, shape: BoxShape.circle, ), - child: Icon(icon, size: 20, color: UiColors.mutedForeground), + child: Icon(icon, size: 20, color: UiColors.iconSecondary), ), ); } @@ -283,26 +279,15 @@ class _AvailabilityPageState extends State { decoration: BoxDecoration( color: isSelected ? UiColors.primary - : (isAvailable - ? const Color(0xFFECFDF5) - : const Color(0xFFF8FAFC)), // emerald-50 or slate-50 + : (isAvailable ? UiColors.tagSuccess : UiColors.bgSecondary), borderRadius: BorderRadius.circular(16), border: Border.all( color: isSelected ? UiColors.primary : (isAvailable - ? const Color(0xFFA7F3D0) - : Colors.transparent), // emerald-200 + ? UiColors.success.withValues(alpha: 0.3) + : UiColors.transparent), ), - boxShadow: isSelected - ? [ - BoxShadow( - color: UiColors.primary.withValues(alpha: 0.3), - blurRadius: 8, - offset: const Offset(0, 4), - ), - ] - : null, ), child: Stack( clipBehavior: Clip.none, @@ -312,26 +297,24 @@ class _AvailabilityPageState extends State { children: [ Text( day.date.day.toString().padLeft(2, '0'), - style: TextStyle( - fontSize: 18, + style: UiTypography.title1m.copyWith( fontWeight: FontWeight.bold, color: isSelected ? UiColors.white : (isAvailable - ? const Color(0xFF047857) - : UiColors.mutedForeground), // emerald-700 + ? UiColors.textSuccess + : UiColors.textSecondary), ), ), const SizedBox(height: 2), Text( DateFormat('EEE').format(day.date), - style: TextStyle( - fontSize: 10, + style: UiTypography.footnote2r.copyWith( color: isSelected ? UiColors.white.withValues(alpha: 0.8) : (isAvailable - ? const Color(0xFF047857) - : UiColors.mutedForeground), + ? UiColors.textSuccess + : UiColors.textSecondary), ), ), ], @@ -365,16 +348,9 @@ class _AvailabilityPageState extends State { return Container( padding: const EdgeInsets.all(20), decoration: BoxDecoration( - color: Colors.white, + color: UiColors.cardViewBackground, borderRadius: BorderRadius.circular(16), - border: Border.all(color: Colors.grey.shade100), - boxShadow: [ - BoxShadow( - color: UiColors.black.withValues(alpha: 0.05), - blurRadius: 2, - offset: const Offset(0, 1), - ), - ], + border: Border.all(color: UiColors.border), ), child: Column( children: [ @@ -387,18 +363,11 @@ class _AvailabilityPageState extends State { children: [ Text( dateStr, - style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.w600, - color: UiColors.foreground, - ), + style: UiTypography.title2b, ), Text( isAvailable ? 'You are available' : 'Not available', - style: const TextStyle( - fontSize: 14, - color: UiColors.mutedForeground, - ), + style: UiTypography.body2r.textSecondary, ), ], ), @@ -430,26 +399,26 @@ class _AvailabilityPageState extends State { case 'morning': return { 'icon': UiIcons.sunrise, - 'bg': const Color(0xFFE6EBF9), // bg-[#0032A0]/10 - 'iconColor': const Color(0xFF0032A0), + 'bg': UiColors.primary.withValues(alpha: 0.1), + 'iconColor': UiColors.primary, }; case 'afternoon': return { 'icon': UiIcons.sun, - 'bg': const Color(0xFFCCD6EC), // bg-[#0032A0]/20 - 'iconColor': const Color(0xFF0032A0), + 'bg': UiColors.primary.withValues(alpha: 0.2), + 'iconColor': UiColors.primary, }; case 'evening': return { 'icon': UiIcons.moon, - 'bg': const Color(0xFFEBEDEE), // bg-[#333F48]/10 - 'iconColor': const Color(0xFF333F48), + 'bg': UiColors.bgSecondary, + 'iconColor': UiColors.foreground, }; default: return { 'icon': UiIcons.clock, - 'bg': Colors.grey.shade100, - 'iconColor': Colors.grey, + 'bg': UiColors.bgSecondary, + 'iconColor': UiColors.iconSecondary, }; } } @@ -469,14 +438,14 @@ class _AvailabilityPageState extends State { Color borderColor; if (!isEnabled) { - bgColor = const Color(0xFFF8FAFC); // slate-50 - borderColor = const Color(0xFFF1F5F9); // slate-100 + bgColor = UiColors.bgSecondary; + borderColor = UiColors.borderInactive; } else if (isActive) { bgColor = UiColors.primary.withValues(alpha: 0.05); borderColor = UiColors.primary.withValues(alpha: 0.2); } else { - bgColor = const Color(0xFFF8FAFC); // slate-50 - borderColor = const Color(0xFFE2E8F0); // slate-200 + bgColor = UiColors.bgSecondary; + borderColor = UiColors.borderPrimary; } // Text colors @@ -485,13 +454,13 @@ class _AvailabilityPageState extends State { : UiColors.mutedForeground; final subtitleColor = (isEnabled && isActive) ? UiColors.mutedForeground - : Colors.grey.shade400; + : UiColors.textInactive; return GestureDetector( onTap: isEnabled ? () => context.read().add( - ToggleSlotStatus(day, slot.id), - ) + ToggleSlotStatus(day, slot.id), + ) : null, child: AnimatedContainer( duration: const Duration(milliseconds: 200), @@ -526,15 +495,11 @@ class _AvailabilityPageState extends State { children: [ Text( slot.label, - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w500, - color: titleColor, - ), + style: UiTypography.body2m.copyWith(color: titleColor), ), Text( slot.timeRange, - style: TextStyle(fontSize: 12, color: subtitleColor), + style: UiTypography.body3r.copyWith(color: subtitleColor), ), ], ), @@ -548,7 +513,11 @@ class _AvailabilityPageState extends State { color: UiColors.primary, shape: BoxShape.circle, ), - child: const Icon(UiIcons.check, size: 16, color: UiColors.white), + child: const Icon( + UiIcons.check, + size: 16, + color: UiColors.white, + ), ) else if (isEnabled && !isActive) Container( @@ -557,9 +526,9 @@ class _AvailabilityPageState extends State { decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all( - color: const Color(0xFFCBD5E1), + color: UiColors.borderStill, width: 2, - ), // slate-300 + ), ), ), ], @@ -575,27 +544,23 @@ class _AvailabilityPageState extends State { color: UiColors.primary.withValues(alpha: 0.05), borderRadius: BorderRadius.circular(12), ), - child: const Row( + child: Row( crossAxisAlignment: CrossAxisAlignment.start, + spacing: 12, children: [ - Icon(UiIcons.clock, size: 20, color: UiColors.primary), - SizedBox(width: 12), + const Icon(UiIcons.clock, size: 20, color: UiColors.primary), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, + spacing: 4, children: [ Text( 'Auto-Match uses your availability', - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w500, - color: UiColors.foreground, - ), + style: UiTypography.body2m, ), - SizedBox(height: 2), Text( "When enabled, you'll only be matched with shifts during your available times.", - style: TextStyle(fontSize: 12, color: UiColors.mutedForeground), + style: UiTypography.body3r.textSecondary, ), ], ), @@ -605,4 +570,3 @@ class _AvailabilityPageState extends State { ); } } - diff --git a/apps/mobile/packages/features/staff/clock_in/lib/src/presentation/pages/clock_in_page.dart b/apps/mobile/packages/features/staff/clock_in/lib/src/presentation/pages/clock_in_page.dart index bd389ab6..adfa9cf8 100644 --- a/apps/mobile/packages/features/staff/clock_in/lib/src/presentation/pages/clock_in_page.dart +++ b/apps/mobile/packages/features/staff/clock_in/lib/src/presentation/pages/clock_in_page.dart @@ -64,14 +64,6 @@ class _ClockInPageState extends State { final bool isCheckedIn = state.attendance.isCheckedIn && isActiveSelected; - // Format times for display - final String checkInStr = checkInTime != null - ? DateFormat('h:mm a').format(checkInTime) - : '--:-- --'; - final String checkOutStr = checkOutTime != null - ? DateFormat('h:mm a').format(checkOutTime) - : '--:-- --'; - return Scaffold( appBar: UiAppBar( titleWidget: Text( @@ -117,7 +109,6 @@ class _ClockInPageState extends State { ), const SizedBox(height: 20), - // Your Activity Header const Text( "Your Activity",