feat: Refactor mobile UI components to adhere to design system tokens and improve loading and snackbar functionalities

apps/mobile/packages/design_system/lib/design_system.dart

@@ -12,3 +12,5 @@ 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_colors.dart

@@ -120,7 +120,7 @@ class UiColors {
   static const Color textDescription = mutedForeground;
 
   /// Success text (#10B981)
-  static const Color textSuccess = Color(0xFF10B981);
+  static const Color textSuccess = Color(0xFF0A8159);
 
   /// Error text (#F04444)
   static const Color textError = destructive;

apps/mobile/packages/design_system/lib/src/ui_icons.dart

@@ -225,4 +225,13 @@ class UiIcons {
 
   /// Globe icon
   static const IconData globe = _IconLib.globe;
+
+  /// Sunrise icon
+  static const IconData sunrise = _IconLib.sunrise;
+
+  /// Sun icon
+  static const IconData sun = _IconLib.sun;
+
+  /// Moon icon
+  static const IconData moon = _IconLib.moon;
 }

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

@@ -0,0 +1,33 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import '../ui_colors.dart';
+
+/// A common loading page that adheres to the design system.
+/// It features a blurred background using [UiColors.popupShadow] and a [CircularProgressIndicator].
+class UiLoadingPage extends StatelessWidget {
+  /// Creates a [UiLoadingPage].
+  const UiLoadingPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: UiColors.transparent,
+      body: Stack(
+        fit: StackFit.expand,
+        children: <Widget>[
+          // Background blur and color
+          Positioned.fill(
+            child: BackdropFilter(
+              filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+              child: Container(color: UiColors.popupShadow),
+            ),
+          ),
+          // Center loading indicator
+          const Center(child: CircularProgressIndicator()),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,99 @@
+import 'dart:ui';
+import 'package:flutter/material.dart';
+import '../ui_colors.dart';
+import '../ui_icons.dart';
+import '../ui_typography.dart';
+
+/// Types of snackbars available in the design system.
+enum UiSnackbarType {
+  /// Success state - green text and light blurred green background.
+  success,
+
+  /// Message state - blue text and light blurred blue background.
+  message,
+
+  /// Warning state - dark yellow text and light blurred yellow background.
+  warning,
+
+  /// Error state - red text and light blurred red background.
+  error,
+}
+
+/// A centralized snackbar widget that adheres to the design system with glassmorphism effects.
+class UiSnackbar {
+  UiSnackbar._();
+
+  /// Shows a snackbar with the specified [message] and [type].
+  static void show(
+    BuildContext context, {
+    required String message,
+    required UiSnackbarType type,
+    Duration duration = const Duration(seconds: 3),
+  }) {
+    final Color textColor;
+    final Color backgroundColor;
+    final IconData icon;
+
+    switch (type) {
+      case UiSnackbarType.success:
+        textColor = UiColors.textSuccess;
+        backgroundColor = UiColors.tagSuccess.withValues(alpha: 0.7);
+        icon = UiIcons.success;
+        break;
+      case UiSnackbarType.message:
+        textColor = UiColors.primary;
+        backgroundColor = UiColors.tagInProgress.withValues(alpha: 0.7);
+        icon = UiIcons.info;
+        break;
+      case UiSnackbarType.warning:
+        textColor = UiColors.textWarning;
+        backgroundColor = UiColors.tagPending.withValues(alpha: 0.7);
+        icon = UiIcons.warning;
+        break;
+      case UiSnackbarType.error:
+        textColor = UiColors.textError;
+        backgroundColor = UiColors.tagError.withValues(alpha: 0.7);
+        icon = UiIcons.error;
+        break;
+    }
+
+    ScaffoldMessenger.of(context).showSnackBar(
+      SnackBar(
+        duration: duration,
+        backgroundColor: UiColors.transparent,
+        elevation: 0,
+        behavior: SnackBarBehavior.floating,
+        content: ClipRRect(
+          borderRadius: BorderRadius.circular(12),
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
+            child: Container(
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+              decoration: BoxDecoration(
+                color: backgroundColor,
+                borderRadius: BorderRadius.circular(12),
+                border: Border.all(
+                  color: textColor.withValues(alpha: 0.2),
+                  width: 1,
+                ),
+              ),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                spacing: 12,
+                children: <Widget>[
+                  Icon(icon, color: textColor, size: 20),
+                  Expanded(
+                    child: Text(
+                      message,
+                      style: UiTypography.body2b.copyWith(color: textColor),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}