Fix modal border and improve light mode firecracker colors

This commit is contained in:
2026-07-10 16:51:25 +05:30
parent 6382924a62
commit 90700c0268
3 changed files with 18 additions and 41 deletions

View File

@@ -8,7 +8,8 @@ import { useTheme } from "next-themes";
export function StreakOnboardingModal() {
const { user, loading } = useActiveUser();
const { resolvedTheme } = useTheme();
const { resolvedTheme, theme } = useTheme();
const activeTheme = resolvedTheme || theme || "dark";
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
@@ -59,7 +60,7 @@ export function StreakOnboardingModal() {
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/85 backdrop-blur-md animate-in fade-in duration-300">
{/* Centered Modal Card Container covering 80% screen size (w-[80vw] h-[80vh]) */}
<div className="bg-background 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">
<div className="bg-background border-none 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" />
@@ -68,7 +69,7 @@ export function StreakOnboardingModal() {
{/* Top Celebration Animation Panel (Iframe with height 60%, matching bg) */}
<div className="relative w-full h-[60%] z-10 pointer-events-none overflow-hidden bg-background">
<iframe
src={`/streak-animation.html?streak=${streak}&theme=${resolvedTheme === 'light' ? 'light' : 'dark'}`}
src={`/streak-animation.html?streak=${streak}&theme=${activeTheme === 'light' ? 'light' : 'dark'}`}
className="w-full h-full border-none"
title="Streak Celebration"
allowtransparency="true"