feat: Enhance UiAppBar and UiIconButton with customizable shapes and border radius

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

@@ -1,13 +1,14 @@
+import 'package:design_system/design_system.dart';
 import 'package:design_system/src/ui_typography.dart';
 import 'package:flutter/material.dart';
 
 import '../ui_icons.dart';
+import 'ui_icon_button.dart';
 
 /// A custom AppBar for the Krow UI design system.
 ///
 /// This widget provides a consistent look and feel for top app bars across the application.
 class UiAppBar extends StatelessWidget implements PreferredSizeWidget {
-
   const UiAppBar({
     super.key,
     this.title,
@@ -20,6 +21,7 @@ class UiAppBar extends StatelessWidget implements PreferredSizeWidget {
     this.showBackButton = true,
     this.bottom,
   });
+
   /// The title text to display in the app bar.
   final String? title;
 
@@ -53,18 +55,19 @@ class UiAppBar extends StatelessWidget implements PreferredSizeWidget {
   @override
   Widget build(BuildContext context) {
     return AppBar(
-      title: titleWidget ??
+      title:
-          (title != null
+          titleWidget ??
-              ? Text(
+          (title != null ? Text(title!, style: UiTypography.headline4b) : null),
-                  title!,
+      leading:
-                  style: UiTypography.headline4b,
+          leading ??
-                )
-              : null),
-      leading: leading ??
           (showBackButton
-              ? IconButton(
+              ? UiIconButton(
-                  icon: const Icon(UiIcons.chevronLeft, size: 20),
+                  icon: UiIcons.chevronLeft,
-                  onPressed: onLeadingPressed ?? () => Navigator.of(context).pop(),
+                  onTap: onLeadingPressed ?? () => Navigator.of(context).pop(),
+                  backgroundColor: UiColors.transparent,
+                  iconColor: UiColors.iconThird,
+                  shape: BoxShape.rectangle,
+                  borderRadius: BorderRadius.circular(UiConstants.radiusBase),
                 )
               : null),
       actions: actions,
@@ -74,5 +77,6 @@ class UiAppBar extends StatelessWidget implements PreferredSizeWidget {
   }
 
   @override
-  Size get preferredSize => Size.fromHeight(height + (bottom?.preferredSize.height ?? 0.0));
+  Size get preferredSize =>
+      Size.fromHeight(height + (bottom?.preferredSize.height ?? 0.0));
 }

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

@@ -16,6 +16,8 @@ class UiIconButton extends StatelessWidget {
     required this.iconColor,
     this.useBlur = false,
     this.onTap,
+    this.shape = BoxShape.circle,
+    this.borderRadius,
   });
 
   /// Creates a primary variant icon button with solid background.
@@ -25,6 +27,8 @@ class UiIconButton extends StatelessWidget {
     this.size = 40,
     this.iconSize = 20,
     this.onTap,
+    this.shape = BoxShape.circle,
+    this.borderRadius,
   }) : backgroundColor = UiColors.primary,
        iconColor = UiColors.white,
        useBlur = false;
@@ -36,6 +40,8 @@ class UiIconButton extends StatelessWidget {
     this.size = 40,
     this.iconSize = 20,
     this.onTap,
+    this.shape = BoxShape.circle,
+    this.borderRadius,
   }) : backgroundColor = UiColors.primary.withAlpha(96),
        iconColor = UiColors.primary,
        useBlur = true;
@@ -60,13 +66,23 @@ class UiIconButton extends StatelessWidget {
   /// Callback when the button is tapped.
   final VoidCallback? onTap;
 
+  /// The shape of the button (circle or rectangle).
+  final BoxShape shape;
+
+  /// The border radius for rectangle shape.
+  final BorderRadius? borderRadius;
+
   @override
   /// Builds the icon button UI.
   Widget build(BuildContext context) {
     final Widget button = Container(
       width: size,
       height: size,
-      decoration: BoxDecoration(color: backgroundColor, shape: BoxShape.circle),
+      decoration: BoxDecoration(
+        color: backgroundColor,
+        shape: shape,
+        borderRadius: shape == BoxShape.rectangle ? borderRadius : null,
+      ),
       child: Icon(icon, color: iconColor, size: iconSize),
     );