padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix mobile navbar icon visibility with improved contrast

Browse source 
- 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:
padreug 2025-09-07 04:08:08 +02:00
parent c284ad5778
commit 670a42dd9b
1 changed files with 30 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/layout/Navbar.vue
View file

@ -164,12 +164,10 @@ const handleLogout = async () => {
<User class="h-4 w-4" /> <User class="h-4 w-4" />
Profile Profile
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem v-for="item in userMenuItems" :key="item.href" @click="() => router.push(item.href)"
v-for="item in userMenuItems"
:key="item.href"
@click="() => router.push(item.href)"
class="gap-2"> 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 }} {{ item.name }}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
@ -204,7 +202,7 @@ const handleLogout = async () => {
<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="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
:class="{ :class="{
'text-primary bg-accent': $route.path === '/events' 'text-secondary bg-accent': $route.path === '/events'
}"> }">
<span class="sr-only">Events</span> <span class="sr-only">Events</span>
<Calendar class="h-5 w-5" /> <Calendar class="h-5 w-5" />
@ -214,7 +212,7 @@ const handleLogout = async () => {
<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="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
:class="{ :class="{
'text-primary bg-accent': $route.path.startsWith('/market') 'text-secondary bg-accent': $route.path.startsWith('/market')
}"> }">
<span class="sr-only">Market</span> <span class="sr-only">Market</span>
<ShoppingBag class="h-5 w-5" /> <ShoppingBag class="h-5 w-5" />
@ -227,7 +225,7 @@ const handleLogout = async () => {
<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="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:text-foreground/90 hover:bg-accent transition-colors"
:class="{ :class="{
'text-primary bg-accent': $route.path === '/chat' 'text-secondary bg-accent': $route.path === '/chat'
}"> }">
<span class="sr-only">Chat</span> <span class="sr-only">Chat</span>
<MessageSquare class="h-5 w-5" /> <MessageSquare class="h-5 w-5" />
@ -277,17 +275,14 @@ const handleLogout = async () => {
<User class="h-4 w-4" /> <User class="h-4 w-4" />
Profile Profile
</Button> </Button>
<Button <Button v-for="item in userMenuItems" :key="item.href" variant="ghost" size="sm"
v-for="item in userMenuItems" @click="() => { router.push(item.href); isOpen = false }" class="w-full justify-start gap-2">
:key="item.href" <component :is="item.icon === 'Ticket' ? Ticket : item.icon === 'Store' ? Store : Activity"
variant="ghost" class="h-4 w-4" />
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 }} {{ item.name }}
</Button> </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 class="h-4 w-4" />
Logout Logout
</Button> </Button>
@ -317,7 +312,8 @@ const handleLogout = async () => {
<ProfileDialog v-model:is-open="showProfileDialog" /> <ProfileDialog v-model:is-open="showProfileDialog" />
<!-- Logout Confirm Dialog --> <!-- 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 class="h-4 w-4" />
Logout Logout
</LogoutConfirmDialog> </LogoutConfirmDialog>