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

Update streak onboarding card size to w-[80vw] h-[80vh] and background color of animation and greetings panels to solid black

Browse Source
This commit is contained in:
ectasy663
2026-07-10 16:08:59 +05:30
parent ebc552a8ca
commit f15c260cae
3 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,15 +56,15 @@ export function StreakOnboardingModal() {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/85 backdrop-blur-md animate-in fade-in duration-300">
{/* Centered Modal Card Container with Border (containing both the animation and text) */}
<div className="bg-background/95 border border-border shadow-[0_0_60px_-10px_rgba(0,240,255,0.2)] rounded-3xl w-full max-w-2xl relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start">
{/* Centered Modal Card Container covering 80% screen size (w-[80vw] h-[80vh]) */}
<div className="bg-black border border-border/80 shadow-[0_0_60px_-10px_rgba(0,240,255,0.25)] rounded-3xl w-[80vw] max-w-5xl h-[80vh] max-h-[800px] relative overflow-hidden animate-in zoom-in-95 slide-in-from-bottom-4 duration-300 z-20 pointer-events-auto mx-4 flex flex-col justify-start">
{/* Subtle background glow */}
<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 360px, border-b) */}
<div className="relative w-full h-[360px] border-b border-border/40 z-10 pointer-events-none overflow-hidden bg-[#0c1c39]/30">
{/* 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">
<iframe
src={`/streak-animation.html?streak=${streak}`}
className="w-full h-full border-none"
@@ -73,40 +73,42 @@ export function StreakOnboardingModal() {
/>
</div>
{/* Bottom Greetings & Action Panel */}
<div className="p-6 text-center space-y-4">
{/* Bottom Greetings & Action Panel (height 40%, pure black bg) */}
<div className="p-8 text-center flex-1 flex flex-col justify-between bg-black z-20">
{/* Badge Indicators */}
<div className="flex flex-col items-center gap-2">
{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>
) : (
<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>
)}
<div className="space-y-4">
{/* Badge Indicators */}
<div className="flex flex-col items-center gap-2">
{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>
) : (
<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>
)}
{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">
🎁 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">
{wishTitle}
</h3>
<p className="text-gray-400 text-xs md:text-sm leading-relaxed max-w-sm mx-auto">
{wishMessage}
</p>
{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">
🎁 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">
{wishTitle}
</h3>
<p className="text-gray-400 text-xs md:text-sm leading-relaxed max-w-md mx-auto">
{wishMessage}
</p>
</div>
</div>
{/* Action Button */}
<div className="pt-1">
<div className="pt-2 max-w-sm w-full mx-auto">
<Button
onClick={handleEnter}
className="w-full h-12 rounded-xl text-base font-black bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 shadow-[0_0_15px_-3px_#00F0FF] hover:shadow-[0_0_25px_#00F0FF] hover:-translate-y-0.5 transition-all duration-300"