From 45e7947a4eb7ae4a43bfd82a9cf2482103e3ba20 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 18 Jan 2026 19:56:21 +0000 Subject: [PATCH] refine: improve gradients to match theme colors and work across themes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updates both Grimoire member gradients to better align with their non-member equivalents while ensuring visibility in both light and dark themes: **Logged-in gradient** (orange-dominant to match highlight color): - Changed: yellow-500 → orange-500 → orange-600 - To: orange-400 → orange-500 → amber-600 - Matches highlight (HSL 25 90% 35% light, 27 96% 61% dark) **Non-logged-in gradient** (purple-dominant to match accent color): - Changed: blue-400 → purple-400 → purple-500 - To: violet-500 → purple-500 → fuchsia-600 - Matches accent (HSL 270 100% 70% dark) - More saturated to stand out in light theme Both gradients now maintain their primary colors while being more visible and consistent across light and dark themes. --- src/components/nostr/UserName.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/nostr/UserName.tsx b/src/components/nostr/UserName.tsx index 00084cb..48eea68 100644 --- a/src/components/nostr/UserName.tsx +++ b/src/components/nostr/UserName.tsx @@ -14,10 +14,10 @@ interface UserNameProps { * Component that displays a user's name from their Nostr profile * Shows placeholder derived from pubkey while loading or if no profile exists * Clicking opens the user's profile - * Uses highlight color for the logged-in user (themeable amber) + * Uses highlight color for the logged-in user (themeable orange) * Shows Grimoire members with gradient styling: - * - Orange-yellow gradient for logged-in Grimoire member - * - Purple-blue gradient for other Grimoire members + * - Orange gradient for logged-in Grimoire member (matches highlight) + * - Purple-pink gradient for other Grimoire members (matches accent) */ export function UserName({ pubkey, isMention, className }: UserNameProps) { const { addWindow, state } = useGrimoire(); @@ -40,8 +40,8 @@ export function UserName({ pubkey, isMention, className }: UserNameProps) { "font-semibold cursor-crosshair hover:underline hover:decoration-dotted", isGrimoire ? isActiveAccount - ? "bg-gradient-to-br from-yellow-500 via-orange-500 to-orange-600 bg-clip-text text-transparent" - : "bg-gradient-to-br from-blue-400 via-purple-400 to-purple-500 bg-clip-text text-transparent" + ? "bg-gradient-to-br from-orange-400 via-orange-500 to-amber-600 bg-clip-text text-transparent" + : "bg-gradient-to-br from-violet-500 via-purple-500 to-fuchsia-600 bg-clip-text text-transparent" : isActiveAccount ? "text-highlight" : "text-accent",