refine: improve gradients to match theme colors and work across themes

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.
This commit is contained in:
Claude
2026-01-18 19:56:21 +00:00
parent 694a485735
commit 45e7947a4e

View File

@@ -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",