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

Support Light Theme natively for Streak Modal & iframe

Browse Source
This commit is contained in:
ectasy663
2026-07-10 16:33:50 +05:30
parent d04295552e
commit 2ca9fdbbb5
2 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,9 +4,11 @@ import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Flame, Sparkles } from "lucide-react";
import { useActiveUser } from "@/hooks/useActiveUser";
import { useTheme } from "next-themes";
export function StreakOnboardingModal() {
const { user, loading } = useActiveUser();
const { theme } = useTheme();
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
@@ -54,27 +56,27 @@ 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">
<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-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">
<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">
{/* 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 60%, pure black bg) */}
<div className="relative w-full h-[60%] z-10 pointer-events-none overflow-hidden bg-black">
{/* 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}`}
src={`/streak-animation.html?streak=${streak}&theme=${theme === 'light' ? 'light' : 'dark'}`}
className="w-full h-full border-none"
title="Streak Celebration"
allowtransparency="true"
/>
</div>
{/* 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">
{/* Bottom Greetings & Action Panel (height 40%, matching bg) */}
<div className="p-8 text-center flex-1 flex flex-col justify-between bg-background z-20">
<div className="space-y-4">
{/* Badge Indicators */}
@@ -98,10 +100,10 @@ export function StreakOnboardingModal() {
{/* Greetings Text */}
<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">
<h3 className="text-2xl md:text-3xl font-black tracking-tight bg-gradient-to-r dark:from-white dark:via-white dark:to-gray-400 from-black via-black to-gray-600 bg-clip-text text-transparent">
{wishTitle}
</h3>
<p className="text-gray-400 text-sm md:text-base leading-relaxed max-w-lg mx-auto">
<p className="text-muted-foreground text-sm md:text-base leading-relaxed max-w-lg mx-auto">
{wishMessage}
</p>
</div>