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

style: Update Badge colors in Navbar and ChatComponent for better visibility

Browse source 
- Change Badge background color from red to blue in both Navbar and ChatComponent to enhance visual consistency and improve user experience.
- Ensure that unread message indicators are more visually appealing and aligned with the overall design theme.
This commit is contained in:
padreug 2025-08-09 23:51:35 +02:00
parent 9b280be1a1
commit 147cf31f0f
2 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -101,7 +101,7 @@ const handleLogout = async () => {
<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-red-500 text-white border-0 p-0 flex items-center justify-center">
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>
@ -181,7 +181,7 @@ const handleLogout = async () => {
<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-red-500 text-white border-0 p-0 flex items-center justify-center rounded-full">
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>

10
src/components/nostr/ChatComponent.vue
View file

@ -13,7 +13,7 @@
Disconnected
</Badge>
<!-- Total unread count -->
<Badge v-if="totalUnreadCount > 0" variant="destructive" class="text-xs">
<Badge v-if="totalUnreadCount > 0" class="bg-blue-500 text-white text-xs">
{{ totalUnreadCount }} unread
</Badge>
</div>
@ -91,7 +91,7 @@
</div>
<!-- Unread message indicator -->
<div v-if="getUnreadCount(peer.pubkey) > 0" class="flex-shrink-0">
<Badge variant="destructive" class="h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
<Badge class="bg-blue-500 text-white h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
{{ getUnreadCount(peer.pubkey) > 99 ? '99+' : getUnreadCount(peer.pubkey) }}
</Badge>
</div>
@ -133,7 +133,7 @@
Disconnected
</Badge>
<!-- Unread count for current peer -->
<Badge v-if="selectedPeer && getUnreadCount(selectedPeer.pubkey) > 0" variant="destructive" class="text-xs">
<Badge v-if="selectedPeer && getUnreadCount(selectedPeer.pubkey) > 0" class="bg-blue-500 text-white text-xs">
{{ getUnreadCount(selectedPeer.pubkey) }} unread
</Badge>
</div>
@ -198,7 +198,7 @@
Disconnected
</Badge>
<!-- Total unread count -->
<Badge v-if="totalUnreadCount > 0" variant="destructive" class="text-xs">
<Badge v-if="totalUnreadCount > 0" class="bg-blue-500 text-white text-xs">
{{ totalUnreadCount }} unread
</Badge>
</div>
@ -278,7 +278,7 @@
</div>
<!-- Unread message indicator -->
<div v-if="getUnreadCount(peer.pubkey) > 0" class="flex-shrink-0">
<Badge variant="destructive" class="h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
<Badge class="bg-blue-500 text-white h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
{{ getUnreadCount(peer.pubkey) > 99 ? '99+' : getUnreadCount(peer.pubkey) }}
</Badge>
</div>