From 8a5d96deb89c27841587805c4def1b6091b51068 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 18 Jan 2026 21:16:18 +0000
Subject: [PATCH] feat: add subtle gradient to BadgeCheck icon matching
 username
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The badge icon now has its own subtle gradient that continues from
the username gradient's ending color:

- Logged-in: amber-600 → amber-400 (darker to brighter amber)
- Others: fuchsia-600 → fuchsia-400 (darker to brighter fuchsia)
- Both use bg-gradient-to-tr direction to match username

This creates a cohesive visual flow where the gradient subtly
continues from the username into the verification badge.
---
 src/components/nostr/UserName.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/nostr/UserName.tsx b/src/components/nostr/UserName.tsx
index 2996991..4175db7 100644
--- a/src/components/nostr/UserName.tsx
+++ b/src/components/nostr/UserName.tsx
@@ -62,7 +62,9 @@ export function UserName({ pubkey, isMention, className }: UserNameProps) {
         <BadgeCheck
           className={cn(
             "inline-block w-[1em] h-[1em]",
-            isActiveAccount ? "text-orange-500" : "text-violet-500",
+            isActiveAccount
+              ? "bg-gradient-to-tr from-amber-600 to-amber-400 bg-clip-text text-transparent"
+              : "bg-gradient-to-tr from-fuchsia-600 to-fuchsia-400 bg-clip-text text-transparent",
           )}
         />
       )}