Fix mobile navbar icon visibility with improved contrast
- 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>
This commit is contained in:
parent
c284ad5778
commit
670a42dd9b
1 changed files with 30 additions and 34 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue