highperfocused/grimoire
1
0
Fork 0
mirror of https://github.com/purrgrammer/grimoire.git synced 2026-06-06 10:41:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve ChatViewer group tooltip contrast in dark mode

Browse Source 
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
This commit is contained in:
Claude
2026-01-21 21:50:00 +00:00
parent ba80f7944d
commit c5d0b2e4f4
1 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/ChatViewer.tsx
View File

@@ -896,7 +896,7 @@ export function ChatViewer({
</div> </div>
{/* Description */} {/* Description */}
{conversation.metadata?.description && ( {conversation.metadata?.description && (
<p className="text-xs text-primary-foreground/90"> <p className="text-xs opacity-90">
{conversation.metadata.description} {conversation.metadata.description}
</p> </p>
)} )}
@@ -909,22 +909,22 @@ export function ChatViewer({
e.stopPropagation(); e.stopPropagation();
handleNipClick(); 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()} {conversation.protocol.toUpperCase()}
</button> </button>
)} )}
{(conversation.type === "group" || {(conversation.type === "group" ||
conversation.type === "live-chat") && ( conversation.type === "live-chat") && (
<span className="text-primary-foreground/60">•</span> <span className="opacity-60">•</span>
)} )}
{conversation.protocol === "nip-10" ? ( {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" /> <FileText className="size-3" />
Thread Thread
</span> </span>
) : ( ) : (
<span className="capitalize text-primary-foreground/80"> <span className="capitalize opacity-80">
{conversation.type} {conversation.type}
</span> </span>
)} )}
@@ -932,19 +932,17 @@ export function ChatViewer({
{/* Live Activity Status */} {/* Live Activity Status */}
{liveActivity?.status && ( {liveActivity?.status && (
<div className="flex items-center gap-1.5 text-xs"> <div className="flex items-center gap-1.5 text-xs">
<span className="text-primary-foreground/80"> <span className="opacity-80">Status:</span>
Status:
</span>
<StatusBadge status={liveActivity.status} size="xs" /> <StatusBadge status={liveActivity.status} size="xs" />
</div> </div>
)} )}
{/* Host Info */} {/* Host Info */}
{liveActivity?.hostPubkey && ( {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> <span>Host:</span>
<UserName <UserName
pubkey={liveActivity.hostPubkey} pubkey={liveActivity.hostPubkey}
className="text-xs text-primary-foreground" className="text-xs"
/> />
</div> </div>
)} )}