refactor: Improve premium gradient with glowy orange/yellow tones

Changes:
- Replace rainbow gradient with warm orange/yellow gradient (amber-400 → orange-400 → orange-500)
- Add glow effects with text-shadow and drop-shadow for a luminous appearance
- Remove gradient from NIP-05 display, keep it plain with orange checkmark badge
- Gradient now only applies to username, not NIP-05 identifier

The new gradient focuses on warm tones that create a subtle glow effect, making premium users stand out without being overwhelming.
This commit is contained in:
Claude
2026-01-14 10:33:40 +00:00
parent 6f3314c4db
commit 05fbcacb08
2 changed files with 8 additions and 15 deletions

View File

@@ -1,7 +1,6 @@
import { useNip05 } from "@/hooks/useNip05";
import { ProfileContent } from "applesauce-core/helpers";
import { isGrimoirePremium, isGrimoireNip05 } from "@/lib/nip05-grimoire";
import { cn } from "@/lib/utils";
import { Check } from "lucide-react";
export function QueryNip05({
@@ -21,16 +20,9 @@ export function QueryNip05({
const displayNip05 = nip05.replace(/^_@/, "");
return (
<span
className={cn(
"flex items-center gap-1",
isPremium && "text-grimoire-gradient font-semibold",
)}
>
<span className="flex items-center gap-1">
{displayNip05}
{isPremium && (
<Check className="inline-block h-3 w-3 text-grimoire-gradient" />
)}
{isPremium && <Check className="inline-block h-3 w-3 text-orange-400" />}
</span>
);
}

View File

@@ -105,15 +105,16 @@
.text-grimoire-gradient {
background: linear-gradient(
to bottom,
rgb(250 204 21),
/* yellow-400 */ rgb(251 146 60),
/* orange-400 */ rgb(168 85 247),
/* purple-500 */ rgb(34 211 238) /* cyan-400 */
135deg,
rgb(251 191 36) 0%,
/* amber-400 */ rgb(251 146 60) 50%,
/* orange-400 */ rgb(249 115 22) 100% /* orange-500 */
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(251, 146, 60, 0.5);
filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.4));
}
}