From ca4315b09d63bd29e420dd097d5a5378e18edb2d Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 27 Mar 2026 09:15:19 +0530
Subject: [PATCH] Refactor: Redesign bottom navigation bar item to include an
 active indicator dot, a background highlight for selected icons, and adjusted
 padding.

---
 lib/core/widgets/app_bottom_nav_bar.dart | 104 ++++++++++++++---------
 1 file changed, 65 insertions(+), 39 deletions(-)

diff --git a/lib/core/widgets/app_bottom_nav_bar.dart b/lib/core/widgets/app_bottom_nav_bar.dart
index b627ad5..5a33c7d 100644
--- a/lib/core/widgets/app_bottom_nav_bar.dart
+++ b/lib/core/widgets/app_bottom_nav_bar.dart
@@ -137,54 +137,80 @@ class _NavItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final iconColor =
+        isSelected ? AppColors.primaryDark : AppColors.accentOrange;
+
     return GestureDetector(
       onTap: onTap,
       behavior: HitTestBehavior.opaque,
       child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-        child: Stack(
-          clipBehavior: Clip.none,
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
           children: [
-            SvgPicture.asset(
-              svgPath,
-              width: 24,
-              height: 24,
-              colorFilter: isSelected
-                  ? const ColorFilter.mode(
-                      AppColors.primaryDark, BlendMode.srcIn)
-                  : const ColorFilter.mode(
-                      AppColors.accentOrange, BlendMode.srcIn),
-              placeholderBuilder: (_) => Icon(
-                fallbackIcon,
-                size: 24,
-                color:
-                    isSelected ? AppColors.primaryDark : AppColors.accentOrange,
-              ),
-            ),
-            if (badgeCount > 0)
-              Positioned(
-                top: -6,
-                right: -8,
-                child: Container(
-                  padding:
-                      const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
-                  constraints: const BoxConstraints(minWidth: 16),
-                  decoration: BoxDecoration(
-                    color: Colors.red,
-                    borderRadius: BorderRadius.circular(8),
-                  ),
-                  child: Text(
-                    badgeCount > 99 ? '99+' : '$badgeCount',
-                    textAlign: TextAlign.center,
-                    style: const TextStyle(
-                      fontFamily: 'Fractul',
-                      fontSize: 10,
-                      fontWeight: FontWeight.w700,
-                      color: Colors.white,
+            Stack(
+              clipBehavior: Clip.none,
+              children: [
+                Container(
+                  width: 40,
+                  height: 32,
+                  decoration: isSelected
+                      ? BoxDecoration(
+                          color: AppColors.accentOrange.withValues(alpha: 0.15),
+                          borderRadius: BorderRadius.circular(16),
+                        )
+                      : null,
+                  child: Center(
+                    child: SvgPicture.asset(
+                      svgPath,
+                      width: 22,
+                      height: 22,
+                      colorFilter:
+                          ColorFilter.mode(iconColor, BlendMode.srcIn),
+                      placeholderBuilder: (_) => Icon(
+                        fallbackIcon,
+                        size: 22,
+                        color: iconColor,
+                      ),
                     ),
                   ),
                 ),
+                if (badgeCount > 0)
+                  Positioned(
+                    top: -4,
+                    right: -2,
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                          horizontal: 4, vertical: 1),
+                      constraints: const BoxConstraints(minWidth: 16),
+                      decoration: BoxDecoration(
+                        color: Colors.red,
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                      child: Text(
+                        badgeCount > 99 ? '99+' : '$badgeCount',
+                        textAlign: TextAlign.center,
+                        style: const TextStyle(
+                          fontFamily: 'Fractul',
+                          fontSize: 10,
+                          fontWeight: FontWeight.w700,
+                          color: Colors.white,
+                        ),
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+            const SizedBox(height: 2),
+            // Active indicator dot
+            Container(
+              width: 5,
+              height: 5,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: isSelected ? AppColors.accentOrange : Colors.transparent,
               ),
+            ),
           ],
         ),
       ),