From c5d0b2e4f4ac656aeb84327d2fdfe85d6b223cf4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 21 Jan 2026 21:50:00 +0000
Subject: [PATCH] fix: improve ChatViewer group tooltip contrast in dark mode

The group description tooltip in ChatViewer had poor contrast due to
using `text-primary-foreground` color classes that conflicted with
the new tooltip background colors.

Issues fixed:
1. Description text using `text-primary-foreground/90` - replaced with `opacity-90`
2. Protocol button using `bg-primary-foreground/20` with `text-primary-foreground`
   (light-on-light, ~1.5:1 contrast) - now uses `bg-tooltip-foreground/20`
3. All other text using `text-primary-foreground` variants - replaced with `opacity-*`

This allows the text to inherit the correct `text-tooltip-foreground` color
from the TooltipContent component, ensuring proper contrast against the
`bg-tooltip` background in all themes.

Files modified:
- src/components/ChatViewer.tsx: Updated tooltip text color classes
---
 src/components/ChatViewer.tsx | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index 3d12ea2..1f07619 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -896,7 +896,7 @@ export function ChatViewer({
                     </div>
                     {/* Description */}
                     {conversation.metadata?.description && (
-                      <p className="text-xs text-primary-foreground/90">
+                      <p className="text-xs opacity-90">
                         {conversation.metadata.description}
                       </p>
                     )}
@@ -909,22 +909,22 @@ export function ChatViewer({
                             e.stopPropagation();
                             handleNipClick();
                           }}
-                          className="rounded bg-primary-foreground/20 px-1.5 py-0.5 font-mono hover:bg-primary-foreground/30 transition-colors cursor-pointer text-primary-foreground"
+                          className="rounded bg-tooltip-foreground/20 px-1.5 py-0.5 font-mono hover:bg-tooltip-foreground/30 transition-colors cursor-pointer"
                         >
                           {conversation.protocol.toUpperCase()}
                         </button>
                       )}
                       {(conversation.type === "group" ||
                         conversation.type === "live-chat") && (
-                        <span className="text-primary-foreground/60">•</span>
+                        <span className="opacity-60">•</span>
                       )}
                       {conversation.protocol === "nip-10" ? (
-                        <span className="flex items-center gap-1 text-primary-foreground/80">
+                        <span className="flex items-center gap-1 opacity-80">
                           <FileText className="size-3" />
                           Thread
                         </span>
                       ) : (
-                        <span className="capitalize text-primary-foreground/80">
+                        <span className="capitalize opacity-80">
                           {conversation.type}
                         </span>
                       )}
@@ -932,19 +932,17 @@ export function ChatViewer({
                     {/* Live Activity Status */}
                     {liveActivity?.status && (
                       <div className="flex items-center gap-1.5 text-xs">
-                        <span className="text-primary-foreground/80">
-                          Status:
-                        </span>
+                        <span className="opacity-80">Status:</span>
                         <StatusBadge status={liveActivity.status} size="xs" />
                       </div>
                     )}
                     {/* Host Info */}
                     {liveActivity?.hostPubkey && (
-                      <div className="flex items-center gap-1.5 text-xs text-primary-foreground/80">
+                      <div className="flex items-center gap-1.5 text-xs opacity-80">
                         <span>Host:</span>
                         <UserName
                           pubkey={liveActivity.hostPubkey}
-                          className="text-xs text-primary-foreground"
+                          className="text-xs"
                         />
                       </div>
                     )}