Refactor UI components to use design system tokens for consistency

- Removed the UiSuccessSnackbar widget as it is no longer needed.
- Updated WorkerHomePage to replace hardcoded spacing with UiConstants.
- Refactored HomeHeader to use UiConstants for dimensions and colors.
- Modified PlaceholderBanner to utilize UiConstants for sizes and colors.
- Adjusted QuickActionItem to apply UiConstants for dimensions and icon sizes.
- Updated RecommendedShiftCard to use design system typography and constants.
- Refined SectionHeader to implement design system styles and spacing.
- Enhanced ShiftCard to adopt design system tokens for colors and spacing.
- Updated AutoMatchToggle to use design system colors and dimensions.
- Refactored BenefitsWidget to apply design system styles and constants.
- Improved ImproveYourselfWidget to utilize design system tokens for styling.
- Updated MoreWaysToUseKrowWidget to implement design system styles and constants.

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';

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<Color>(UiColors.white),
       ),
 
       // Checkbox Theme

apps/mobile/packages/design_system/lib/src/widgets/ui_error_snackbar.dart

@@ -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;
-    }
-  }
-}

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<IconData> 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<IconData> 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<Widget>.generate(stepIcons.length, (int index) {
           final bool isActive = index == currentStep;
           final bool isCompleted = index < currentStep;
 

apps/mobile/packages/design_system/lib/src/widgets/ui_success_snackbar.dart

@@ -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),
-      ),
-    );
-  }
-}