feat: Enhance geofence functionality with new status banners and utility functions

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

@@ -15,18 +15,32 @@ class UiNoticeBanner extends StatelessWidget {
     this.backgroundColor,
     this.borderRadius,
     this.padding,
+    this.iconColor,
+    this.titleColor,
+    this.descriptionColor,
+    this.action,
+    this.leading,
   });
 
   /// The icon to display on the left side.
-  /// Defaults to null. The icon will be rendered with primary color and 24pt size.
+  /// Ignored when [leading] is provided.
   final IconData? icon;
 
+  /// Custom color for the icon. Defaults to [UiColors.primary].
+  final Color? iconColor;
+
   /// The title text to display.
   final String title;
 
+  /// Custom color for the title text. Defaults to primary text color.
+  final Color? titleColor;
+
   /// Optional description text to display below the title.
   final String? description;
 
+  /// Custom color for the description text. Defaults to secondary text color.
+  final Color? descriptionColor;
+
   /// The background color of the banner.
   /// Defaults to [UiColors.primary] with 8% opacity.
   final Color? backgroundColor;
@@ -39,6 +53,12 @@ class UiNoticeBanner extends StatelessWidget {
   /// Defaults to [UiConstants.space4] on all sides.
   final EdgeInsetsGeometry? padding;
 
+  /// Optional action widget displayed on the right side of the banner.
+  final Widget? action;
+
+  /// Optional custom leading widget that replaces the icon when provided.
+  final Widget? leading;
+
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -50,8 +70,11 @@ class UiNoticeBanner extends StatelessWidget {
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: <Widget>[
-          if (icon != null) ...<Widget>[
-            Icon(icon, color: UiColors.primary, size: 24),
+          if (leading != null) ...<Widget>[
+            leading!,
+            const SizedBox(width: UiConstants.space3),
+          ] else if (icon != null) ...<Widget>[
+            Icon(icon, color: iconColor ?? UiColors.primary, size: 24),
             const SizedBox(width: UiConstants.space3),
           ],
           Expanded(
@@ -60,18 +83,24 @@ class UiNoticeBanner extends StatelessWidget {
               children: <Widget>[
                 Text(
                   title,
-                  style: UiTypography.body2m.textPrimary,
+                  style: UiTypography.body2b.copyWith(color: titleColor),
                 ),
                 if (description != null) ...<Widget>[
                   const SizedBox(height: 2),
                   Text(
                     description!,
-                    style: UiTypography.body2r.textSecondary,
+                    style: UiTypography.body3r.copyWith(
+                      color: descriptionColor,
+                    ),
                   ),
                 ],
               ],
             ),
           ),
+          if (action != null) ...<Widget>[
+            const SizedBox(width: UiConstants.space3),
+            action!,
+          ],
         ],
       ),
     );