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

Fix tooltip contrast in editor suggestion lists

Browse Source 
Use text-popover-foreground instead of text-muted-foreground for
suggestion list components to ensure proper contrast with bg-popover
background across all themes.

https://claude.ai/code/session_0145zLfku7idq3WEqGzvTdvu
This commit is contained in:
Claude
2026-01-28 10:04:45 +00:00
parent 3282581636
commit 18353047bd
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/editor/EmojiSuggestionList.tsx
View File

@@ -93,7 +93,7 @@ export const EmojiSuggestionList = forwardRef<
if (items.length === 0) {
return (
<div className="border border-border/50 bg-popover p-4 text-sm text-muted-foreground shadow-md">
<div className="border border-border/50 bg-popover p-4 text-sm text-popover-foreground/60 shadow-md">
No emoji found
</div>
);
@@ -103,7 +103,7 @@ export const EmojiSuggestionList = forwardRef<
<div
ref={listRef}
role="listbox"
className="max-h-[240px] w-[296px] overflow-y-auto border border-border/50 bg-popover p-2 shadow-md"
className="max-h-[240px] w-[296px] overflow-y-auto border border-border/50 bg-popover p-2 text-popover-foreground shadow-md"
>
<div className="grid grid-cols-8 gap-0.5">
{items.map((item, index) => (
@@ -141,7 +141,7 @@ export const EmojiSuggestionList = forwardRef<
</div>
{/* Show selected emoji shortcode */}
{items[selectedIndex] && (
<div className="mt-2 border-t border-border/50 pt-2 text-center text-xs text-muted-foreground">
<div className="mt-2 border-t border-border/50 pt-2 text-center text-xs text-popover-foreground/60">
:{items[selectedIndex].shortcode}:
</div>
)}

6
src/components/editor/ProfileSuggestionList.tsx
View File

@@ -71,7 +71,7 @@ export const ProfileSuggestionList = forwardRef<
if (items.length === 0) {
return (
<div className="border border-border/50 bg-popover p-4 text-sm text-muted-foreground shadow-md">
<div className="border border-border/50 bg-popover p-4 text-sm text-popover-foreground/60 shadow-md">
No profiles found
</div>
);
@@ -81,7 +81,7 @@ export const ProfileSuggestionList = forwardRef<
<div
ref={listRef}
role="listbox"
className="max-h-[300px] w-[320px] overflow-y-auto border border-border/50 bg-popover shadow-md"
className="max-h-[300px] w-[320px] overflow-y-auto border border-border/50 bg-popover text-popover-foreground shadow-md"
>
{items.map((item, index) => (
<button
@@ -99,7 +99,7 @@ export const ProfileSuggestionList = forwardRef<
<UserName pubkey={item.pubkey} />
</div>
{item.nip05 && (
<div className="truncate text-xs text-muted-foreground">
<div className="truncate text-xs text-popover-foreground/60">
{item.nip05}
</div>
)}

8
src/components/editor/SlashCommandSuggestionList.tsx
View File

@@ -71,7 +71,7 @@ export const SlashCommandSuggestionList = forwardRef<
if (items.length === 0) {
return (
<div className="border border-border/50 bg-popover p-4 text-sm text-muted-foreground shadow-md">
<div className="border border-border/50 bg-popover p-4 text-sm text-popover-foreground/60 shadow-md">
No commands available
</div>
);
@@ -81,7 +81,7 @@ export const SlashCommandSuggestionList = forwardRef<
<div
ref={listRef}
role="listbox"
className="max-h-[300px] w-[320px] overflow-y-auto border border-border/50 bg-popover shadow-md"
className="max-h-[300px] w-[320px] overflow-y-auto border border-border/50 bg-popover text-popover-foreground shadow-md"
>
{items.map((item, index) => (
<button
@@ -94,12 +94,12 @@ export const SlashCommandSuggestionList = forwardRef<
index === selectedIndex ? "bg-muted/60" : "hover:bg-muted/60"
}`}
>
<Terminal className="size-4 flex-shrink-0 text-muted-foreground" />
<Terminal className="size-4 flex-shrink-0 text-popover-foreground/60" />
<div className="min-w-0 flex-1">
<div className="truncate text-sm font-medium font-mono">
/{item.name}
</div>
<div className="truncate text-xs text-muted-foreground">
<div className="truncate text-xs text-popover-foreground/60">
{item.description}
</div>
</div>