highperfocused/grimoire
1
0
Fork 0
mirror of https://github.com/purrgrammer/grimoire.git synced 2026-04-10 15:36:53 +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>
{/* 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>
)}