From 147cf31f0f7923ff86d187fe850721f82db861ae Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 9 Aug 2025 23:51:35 +0200
Subject: [PATCH] style: Update Badge colors in Navbar and ChatComponent for
 better visibility

- 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.
---
 src/components/layout/Navbar.vue       |  4 ++--
 src/components/nostr/ChatComponent.vue | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index af04301..1232946 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -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>
diff --git a/src/components/nostr/ChatComponent.vue b/src/components/nostr/ChatComponent.vue
index d971451..b301806 100644
--- a/src/components/nostr/ChatComponent.vue
+++ b/src/components/nostr/ChatComponent.vue
@@ -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>