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

8
public/streak-animation.html
View File

@@ -155,11 +155,13 @@
.stage.play.tier3 .scene,.stage.play.tier3 .flash{animation:none} .stage.play.tier3 .scene,.stage.play.tier3 .flash{animation:none}
} }
body { body, html {
background: transparent !important; background: #000000 !important;
background-image: none !important;
} }
body.sad { body.sad {
background: transparent !important; background: #000000 !important;
background-image: none !important;
} }
body::after { body::after {
display: none !important; display: none !important;

8
scratch/port_streak_clean.py
View File

@@ -10,11 +10,13 @@ def port_html():
# 1. Inject CSS to make background transparent and hide stage layout # 1. Inject CSS to make background transparent and hide stage layout
hide_css = """ hide_css = """
body { body, html {
background: transparent !important; background: #000000 !important;
background-image: none !important;
} }
body.sad { body.sad {
background: transparent !important; background: #000000 !important;
background-image: none !important;
} }
body::after { body::after {
display: none !important; display: none !important;

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 -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" /> <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) */} {/* Top Celebration Animation Panel (Iframe with height 60%, pure black bg) */}
<div className="relative w-full h-[60%] border-b border-border/40 z-10 pointer-events-none overflow-hidden bg-black"> <div className="relative w-full h-[60%] z-10 pointer-events-none overflow-hidden bg-black">
<iframe <iframe
src={`/streak-animation.html?streak=${streak}`} src={`/streak-animation.html?streak=${streak}`}
className="w-full h-full border-none" className="w-full h-full border-none"
@@ -78,30 +78,30 @@ export function StreakOnboardingModal() {
<div className="space-y-4"> <div className="space-y-4">
{/* Badge Indicators */} {/* Badge Indicators */}
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-3">
{streak > 0 ? ( {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"> <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={12} className="fill-current animate-bounce" /> {streak} Day Streak Active <Flame size={16} className="fill-current animate-bounce" /> {streak} Day Streak Active
</div> </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"> <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={12} className="animate-spin" style={{ animationDuration: '4s' }} /> Day 1 Awaits <Sparkles size={16} className="animate-spin" style={{ animationDuration: '4s' }} /> Day 1 Awaits
</div> </div>
)} )}
{trialDaysLeft > 0 && ( {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 🎁 Free Trial: {trialDaysLeft} {trialDaysLeft === 1 ? "day" : "days"} remaining
</div> </div>
)} )}
</div> </div>
{/* Greetings Text */} {/* Greetings Text */}
<div className="space-y-2"> <div className="space-y-3">
<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"> <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} {wishTitle}
</h3> </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} {wishMessage}
</p> </p>
</div> </div>