naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update streak onboarding modal styling (black bg, larger text, no border)

Browse Source
This commit is contained in:
ectasy663
2026-07-10 16:17:44 +05:30
parent f15c260cae
commit 7a293b6df0
3 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Dashboard/StreakOnboardingModal.tsx
View File

@@ -63,8 +63,8 @@ export function StreakOnboardingModal() {
<div className="absolute -right-20 -top-20 size-48 bg-[#00F0FF]/5 rounded-full blur-3xl pointer-events-none" />
<div className="absolute -left-20 -bottom-20 size-48 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
{/* Top Celebration Animation Panel (Iframe with height 60%, border-b, pure black bg) */}
<div className="relative w-full h-[60%] border-b border-border/40 z-10 pointer-events-none overflow-hidden bg-black">
{/* Top Celebration Animation Panel (Iframe with height 60%, pure black bg) */}
<div className="relative w-full h-[60%] z-10 pointer-events-none overflow-hidden bg-black">
<iframe
src={`/streak-animation.html?streak=${streak}`}
className="w-full h-full border-none"
@@ -78,30 +78,30 @@ export function StreakOnboardingModal() {
<div className="space-y-4">
{/* Badge Indicators */}
<div className="flex flex-col items-center gap-2">
<div className="flex flex-col items-center gap-3">
{streak > 0 ? (
<div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-orange-500/10 border border-orange-500/20 text-orange-500 text-xs font-extrabold rounded-full tracking-wider uppercase">
<Flame size={12} className="fill-current animate-bounce" /> {streak} Day Streak Active
<div className="inline-flex items-center gap-2 px-4 py-1.5 bg-orange-500/10 border border-orange-500/30 text-orange-500 text-sm md:text-base font-extrabold rounded-full tracking-wider uppercase">
<Flame size={16} className="fill-current animate-bounce" /> {streak} Day Streak Active
</div>
) : (
<div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-extrabold rounded-full tracking-wider uppercase">
<Sparkles size={12} className="animate-spin" style={{ animationDuration: '4s' }} /> Day 1 Awaits
<div className="inline-flex items-center gap-2 px-4 py-1.5 bg-blue-500/10 border border-blue-500/30 text-blue-400 text-sm md:text-base font-extrabold rounded-full tracking-wider uppercase">
<Sparkles size={16} className="animate-spin" style={{ animationDuration: '4s' }} /> Day 1 Awaits
</div>
)}
{trialDaysLeft > 0 && (
<div className="inline-flex items-center gap-1.5 px-3 py-0.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold rounded-full tracking-wider">
<div className="inline-flex items-center gap-2 px-4 py-1.5 bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-sm md:text-base font-semibold rounded-full tracking-wider">
🎁 Free Trial: {trialDaysLeft} {trialDaysLeft === 1 ? "day" : "days"} remaining
</div>
)}
</div>
{/* Greetings Text */}
<div className="space-y-2">
<h3 className="text-xl md:text-2xl font-black tracking-tight bg-gradient-to-r from-white via-white to-gray-400 bg-clip-text text-transparent">
<div className="space-y-3">
<h3 className="text-2xl md:text-3xl font-black tracking-tight bg-gradient-to-r from-white via-white to-gray-400 bg-clip-text text-transparent">
{wishTitle}
</h3>
<p className="text-gray-400 text-xs md:text-sm leading-relaxed max-w-md mx-auto">
<p className="text-gray-400 text-sm md:text-base leading-relaxed max-w-lg mx-auto">
{wishMessage}
</p>
</div>