From 670a42dd9b0bdd2a4366354e08c2541b8f12b8f1 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 7 Sep 2025 04:08:08 +0200
Subject: [PATCH] Fix mobile navbar icon visibility with improved contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change selected route styling from 'text-primary bg-accent' to 'text-secondary bg-accent'
- Uses semantic design tokens for better theme compatibility and accessibility
- Improves icon visibility on mobile navigation without being too aggressive
- Affects Events, Market, and Chat navigation buttons
- Maintains design system consistency while ensuring proper contrast ratios

Fixes issue where selected route icons were hard to see due to poor contrast
between text and background colors in mobile navbar.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/layout/Navbar.vue | 64 +++++++++++++++-----------------
 1 file changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index 707ee46..de2ddb5 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -108,16 +108,16 @@ const handleLogout = async () => {
             <!-- Chat icon with notification badge -->
             <div v-if="item.href === '/chat'" class="relative">
               <MessageSquare class="h-4 w-4" />
-              <Badge v-if="totalUnreadMessages > 0" 
-                     class="absolute -top-2 -right-2 h-3.5 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center">
+              <Badge v-if="totalUnreadMessages > 0"
+                class="absolute -top-2 -right-2 h-3.5 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center">
                 {{ totalUnreadMessages > 99 ? '99+' : totalUnreadMessages }}
               </Badge>
             </div>
             <span v-else>{{ item.name }}</span>
             <span v-if="item.href === '/chat'">{{ item.name }}</span>
             <!-- Market preloading indicator -->
-            <div v-if="item.href === '/market' && marketPreloader.isPreloading" 
-                 class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
+            <div v-if="item.href === '/market' && marketPreloader.isPreloading"
+              class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
           </router-link>
         </div>
       </div>
@@ -132,12 +132,12 @@ const handleLogout = async () => {
         <!-- </div> -->
 
         <!-- Cart Icon with Item Count -->
-        <router-link v-if="auth.isAuthenticated.value" to="/cart" 
+        <router-link v-if="auth.isAuthenticated.value" to="/cart"
           class="hidden sm:flex items-center gap-2 px-3 py-1 bg-muted/50 rounded-lg border hover:bg-muted/70 transition-colors relative">
           <ShoppingCart class="h-4 w-4 text-muted-foreground" />
           <span class="text-sm font-medium">Cart</span>
-          <Badge v-if="cartItemCount > 0" 
-                 class="absolute -top-2 -right-2 h-5 w-5 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
+          <Badge v-if="cartItemCount > 0"
+            class="absolute -top-2 -right-2 h-5 w-5 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
             {{ cartItemCount > 99 ? '99+' : cartItemCount }}
           </Badge>
         </router-link>
@@ -164,12 +164,10 @@ const handleLogout = async () => {
                 <User class="h-4 w-4" />
                 Profile
               </DropdownMenuItem>
-              <DropdownMenuItem 
-                v-for="item in userMenuItems" 
-                :key="item.href"
-                @click="() => router.push(item.href)" 
+              <DropdownMenuItem v-for="item in userMenuItems" :key="item.href" @click="() => router.push(item.href)"
                 class="gap-2">
-                <component :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity" class="h-4 w-4" />
+                <component :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity"
+                  class="h-4 w-4" />
                 {{ item.name }}
               </DropdownMenuItem>
               <DropdownMenuSeparator />
@@ -201,38 +199,38 @@ const handleLogout = async () => {
         <!-- Mobile Navigation Icons (only show when authenticated) -->
         <div v-if="auth.isAuthenticated.value" class="md:hidden flex items-center gap-1">
           <!-- Events Button -->
-          <router-link to="/events" 
+          <router-link to="/events"
             class="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
             :class="{
-              'text-primary bg-accent': $route.path === '/events'
+              'text-secondary bg-accent': $route.path === '/events'
             }">
             <span class="sr-only">Events</span>
             <Calendar class="h-5 w-5" />
           </router-link>
-          
+
           <!-- Market Button -->
-          <router-link to="/market" 
+          <router-link to="/market"
             class="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
             :class="{
-              'text-primary bg-accent': $route.path.startsWith('/market')
+              'text-secondary bg-accent': $route.path.startsWith('/market')
             }">
             <span class="sr-only">Market</span>
             <ShoppingBag class="h-5 w-5" />
             <!-- Market preloading indicator -->
-            <div v-if="marketPreloader.isPreloading" 
-                 class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
+            <div v-if="marketPreloader.isPreloading"
+              class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
           </router-link>
-          
+
           <!-- Chat Button -->
-          <router-link to="/chat" 
+          <router-link to="/chat"
             class="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
             :class="{
-              'text-primary bg-accent': $route.path === '/chat'
+              'text-secondary bg-accent': $route.path === '/chat'
             }">
             <span class="sr-only">Chat</span>
             <MessageSquare class="h-5 w-5" />
-            <Badge v-if="totalUnreadMessages > 0" 
-                   class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
+            <Badge v-if="totalUnreadMessages > 0"
+              class="absolute -top-1 -right-1 h-4 w-4 text-xs bg-blue-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
               {{ totalUnreadMessages > 99 ? '99+' : totalUnreadMessages }}
             </Badge>
           </router-link>
@@ -277,17 +275,14 @@ const handleLogout = async () => {
                 <User class="h-4 w-4" />
                 Profile
               </Button>
-              <Button 
-                v-for="item in userMenuItems" 
-                :key="item.href"
-                variant="ghost" 
-                size="sm" 
-                @click="() => { router.push(item.href); isOpen = false }"
-                class="w-full justify-start gap-2">
-                <component :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity" class="h-4 w-4" />
+              <Button v-for="item in userMenuItems" :key="item.href" variant="ghost" size="sm"
+                @click="() => { router.push(item.href); isOpen = false }" class="w-full justify-start gap-2">
+                <component :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity"
+                  class="h-4 w-4" />
                 {{ item.name }}
               </Button>
-              <Button variant="ghost" size="sm" @click="showLogoutConfirm = true" class="w-full justify-start gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10">
+              <Button variant="ghost" size="sm" @click="showLogoutConfirm = true"
+                class="w-full justify-start gap-2 text-destructive hover:text-destructive/90 hover:bg-destructive/10">
                 <LogOut class="h-4 w-4" />
                 Logout
               </Button>
@@ -317,7 +312,8 @@ const handleLogout = async () => {
     <ProfileDialog v-model:is-open="showProfileDialog" />
 
     <!-- Logout Confirm Dialog -->
-    <LogoutConfirmDialog v-model:is-open="showLogoutConfirm" variant="ghost" size="sm" class="w-full justify-start gap-2" @confirm="handleLogout">
+    <LogoutConfirmDialog v-model:is-open="showLogoutConfirm" variant="ghost" size="sm"
+      class="w-full justify-start gap-2" @confirm="handleLogout">
       <LogOut class="h-4 w-4" />
       Logout
     </LogoutConfirmDialog>