diff --git a/apps/mobile/packages/design_system/lib/design_system.dart b/apps/mobile/packages/design_system/lib/design_system.dart index b447dd7b..2bfc01d4 100644 --- a/apps/mobile/packages/design_system/lib/design_system.dart +++ b/apps/mobile/packages/design_system/lib/design_system.dart @@ -10,7 +10,5 @@ export 'src/widgets/ui_step_indicator.dart'; export 'src/widgets/ui_icon_button.dart'; export 'src/widgets/ui_button.dart'; export 'src/widgets/ui_chip.dart'; -export 'src/widgets/ui_error_snackbar.dart'; -export 'src/widgets/ui_success_snackbar.dart'; export 'src/widgets/ui_loading_page.dart'; export 'src/widgets/ui_snackbar.dart'; diff --git a/apps/mobile/packages/design_system/lib/src/ui_theme.dart b/apps/mobile/packages/design_system/lib/src/ui_theme.dart index 2b098529..98ee7214 100644 --- a/apps/mobile/packages/design_system/lib/src/ui_theme.dart +++ b/apps/mobile/packages/design_system/lib/src/ui_theme.dart @@ -255,7 +255,7 @@ class UiTheme { } return UiColors.switchInactive; }), - thumbColor: const WidgetStatePropertyAll(UiColors.white), + thumbColor: const WidgetStatePropertyAll(UiColors.white), ), // Checkbox Theme diff --git a/apps/mobile/packages/design_system/lib/src/widgets/ui_error_snackbar.dart b/apps/mobile/packages/design_system/lib/src/widgets/ui_error_snackbar.dart deleted file mode 100644 index c35e36ae..00000000 --- a/apps/mobile/packages/design_system/lib/src/widgets/ui_error_snackbar.dart +++ /dev/null @@ -1,202 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:core_localization/core_localization.dart'; -import '../ui_colors.dart'; -import '../ui_typography.dart'; - -/// Centralized error snackbar for consistent error presentation across the app. -/// -/// This widget automatically resolves localization keys and displays -/// user-friendly error messages with optional error codes for support. -/// -/// Usage: -/// ```dart -/// UiErrorSnackbar.show( -/// context, -/// messageKey: 'errors.auth.invalid_credentials', -/// errorCode: 'AUTH_001', -/// ); -/// ``` -class UiErrorSnackbar { - /// Shows an error snackbar with a localized message. - /// - /// [messageKey] should be a dot-separated path like 'errors.auth.invalid_credentials' - /// [errorCode] is optional and will be shown in smaller text for support reference - /// [duration] controls how long the snackbar is visible - static void show( - BuildContext context, { - required String messageKey, - String? errorCode, - Duration duration = const Duration(seconds: 4), - }) { - // 1. Added explicit type 'Translations' to satisfy the lint - final Translations texts = Translations.of(context); - final String message = _getMessageFromKey(texts, messageKey); - - ScaffoldMessenger.of(context).showSnackBar( - SnackBar( - content: Row( - children: [ - const Icon(Icons.error_outline, color: UiColors.white), - const SizedBox(width: 12), - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Text( - message, - style: UiTypography.body2m.copyWith(color: UiColors.white), - ), - if (errorCode != null) ...[ - const SizedBox(height: 4), - Text( - 'Error Code: $errorCode', - style: UiTypography.footnote2r.copyWith( - // 3. Fixed deprecated member use - color: UiColors.white.withValues(alpha: 0.7), - ), - ), - ], - ], - ), - ), - ], - ), - backgroundColor: UiColors.error, - behavior: SnackBarBehavior.floating, - duration: duration, - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), - margin: const EdgeInsets.all(16), - ), - ); - } - - /// Resolves a localization key path to the actual translated message. - /// - /// Supports keys like: - /// - errors.auth.invalid_credentials - /// - errors.hub.has_orders - /// - errors.generic.unknown - static String _getMessageFromKey(Translations texts, String key) { - // Parse key like "errors.auth.invalid_credentials" - final parts = key.split('.'); - if (parts.length < 2) return texts.errors.generic.unknown; - - try { - switch (parts[1]) { - case 'auth': - return _getAuthError(texts, parts.length > 2 ? parts[2] : ''); - case 'hub': - return _getHubError(texts, parts.length > 2 ? parts[2] : ''); - case 'order': - return _getOrderError(texts, parts.length > 2 ? parts[2] : ''); - case 'profile': - return _getProfileError(texts, parts.length > 2 ? parts[2] : ''); - case 'shift': - return _getShiftError(texts, parts.length > 2 ? parts[2] : ''); - case 'generic': - return _getGenericError(texts, parts.length > 2 ? parts[2] : ''); - default: - return texts.errors.generic.unknown; - } - } catch (_) { - return texts.errors.generic.unknown; - } - } - - static String _getAuthError(Translations texts, String key) { - switch (key) { - case 'invalid_credentials': - return texts.errors.auth.invalid_credentials; - case 'account_exists': - return texts.errors.auth.account_exists; - case 'session_expired': - return texts.errors.auth.session_expired; - case 'user_not_found': - return texts.errors.auth.user_not_found; - case 'unauthorized_app': - return texts.errors.auth.unauthorized_app; - case 'weak_password': - return texts.errors.auth.weak_password; - case 'sign_up_failed': - return texts.errors.auth.sign_up_failed; - case 'sign_in_failed': - return texts.errors.auth.sign_in_failed; - case 'not_authenticated': - return texts.errors.auth.not_authenticated; - case 'password_mismatch': - return texts.errors.auth.password_mismatch; - case 'google_only_account': - return texts.errors.auth.google_only_account; - default: - return texts.errors.generic.unknown; - } - } - - static String _getHubError(Translations texts, String key) { - switch (key) { - case 'has_orders': - return texts.errors.hub.has_orders; - case 'not_found': - return texts.errors.hub.not_found; - case 'creation_failed': - return texts.errors.hub.creation_failed; - default: - return texts.errors.generic.unknown; - } - } - - static String _getOrderError(Translations texts, String key) { - switch (key) { - case 'missing_hub': - return texts.errors.order.missing_hub; - case 'missing_vendor': - return texts.errors.order.missing_vendor; - case 'creation_failed': - return texts.errors.order.creation_failed; - case 'shift_creation_failed': - return texts.errors.order.shift_creation_failed; - case 'missing_business': - return texts.errors.order.missing_business; - default: - return texts.errors.generic.unknown; - } - } - - static String _getProfileError(Translations texts, String key) { - switch (key) { - case 'staff_not_found': - return texts.errors.profile.staff_not_found; - case 'business_not_found': - return texts.errors.profile.business_not_found; - case 'update_failed': - return texts.errors.profile.update_failed; - default: - return texts.errors.generic.unknown; - } - } - - static String _getShiftError(Translations texts, String key) { - switch (key) { - case 'no_open_roles': - return texts.errors.shift.no_open_roles; - case 'application_not_found': - return texts.errors.shift.application_not_found; - case 'no_active_shift': - return texts.errors.shift.no_active_shift; - default: - return texts.errors.generic.unknown; - } - } - - static String _getGenericError(Translations texts, String key) { - switch (key) { - case 'unknown': - return texts.errors.generic.unknown; - case 'no_connection': - return texts.errors.generic.no_connection; - default: - return texts.errors.generic.unknown; - } - } -} diff --git a/apps/mobile/packages/design_system/lib/src/widgets/ui_step_indicator.dart b/apps/mobile/packages/design_system/lib/src/widgets/ui_step_indicator.dart index 3388098d..c6989e13 100644 --- a/apps/mobile/packages/design_system/lib/src/widgets/ui_step_indicator.dart +++ b/apps/mobile/packages/design_system/lib/src/widgets/ui_step_indicator.dart @@ -8,12 +8,6 @@ import '../ui_icons.dart'; /// This widget shows a series of circular step indicators connected by lines, /// with different visual states for completed, active, and inactive steps. class UiStepIndicator extends StatelessWidget { - /// The list of icons to display for each step. - final List stepIcons; - - /// The index of the currently active step (0-based). - final int currentStep; - /// Creates a [UiStepIndicator]. const UiStepIndicator({ super.key, @@ -21,6 +15,12 @@ class UiStepIndicator extends StatelessWidget { required this.currentStep, }); + /// The list of icons to display for each step. + final List stepIcons; + + /// The index of the currently active step (0-based). + final int currentStep; + @override /// Builds the step indicator UI. Widget build(BuildContext context) { @@ -35,7 +35,7 @@ class UiStepIndicator extends StatelessWidget { padding: const EdgeInsets.symmetric(vertical: UiConstants.space2), child: Row( mainAxisAlignment: MainAxisAlignment.center, - children: List.generate(stepIcons.length, (int index) { + children: List.generate(stepIcons.length, (int index) { final bool isActive = index == currentStep; final bool isCompleted = index < currentStep; diff --git a/apps/mobile/packages/design_system/lib/src/widgets/ui_success_snackbar.dart b/apps/mobile/packages/design_system/lib/src/widgets/ui_success_snackbar.dart deleted file mode 100644 index 81855390..00000000 --- a/apps/mobile/packages/design_system/lib/src/widgets/ui_success_snackbar.dart +++ /dev/null @@ -1,49 +0,0 @@ -import 'package:flutter/material.dart'; -import '../ui_colors.dart'; -import '../ui_typography.dart'; - -/// Centralized success snackbar for consistent success message presentation. -/// -/// This widget provides a unified way to show success feedback across the app -/// with consistent styling and behavior. -/// -/// Usage: -/// ```dart -/// UiSuccessSnackbar.show( -/// context, -/// message: 'Profile updated successfully!', -/// ); -/// ``` -class UiSuccessSnackbar { - /// Shows a success snackbar with a custom message. - /// - /// [message] is the success message to display - /// [duration] controls how long the snackbar is visible - static void show( - BuildContext context, { - required String message, - Duration duration = const Duration(seconds: 3), - }) { - ScaffoldMessenger.of(context).showSnackBar( - SnackBar( - content: Row( - children: [ - Icon(Icons.check_circle_outline, color: UiColors.white), - const SizedBox(width: 12), - Expanded( - child: Text( - message, - style: UiTypography.body2m.copyWith(color: UiColors.white), - ), - ), - ], - ), - backgroundColor: UiColors.success, - behavior: SnackBarBehavior.floating, - duration: duration, - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), - margin: const EdgeInsets.all(16), - ), - ); - } -} diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/pages/worker_home_page.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/pages/worker_home_page.dart index c820e15c..67594247 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/pages/worker_home_page.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/pages/worker_home_page.dart @@ -104,7 +104,7 @@ class WorkerHomePage extends StatelessWidget { ), ], ), - const SizedBox(height: 24), + const SizedBox(height: UiConstants.space6), // Today's Shifts BlocBuilder( @@ -123,9 +123,11 @@ class WorkerHomePage extends StatelessWidget { if (state.status == HomeStatus.loading) const Center( child: SizedBox( - height: 40, - width: 40, - child: CircularProgressIndicator(), + height: UiConstants.space10, + width: UiConstants.space10, + child: CircularProgressIndicator( + color: UiColors.primary, + ), ), ) else if (shifts.isEmpty) @@ -149,7 +151,7 @@ class WorkerHomePage extends StatelessWidget { ); }, ), - const SizedBox(height: 24), + const SizedBox(height: UiConstants.space6), // Tomorrow's Shifts BlocBuilder( @@ -177,7 +179,7 @@ class WorkerHomePage extends StatelessWidget { ); }, ), - const SizedBox(height: 24), + const SizedBox(height: UiConstants.space6), // Recommended Shifts SectionHeader( @@ -197,7 +199,8 @@ class WorkerHomePage extends StatelessWidget { itemCount: state.recommendedShifts.length, clipBehavior: Clip.none, itemBuilder: (context, index) => Padding( - padding: const EdgeInsets.only(right: 12), + padding: const EdgeInsets.only( + right: UiConstants.space3), child: RecommendedShiftCard( shift: state.recommendedShifts[index], ), @@ -206,7 +209,7 @@ class WorkerHomePage extends StatelessWidget { ); }, ), - const SizedBox(height: 24), + const SizedBox(height: UiConstants.space6), ], ), ), diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/home_header.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/home_header.dart index 17127ce5..fd8d9da8 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/home_header.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/home_header.dart @@ -28,23 +28,20 @@ class HomeHeader extends StatelessWidget { spacing: UiConstants.space3, children: [ Container( - width: 48, - height: 48, + width: UiConstants.space12, + height: UiConstants.space12, decoration: BoxDecoration( shape: BoxShape.circle, border: Border.all( - color: UiColors.primary.withOpacity(0.2), + color: UiColors.primary.withValues(alpha: 0.2), width: 2, ), ), child: CircleAvatar( - backgroundColor: UiColors.primary.withOpacity(0.1), + backgroundColor: UiColors.primary.withValues(alpha: 0.1), child: Text( initial, - style: const TextStyle( - color: UiColors.primary, - fontWeight: FontWeight.bold, - ), + style: UiTypography.body1b.textPrimary, ), ), ), diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/placeholder_banner.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/placeholder_banner.dart index 8d8577ee..1d648bc4 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/placeholder_banner.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/placeholder_banner.dart @@ -29,19 +29,19 @@ class PlaceholderBanner extends StatelessWidget { decoration: BoxDecoration( color: bg, borderRadius: BorderRadius.circular(UiConstants.radiusBase), - border: Border.all(color: accent.withOpacity(0.3)), + border: Border.all(color: accent.withValues(alpha: 0.3)), ), child: Row( children: [ Container( - width: 40, - height: 40, + width: UiConstants.space10, + height: UiConstants.space10, padding: const EdgeInsets.all(UiConstants.space2), decoration: const BoxDecoration( color: UiColors.bgBanner, shape: BoxShape.circle, ), - child: Icon(UiIcons.sparkles, color: accent, size: 20), + child: Icon(UiIcons.sparkles, color: accent, size: UiConstants.space5), ), const SizedBox(width: UiConstants.space3), Expanded( diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/quick_action_item.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/quick_action_item.dart index 02271b5b..f89dd510 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/quick_action_item.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/quick_action_item.dart @@ -22,8 +22,8 @@ class QuickActionItem extends StatelessWidget { child: Column( children: [ Container( - width: 64, - height: 64, + width: UiConstants.space16, + height: UiConstants.space16, padding: const EdgeInsets.all(UiConstants.space4), decoration: BoxDecoration( color: UiColors.bgBanner, @@ -31,13 +31,13 @@ class QuickActionItem extends StatelessWidget { border: Border.all(color: UiColors.bgSecondary), boxShadow: [ BoxShadow( - color: UiColors.foreground.withOpacity(0.05), + color: UiColors.foreground.withValues(alpha: 0.05), blurRadius: 4, offset: const Offset(0, 2), ), ], ), - child: Icon(icon, color: UiColors.primary, size: 24), + child: Icon(icon, color: UiColors.primary, size: UiConstants.space6), ), const SizedBox(height: UiConstants.space2), Text( diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/recommended_shift_card.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/recommended_shift_card.dart index e9f9d2c2..e5ead2d2 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/recommended_shift_card.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/recommended_shift_card.dart @@ -14,8 +14,6 @@ class RecommendedShiftCard extends StatelessWidget { @override Widget build(BuildContext context) { final recI18n = t.staff.home.recommended_card; - final duration = 8; - final totalPay = duration * shift.hourlyRate; return GestureDetector( onTap: () { @@ -23,14 +21,14 @@ class RecommendedShiftCard extends StatelessWidget { }, child: Container( width: 300, - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.all(UiConstants.space4), decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(16), + color: UiColors.white, + borderRadius: BorderRadius.circular(UiConstants.radiusBase), border: Border.all(color: UiColors.border), boxShadow: [ BoxShadow( - color: Colors.black.withValues(alpha: 0.02), + color: UiColors.black.withValues(alpha: 0.02), blurRadius: 4, offset: const Offset(0, 2), ), @@ -45,51 +43,43 @@ class RecommendedShiftCard extends StatelessWidget { children: [ Text( recI18n.act_now, - style: const TextStyle( - fontSize: 10, - fontWeight: FontWeight.bold, - color: Color(0xFFDC2626), - ), + style: UiTypography.body3m.copyWith(color: UiColors.textError), ), - const SizedBox(width: 8), + const SizedBox(width: UiConstants.space2), Container( padding: const EdgeInsets.symmetric( - horizontal: 8, + horizontal: UiConstants.space2, vertical: 2, ), decoration: BoxDecoration( - color: const Color(0xFFE8F0FF), - borderRadius: BorderRadius.circular(999), + color: UiColors.tagInProgress, + borderRadius: UiConstants.radiusFull, ), child: Text( recI18n.one_day, - style: const TextStyle( - fontSize: 10, - fontWeight: FontWeight.w500, - color: Color(0xFF0047FF), - ), + style: UiTypography.body3m.textPrimary, ), ), ], ), - const SizedBox(height: 12), + const SizedBox(height: UiConstants.space3), Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( - width: 44, - height: 44, + width: UiConstants.space10, + height: UiConstants.space10, decoration: BoxDecoration( - color: const Color(0xFFE8F0FF), - borderRadius: BorderRadius.circular(12), + color: UiColors.tagInProgress, + borderRadius: BorderRadius.circular(UiConstants.radiusBase), ), child: const Icon( UiIcons.calendar, - color: Color(0xFF0047FF), - size: 20, + color: UiColors.primary, + size: UiConstants.space5, ), ), - const SizedBox(width: 12), + const SizedBox(width: UiConstants.space3), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -97,25 +87,16 @@ class RecommendedShiftCard extends StatelessWidget { Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Expanded( + Flexible( child: Text( shift.title, - style: const TextStyle( - fontWeight: FontWeight.w600, - fontSize: 16, - color: UiColors.foreground, - ), - maxLines: 1, + style: UiTypography.body1m.textPrimary, overflow: TextOverflow.ellipsis, ), ), Text( - '\$${totalPay.round()}', - style: const TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, - color: UiColors.foreground, - ), + '\$${shift.hourlyRate}/h', + style: UiTypography.headline4m.textPrimary, ), ], ), @@ -125,17 +106,11 @@ class RecommendedShiftCard extends StatelessWidget { children: [ Text( shift.clientName, - style: const TextStyle( - fontSize: 12, - color: UiColors.mutedForeground, - ), + style: UiTypography.body3r.textSecondary, ), Text( - '\$${shift.hourlyRate.toStringAsFixed(0)}/hr • ${duration}h', - style: const TextStyle( - fontSize: 10, - color: UiColors.mutedForeground, - ), + '\$${shift.hourlyRate.toStringAsFixed(0)}/hr', + style: UiTypography.body3r.textSecondary, ), ], ), @@ -144,57 +119,48 @@ class RecommendedShiftCard extends StatelessWidget { ), ], ), - const SizedBox(height: 12), + const SizedBox(height: UiConstants.space3), Row( children: [ const Icon( UiIcons.calendar, - size: 14, + size: UiConstants.space3, color: UiColors.mutedForeground, ), - const SizedBox(width: 4), + const SizedBox(width: UiConstants.space1), Text( recI18n.today, - style: const TextStyle( - fontSize: 12, - color: UiColors.mutedForeground, - ), + style: UiTypography.body3r.textSecondary, ), - const SizedBox(width: 12), + const SizedBox(width: UiConstants.space3), const Icon( UiIcons.clock, - size: 14, + size: UiConstants.space3, color: UiColors.mutedForeground, ), - const SizedBox(width: 4), + const SizedBox(width: UiConstants.space1), Text( recI18n.time_range( start: shift.startTime, end: shift.endTime, ), - style: const TextStyle( - fontSize: 12, - color: UiColors.mutedForeground, - ), + style: UiTypography.body3r.textSecondary, ), ], ), - const SizedBox(height: 4), + const SizedBox(height: UiConstants.space1), Row( children: [ const Icon( UiIcons.mapPin, - size: 14, + size: UiConstants.space3, color: UiColors.mutedForeground, ), - const SizedBox(width: 4), + const SizedBox(width: UiConstants.space1), Expanded( child: Text( shift.locationAddress, - style: const TextStyle( - fontSize: 12, - color: UiColors.mutedForeground, - ), + style: UiTypography.body3r.textSecondary, maxLines: 1, overflow: TextOverflow.ellipsis, ), diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/section_header.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/section_header.dart index 482ef175..e38da6e4 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/section_header.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/home_page/section_header.dart @@ -3,7 +3,6 @@ import 'package:flutter/material.dart'; import 'package:design_system/design_system.dart'; - /// Section header widget for home page sections, using design system tokens. class SectionHeader extends StatelessWidget { /// Section title @@ -23,43 +22,58 @@ class SectionHeader extends StatelessWidget { child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Text( - title, - style: UiTypography.headline4m, - ), - if (action != null) - if (onAction != null) - GestureDetector( - onTap: onAction, - child: Row( - children: [ - Text( - action!, - style: UiTypography.body2m.copyWith(color: UiColors.primary), - ), - const Icon( - UiIcons.chevronRight, - size: 16, - color: UiColors.primary, - ), - ], - ), - ) - else - Container( - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2), - decoration: BoxDecoration( - color: UiColors.primary.withOpacity(0.08), - borderRadius: BorderRadius.circular(12), - border: Border.all( - color: UiColors.primary.withOpacity(0.2), + Expanded( + child: action != null + ? Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + title, + style: UiTypography.body2m.textPrimary, + ), + if (onAction != null) + GestureDetector( + onTap: onAction, + child: Row( + children: [ + Text( + action ?? '', + style: UiTypography.body3r.textPrimary, + ), + const Icon( + UiIcons.chevronRight, + size: UiConstants.space4, + color: UiColors.primary, + ), + ], + ), + ) + else + Container( + padding: const EdgeInsets.symmetric( + horizontal: UiConstants.space2, + vertical: 2, + ), + decoration: BoxDecoration( + color: UiColors.primary.withValues(alpha: 0.08), + borderRadius: + BorderRadius.circular(UiConstants.radiusBase), + border: Border.all( + color: UiColors.primary.withValues(alpha: 0.2), + ), + ), + child: Text( + action!, + style: UiTypography.body3r.textPrimary, + ), + ), + ], + ) + : Text( + title, + style: UiTypography.body2m.textPrimary, ), - ), - child: Text( - action!, - style: UiTypography.body3r.copyWith(color: UiColors.primary), - ), - ), + ), ], ), ); diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/shift_card.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/shift_card.dart index 7a5caa37..13a39fb7 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/shift_card.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/shift_card.dart @@ -77,15 +77,15 @@ class _ShiftCardState extends State { Modular.to.pushShiftDetails(widget.shift); }, child: Container( - margin: const EdgeInsets.only(bottom: 12), - padding: const EdgeInsets.all(16), + margin: const EdgeInsets.only(bottom: UiConstants.space3), + padding: const EdgeInsets.all(UiConstants.space4), decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(16), + color: UiColors.white, + borderRadius: BorderRadius.circular(UiConstants.radiusBase), border: Border.all(color: UiColors.border), boxShadow: [ BoxShadow( - color: Colors.black.withValues(alpha: 0.05), + color: UiColors.black.withValues(alpha: 0.05), blurRadius: 2, offset: const Offset(0, 1), ), @@ -94,16 +94,17 @@ class _ShiftCardState extends State { child: Row( children: [ Container( - width: 48, - height: 48, + width: UiConstants.space12, + height: UiConstants.space12, decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(12), + color: UiColors.white, + borderRadius: BorderRadius.circular(UiConstants.radiusBase), border: Border.all(color: UiColors.border), ), child: widget.shift.logoUrl != null ? ClipRRect( - borderRadius: BorderRadius.circular(12), + borderRadius: + BorderRadius.circular(UiConstants.radiusBase), child: Image.network( widget.shift.logoUrl!, fit: BoxFit.contain, @@ -114,7 +115,7 @@ class _ShiftCardState extends State { color: UiColors.mutedForeground, ), ), - const SizedBox(width: 12), + const SizedBox(width: UiConstants.space3), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -125,28 +126,18 @@ class _ShiftCardState extends State { Flexible( child: Text( widget.shift.title, - style: const TextStyle( - fontWeight: FontWeight.w600, - color: UiColors.foreground, - ), + style: UiTypography.body1m.textPrimary, overflow: TextOverflow.ellipsis, ), ), Text.rich( TextSpan( text: '\$${widget.shift.hourlyRate}', - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16, - color: UiColors.foreground, - ), - children: const [ + style: UiTypography.body1b.textPrimary, + children: [ TextSpan( text: '/h', - style: TextStyle( - fontWeight: FontWeight.normal, - fontSize: 12, - ), + style: UiTypography.body3r, ), ], ), @@ -155,19 +146,13 @@ class _ShiftCardState extends State { ), Text( widget.shift.clientName, - style: const TextStyle( - color: UiColors.mutedForeground, - fontSize: 13, - ), + style: UiTypography.body2r.textSecondary, overflow: TextOverflow.ellipsis, ), - const SizedBox(height: 4), + const SizedBox(height: UiConstants.space1), Text( '${_formatTime(widget.shift.startTime)} • ${widget.shift.location}', - style: const TextStyle( - color: UiColors.mutedForeground, - fontSize: 12, - ), + style: UiTypography.body3r.textSecondary, ), ], ), @@ -179,14 +164,14 @@ class _ShiftCardState extends State { } return Container( - margin: const EdgeInsets.only(bottom: 16), + margin: const EdgeInsets.only(bottom: UiConstants.space4), decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(16), + color: UiColors.white, + borderRadius: BorderRadius.circular(UiConstants.radiusBase), border: Border.all(color: UiColors.border), boxShadow: [ BoxShadow( - color: Colors.black.withValues(alpha: 0.05), + color: UiColors.black.withValues(alpha: 0.05), blurRadius: 4, offset: const Offset(0, 2), ), @@ -195,7 +180,7 @@ class _ShiftCardState extends State { child: Column( children: [ Padding( - padding: const EdgeInsets.all(20), + padding: const EdgeInsets.all(UiConstants.space5), child: Column( children: [ // Header @@ -203,16 +188,17 @@ class _ShiftCardState extends State { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( - width: 56, - height: 56, + width: UiConstants.space14, + height: UiConstants.space14, decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(12), + color: UiColors.white, + borderRadius: BorderRadius.circular(UiConstants.radiusBase), border: Border.all(color: UiColors.border), ), child: widget.shift.logoUrl != null ? ClipRRect( - borderRadius: BorderRadius.circular(12), + borderRadius: + BorderRadius.circular(UiConstants.radiusBase), child: Image.network( widget.shift.logoUrl!, fit: BoxFit.contain, @@ -226,25 +212,21 @@ class _ShiftCardState extends State { ), Container( padding: const EdgeInsets.symmetric( - horizontal: 16, + horizontal: UiConstants.space4, vertical: 6, ), decoration: BoxDecoration( color: UiColors.primary, - borderRadius: BorderRadius.circular(20), + borderRadius: UiConstants.radiusFull, ), child: Text( 'Assigned ${_getTimeAgo(widget.shift.createdDate).replaceAll('Pending ', '')}', - style: const TextStyle( - color: Colors.white, - fontSize: 12, - fontWeight: FontWeight.w600, - ), + style: UiTypography.body3m.white, ), ), ], ), - const SizedBox(height: 16), + const SizedBox(height: UiConstants.space4), // Title and Rate Row( @@ -257,18 +239,11 @@ class _ShiftCardState extends State { children: [ Text( widget.shift.title, - style: const TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, - color: UiColors.foreground, - ), + style: UiTypography.headline3m.textPrimary, ), Text( widget.shift.clientName, - style: const TextStyle( - color: UiColors.mutedForeground, - fontSize: 14, - ), + style: UiTypography.body2r.textSecondary, ), ], ), @@ -276,30 +251,23 @@ class _ShiftCardState extends State { Text.rich( TextSpan( text: '\$${widget.shift.hourlyRate}', - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 20, - color: UiColors.foreground, - ), - children: const [ + style: UiTypography.headline3m.textPrimary, + children: [ TextSpan( text: '/h', - style: TextStyle( - fontWeight: FontWeight.normal, - fontSize: 16, - ), + style: UiTypography.body1r, ), ], ), ), ], ), - const SizedBox(height: 16), + const SizedBox(height: UiConstants.space4), // Location and Date Row( children: [ - const Icon( + Icon( UiIcons.mapPin, size: 16, color: UiColors.mutedForeground, @@ -308,15 +276,12 @@ class _ShiftCardState extends State { Expanded( child: Text( widget.shift.location, - style: const TextStyle( - color: UiColors.mutedForeground, - fontSize: 14, - ), + style: UiTypography.body2r.textSecondary, overflow: TextOverflow.ellipsis, ), ), - const SizedBox(width: 16), - const Icon( + const SizedBox(width: UiConstants.space4), + Icon( UiIcons.calendar, size: 16, color: UiColors.mutedForeground, @@ -324,14 +289,11 @@ class _ShiftCardState extends State { const SizedBox(width: 6), Text( '${_formatDate(widget.shift.date)}, ${_formatTime(widget.shift.startTime)}', - style: const TextStyle( - color: UiColors.mutedForeground, - fontSize: 14, - ), + style: UiTypography.body2r.textSecondary, ), ], ), - const SizedBox(height: 16), + const SizedBox(height: UiConstants.space4), // Tags Wrap( @@ -347,13 +309,13 @@ class _ShiftCardState extends State { _buildTag( UiIcons.timer, 'No experience', - const Color(0xFFFEE2E2), - const Color(0xFFDC2626), + UiColors.tagError, + UiColors.textError, ), ], ), - const SizedBox(height: 16), + const SizedBox(height: UiConstants.space4), ], ), ), @@ -361,46 +323,48 @@ class _ShiftCardState extends State { // Actions if (!widget.compact) Padding( - padding: const EdgeInsets.fromLTRB(20, 0, 20, 0), + padding: const EdgeInsets.symmetric( + horizontal: UiConstants.space5, + ), child: Column( children: [ SizedBox( width: double.infinity, - height: 48, + height: UiConstants.space12, child: ElevatedButton( onPressed: widget.onApply, style: ElevatedButton.styleFrom( - backgroundColor: UiColors.foreground, - foregroundColor: Colors.white, + backgroundColor: UiColors.primary, + foregroundColor: UiColors.white, + elevation: 0, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(12), + borderRadius: + BorderRadius.circular(UiConstants.radiusBase), ), ), - child: const Text( - 'Accept shift', - style: TextStyle(fontWeight: FontWeight.w600), - ), + child: const Text('Accept shift'), ), ), - const SizedBox(height: 8), + const SizedBox(height: UiConstants.space2), SizedBox( width: double.infinity, - height: 48, + height: UiConstants.space12, child: OutlinedButton( onPressed: widget.onDecline, style: OutlinedButton.styleFrom( - foregroundColor: const Color(0xFFEF4444), - side: const BorderSide(color: Color(0xFFFCA5A5)), + foregroundColor: UiColors.destructive, + side: BorderSide( + color: UiColors.destructive.withValues(alpha: 0.3), + ), shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(12), + borderRadius: + BorderRadius.circular(UiConstants.radiusBase), ), ), - child: const Text( - 'Decline shift', - style: TextStyle(fontWeight: FontWeight.w600), - ), + child: const Text('Decline shift'), ), ), + const SizedBox(height: UiConstants.space5), ], ), ), @@ -414,7 +378,7 @@ class _ShiftCardState extends State { padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), decoration: BoxDecoration( color: bg, - borderRadius: BorderRadius.circular(20), + borderRadius: UiConstants.radiusFull, ), child: Row( mainAxisSize: MainAxisSize.min, @@ -424,11 +388,7 @@ class _ShiftCardState extends State { Flexible( child: Text( label, - style: TextStyle( - color: text, - fontSize: 12, - fontWeight: FontWeight.w600, - ), + style: UiTypography.body3m.copyWith(color: text), overflow: TextOverflow.ellipsis, ), ), diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/auto_match_toggle.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/auto_match_toggle.dart index 61cef8f7..c6b35db9 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/auto_match_toggle.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/auto_match_toggle.dart @@ -18,29 +18,33 @@ class AutoMatchToggle extends StatefulWidget { State createState() => _AutoMatchToggleState(); } -class _AutoMatchToggleState extends State with SingleTickerProviderStateMixin { +class _AutoMatchToggleState extends State + with SingleTickerProviderStateMixin { @override Widget build(BuildContext context) { final i18n = t.staff.home.auto_match; - final Color primary = Theme.of(context).colorScheme.primary; return AnimatedContainer( duration: const Duration(milliseconds: 300), - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.all(UiConstants.space4), decoration: BoxDecoration( - borderRadius: BorderRadius.circular(16), + borderRadius: BorderRadius.circular(UiConstants.radiusBase), gradient: widget.enabled ? LinearGradient( - colors: [primary, primary.withOpacity(0.8)], + colors: [ + UiColors.primary, + UiColors.primary.withValues(alpha: 0.8), + ], begin: Alignment.centerLeft, end: Alignment.centerRight, ) : null, - color: widget.enabled ? null : Colors.white, - border: widget.enabled ? null : Border.all(color: Colors.grey.shade200), + color: widget.enabled ? null : UiColors.white, + border: + widget.enabled ? null : Border.all(color: UiColors.border), boxShadow: widget.enabled ? [ BoxShadow( - color: primary.withOpacity(0.3), + color: UiColors.primary.withValues(alpha: 0.3), blurRadius: 10, offset: const Offset(0, 4), ), @@ -55,36 +59,39 @@ class _AutoMatchToggleState extends State with SingleTickerProv Row( children: [ Container( - width: 40, - height: 40, + width: UiConstants.space10, + height: UiConstants.space10, decoration: BoxDecoration( color: widget.enabled - ? Colors.white.withOpacity(0.2) - : primary.withOpacity(0.1), - borderRadius: BorderRadius.circular(12), + ? UiColors.white.withValues(alpha: 0.2) + : UiColors.primary.withValues(alpha: 0.1), + borderRadius: + BorderRadius.circular(UiConstants.radiusBase), ), child: Icon( UiIcons.zap, - color: widget.enabled ? Colors.white : primary, + color: widget.enabled ? UiColors.white : UiColors.primary, size: 20, ), ), - const SizedBox(width: 12), + const SizedBox(width: UiConstants.space3), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( i18n.title, - style: TextStyle( - fontWeight: FontWeight.bold, - color: widget.enabled ? Colors.white : const Color(0xFF0F172A), + style: UiTypography.body1b.copyWith( + color: widget.enabled + ? UiColors.white + : UiColors.textPrimary, ), ), Text( widget.enabled ? i18n.finding_shifts : i18n.get_matched, - style: TextStyle( - fontSize: 12, - color: widget.enabled ? const Color(0xFFF8E08E) : Colors.grey.shade500, + style: UiTypography.body3r.copyWith( + color: widget.enabled + ? UiColors.accent + : UiColors.textInactive, ), ), ], @@ -94,10 +101,10 @@ class _AutoMatchToggleState extends State with SingleTickerProv Switch( value: widget.enabled, onChanged: widget.onToggle, - activeThumbColor: Colors.white, - activeTrackColor: Colors.white.withValues(alpha: 0.3), - inactiveThumbColor: Colors.white, - inactiveTrackColor: Colors.grey.shade300, + activeThumbColor: UiColors.white, + activeTrackColor: UiColors.white.withValues(alpha: 0.3), + inactiveThumbColor: UiColors.white, + inactiveTrackColor: UiColors.border, ), ], ), @@ -107,20 +114,19 @@ class _AutoMatchToggleState extends State with SingleTickerProv ? Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const SizedBox(height: 16), + const SizedBox(height: UiConstants.space4), Container( height: 1, - color: Colors.white.withValues(alpha: 0.2), + color: UiColors.white.withValues(alpha: 0.2), ), - const SizedBox(height: 16), + const SizedBox(height: UiConstants.space4), Text( i18n.matching_based_on, - style: const TextStyle( - color: Color(0xFFF8E08E), - fontSize: 12, + style: UiTypography.body3r.copyWith( + color: UiColors.accent, ), ), - const SizedBox(height: 12), + const SizedBox(height: UiConstants.space3), Wrap( spacing: 8, children: [ @@ -145,17 +151,17 @@ class _AutoMatchToggleState extends State with SingleTickerProv return Container( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(8), + color: UiColors.white.withValues(alpha: 0.2), + borderRadius: BorderRadius.circular(UiConstants.radiusMdValue), ), child: Row( mainAxisSize: MainAxisSize.min, children: [ - Icon(icon, size: 12, color: Colors.white), + Icon(icon, size: 12, color: UiColors.white), const SizedBox(width: 4), Text( label, - style: const TextStyle(color: Colors.white, fontSize: 12), + style: UiTypography.body3r.white, ), ], ), diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/benefits_widget.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/benefits_widget.dart index 9a475c22..886a44e4 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/benefits_widget.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/benefits_widget.dart @@ -16,14 +16,14 @@ class BenefitsWidget extends StatelessWidget { Widget build(BuildContext context) { final i18n = t.staff.home.benefits; return Container( - padding: const EdgeInsets.all(16), + padding: const EdgeInsets.all(UiConstants.space4), decoration: BoxDecoration( - color: Theme.of(context).colorScheme.background, - borderRadius: BorderRadius.circular(16), - border: Border.all(color: Theme.of(context).dividerColor), + color: UiColors.white, + borderRadius: BorderRadius.circular(UiConstants.radiusBase), + border: Border.all(color: UiColors.border), boxShadow: [ BoxShadow( - color: Theme.of(context).colorScheme.onBackground.withOpacity(0.05), + color: UiColors.black.withValues(alpha: 0.05), blurRadius: 2, offset: const Offset(0, 1), ), @@ -36,7 +36,7 @@ class BenefitsWidget extends StatelessWidget { children: [ Text( i18n.title, - style: Theme.of(context).textTheme.titleMedium, + style: UiTypography.title1m.textPrimary, ), GestureDetector( onTap: () => Modular.to.pushNamed('/benefits'), @@ -44,19 +44,19 @@ class BenefitsWidget extends StatelessWidget { children: [ Text( i18n.view_all, - style: Theme.of(context).textTheme.labelLarge?.copyWith(color: Theme.of(context).colorScheme.primary), + style: UiTypography.buttonL.textPrimary, ), Icon( UiIcons.chevronRight, - size: 16, - color: Theme.of(context).colorScheme.primary, + size: UiConstants.space4, + color: UiColors.primary, ), ], ), ), ], ), - const SizedBox(height: 16), + const SizedBox(height: UiConstants.space4), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -64,19 +64,19 @@ class BenefitsWidget extends StatelessWidget { label: i18n.items.sick_days, current: 10, total: 40, - color: Theme.of(context).colorScheme.primary, + color: UiColors.primary, ), _BenefitItem( label: i18n.items.vacation, current: 40, total: 40, - color: Theme.of(context).colorScheme.primary, + color: UiColors.primary, ), _BenefitItem( label: i18n.items.holidays, current: 24, total: 24, - color: Theme.of(context).colorScheme.primary, + color: UiColors.primary, ), ], ), @@ -105,13 +105,13 @@ class _BenefitItem extends StatelessWidget { return Column( children: [ SizedBox( - width: 56, - height: 56, + width: UiConstants.space14, + height: UiConstants.space14, child: CustomPaint( painter: _CircularProgressPainter( progress: current / total, color: color, - backgroundColor: const Color(0xFFE5E7EB), + backgroundColor: UiColors.border, strokeWidth: 4, ), child: Center( @@ -120,32 +120,21 @@ class _BenefitItem extends StatelessWidget { children: [ Text( '${current.toInt()}/${total.toInt()}', - style: const TextStyle( - fontSize: 12, - fontWeight: FontWeight.bold, - color: Color(0xFF1E293B), - ), + style: UiTypography.body3m.textPrimary, ), Text( i18n.hours_label, - style: const TextStyle( - fontSize: 8, - color: Color(0xFF94A3B8), - ), + style: UiTypography.footnote1r.textTertiary, ), ], ), ), ), ), - const SizedBox(height: 8), + const SizedBox(height: UiConstants.space2), Text( label, - style: const TextStyle( - fontSize: 12, - fontWeight: FontWeight.w500, - color: Color(0xFF475569), - ), + style: UiTypography.body3m.textSecondary, ), ], ); diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/improve_yourself_widget.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/improve_yourself_widget.dart index 91d3d4af..dd2cf77a 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/improve_yourself_widget.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/improve_yourself_widget.dart @@ -1,3 +1,4 @@ +import 'package:design_system/design_system.dart'; import 'package:flutter/material.dart'; import 'package:flutter_modular/flutter_modular.dart'; import 'package:core_localization/core_localization.dart'; @@ -32,9 +33,9 @@ class ImproveYourselfWidget extends StatelessWidget { children: [ Text( i18n.title, - style: Theme.of(context).textTheme.titleMedium, + style: UiTypography.title1m.textPrimary, ), - const SizedBox(height: 12), + const SizedBox(height: UiConstants.space3), SingleChildScrollView( scrollDirection: Axis.horizontal, clipBehavior: Clip.none, @@ -51,14 +52,14 @@ class ImproveYourselfWidget extends StatelessWidget { onTap: () => Modular.to.pushNamed(item['page']!), child: Container( width: 160, - margin: const EdgeInsets.only(right: 12), + margin: const EdgeInsets.only(right: UiConstants.space3), decoration: BoxDecoration( - color: Theme.of(context).colorScheme.background, - borderRadius: BorderRadius.circular(16), - border: Border.all(color: Theme.of(context).dividerColor), + color: UiColors.white, + borderRadius: BorderRadius.circular(UiConstants.radiusBase), + border: Border.all(color: UiColors.border), boxShadow: [ BoxShadow( - color: Theme.of(context).colorScheme.onBackground.withOpacity(0.05), + color: UiColors.black.withValues(alpha: 0.05), blurRadius: 2, offset: const Offset(0, 1), ), @@ -69,36 +70,33 @@ class ImproveYourselfWidget extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( - height: 96, + height: UiConstants.space24, width: double.infinity, child: Image.network( item['image']!, fit: BoxFit.cover, errorBuilder: (context, error, stackTrace) => Container( - color: Theme.of(context).colorScheme.surfaceVariant, - child: const Icon( - Icons.image_not_supported, - color: Colors.grey, + color: UiColors.background, + child: Icon( + UiIcons.zap, + color: UiColors.mutedForeground, ), ), ), ), Padding( - padding: const EdgeInsets.all(12), + padding: const EdgeInsets.all(UiConstants.space3), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( item['title']!, - style: Theme.of(context).textTheme.titleSmall, + style: UiTypography.body1m.textPrimary, ), const SizedBox(height: 2), Text( item['description']!, - style: const TextStyle( - fontSize: 12, - color: Color(0xFF64748B), - ), + style: UiTypography.body3r.textSecondary, maxLines: 2, overflow: TextOverflow.ellipsis, ), diff --git a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/more_ways_widget.dart b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/more_ways_widget.dart index 947e2be9..70949197 100644 --- a/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/more_ways_widget.dart +++ b/apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/worker/more_ways_widget.dart @@ -1,8 +1,8 @@ +import 'package:design_system/design_system.dart'; import 'package:flutter/material.dart'; import 'package:flutter_modular/flutter_modular.dart'; import 'package:core_localization/core_localization.dart'; - /// Widget for displaying more ways to use Krow, using design system tokens. class MoreWaysToUseKrowWidget extends StatelessWidget { /// Creates a [MoreWaysToUseKrowWidget]. @@ -31,9 +31,9 @@ class MoreWaysToUseKrowWidget extends StatelessWidget { children: [ Text( i18n.title, - style: Theme.of(context).textTheme.titleMedium, + style: UiTypography.title1m.textPrimary, ), - const SizedBox(height: 12), + const SizedBox(height: UiConstants.space3), SingleChildScrollView( scrollDirection: Axis.horizontal, clipBehavior: Clip.none, @@ -50,14 +50,14 @@ class MoreWaysToUseKrowWidget extends StatelessWidget { onTap: () => Modular.to.pushNamed(item['page']!), child: Container( width: 160, - margin: const EdgeInsets.only(right: 12), + margin: const EdgeInsets.only(right: UiConstants.space3), decoration: BoxDecoration( - color: Theme.of(context).colorScheme.background, - borderRadius: BorderRadius.circular(16), - border: Border.all(color: Theme.of(context).dividerColor), + color: UiColors.white, + borderRadius: BorderRadius.circular(UiConstants.radiusBase), + border: Border.all(color: UiColors.border), boxShadow: [ BoxShadow( - color: Theme.of(context).colorScheme.onBackground.withOpacity(0.05), + color: UiColors.black.withValues(alpha: 0.05), blurRadius: 2, offset: const Offset(0, 1), ), @@ -68,25 +68,25 @@ class MoreWaysToUseKrowWidget extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( - height: 96, + height: UiConstants.space24, width: double.infinity, child: Image.network( item['image']!, fit: BoxFit.cover, errorBuilder: (context, error, stackTrace) => Container( - color: Theme.of(context).colorScheme.surfaceVariant, - child: const Icon( - Icons.image_not_supported, - color: Colors.grey, + color: UiColors.background, + child: Icon( + UiIcons.zap, + color: UiColors.mutedForeground, ), ), ), ), Padding( - padding: const EdgeInsets.all(12), + padding: const EdgeInsets.all(UiConstants.space3), child: Text( item['title']!, - style: Theme.of(context).textTheme.titleSmall, + style: UiTypography.body1m.textPrimary, ), ), ],