From 90700c0268fea59092b0451f442a85d1c77234e0 Mon Sep 17 00:00:00 2001
From: ectasy663 <namansingh4680@gmail.com>
Date: Fri, 10 Jul 2026 16:51:25 +0530
Subject: [PATCH] Fix modal border and improve light mode firecracker colors

---
 public/streak-animation.html                  | 26 +++++--------------
 scratch/port_streak_clean.py                  | 26 +++++--------------
 .../Dashboard/StreakOnboardingModal.tsx       |  7 ++---
 3 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/public/streak-animation.html b/public/streak-animation.html
index 68ea8b4..638f840 100644
--- a/public/streak-animation.html
+++ b/public/streak-animation.html
@@ -207,14 +207,8 @@
 
 <script>
   (function(){
-    let isLight = false;
-    try {
-      isLight = !window.parent.document.documentElement.classList.contains('dark');
-    } catch (e) {
-      const p = new URLSearchParams(window.location.search);
-      isLight = p.get('theme') === 'light';
-    }
-    window.isLightTheme = isLight;
+    const p = new URLSearchParams(window.location.search);
+    window.isLightTheme = p.get('theme') === 'light';
   })();
 
   const stage=document.getElementById('stage');
@@ -236,8 +230,8 @@
   }
   resize(); addEventListener('resize',resize);
 
-  const SPARK=window.isLightTheme?['#e28a22','#c2410c','#b45309','#78350f','#ea580c','#3b82f6']:['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];
-  const CONF=window.isLightTheme?['#e28a22','#c2410c','#b45309','#ea580c','#ef4444','#3b82f6','#10b981']:['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];
+  const SPARK=window.isLightTheme?['#b91c1c','#c2410c','#1d4ed8','#15803d','#7e22ce','#0f172a']:['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];
+  const CONF=window.isLightTheme?['#b91c1c','#c2410c','#1d4ed8','#15803d','#7e22ce','#0f172a','#b45309']:['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];
   let parts=[], running=false, mode='fireworks', rafFW=null, fwTimers=[], fadeCol=(window.isLightTheme ? 'rgba(255,255,255,0.22)' : 'rgba(0,0,0,0.22)');
 
   function burst(xr,yr,count){
@@ -409,15 +403,9 @@
 <script>
   (function(){
     setInterval(() => {
-      let isLight = false;
-      try {
-        isLight = !window.parent.document.documentElement.classList.contains('dark');
-      } catch (e) {
-        const p = new URLSearchParams(window.location.search);
-        isLight = p.get('theme') === 'light';
-      }
-
-      window.isLightTheme = isLight;
+      const p = new URLSearchParams(window.location.search);
+      window.isLightTheme = p.get('theme') === 'light';
+      const isLight = window.isLightTheme;
 
       if (isLight) {
         document.body.style.setProperty('background', '#ffffff', 'important');
diff --git a/scratch/port_streak_clean.py b/scratch/port_streak_clean.py
index adcbd0a..da535aa 100644
--- a/scratch/port_streak_clean.py
+++ b/scratch/port_streak_clean.py
@@ -64,21 +64,15 @@ def port_html():
     # Inject theme initialization at start of script block
     init_theme_script = """<script>
   (function(){
-    let isLight = false;
-    try {
-      isLight = !window.parent.document.documentElement.classList.contains('dark');
-    } catch (e) {
-      const p = new URLSearchParams(window.location.search);
-      isLight = p.get('theme') === 'light';
-    }
-    window.isLightTheme = isLight;
+    const p = new URLSearchParams(window.location.search);
+    window.isLightTheme = p.get('theme') === 'light';
   })();
 """
     html = html.replace("<script>", init_theme_script, 1)
 
     # Make firecracker spark/confetti arrays dynamic based on theme
-    spark_replacement = "const SPARK=window.isLightTheme?['#e28a22','#c2410c','#b45309','#78350f','#ea580c','#3b82f6']:['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];"
-    conf_replacement = "const CONF=window.isLightTheme?['#e28a22','#c2410c','#b45309','#ea580c','#ef4444','#3b82f6','#10b981']:['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];"
+    spark_replacement = "const SPARK=window.isLightTheme?['#b91c1c','#c2410c','#1d4ed8','#15803d','#7e22ce','#0f172a']:['#f6dd93','#e8c463','#d4af37','#fff4cf','#ffffff','#8fb4ff'];"
+    conf_replacement = "const CONF=window.isLightTheme?['#b91c1c','#c2410c','#1d4ed8','#15803d','#7e22ce','#0f172a','#b45309']:['#f6dd93','#e8c463','#d4af37','#ffffff','#ffd34d'];"
     html = re.sub(r"const SPARK\s*=\s*\[[^\]]*\];", spark_replacement, html)
     html = re.sub(r"const CONF\s*=\s*\[[^\]]*\];", conf_replacement, html)
 
@@ -112,15 +106,9 @@ def port_html():
 <script>
   (function(){
     setInterval(() => {
-      let isLight = false;
-      try {
-        isLight = !window.parent.document.documentElement.classList.contains('dark');
-      } catch (e) {
-        const p = new URLSearchParams(window.location.search);
-        isLight = p.get('theme') === 'light';
-      }
-
-      window.isLightTheme = isLight;
+      const p = new URLSearchParams(window.location.search);
+      window.isLightTheme = p.get('theme') === 'light';
+      const isLight = window.isLightTheme;
 
       if (isLight) {
         document.body.style.setProperty('background', '#ffffff', 'important');
diff --git a/src/components/Dashboard/StreakOnboardingModal.tsx b/src/components/Dashboard/StreakOnboardingModal.tsx
index 06a5fab..f4d7a97 100644
--- a/src/components/Dashboard/StreakOnboardingModal.tsx
+++ b/src/components/Dashboard/StreakOnboardingModal.tsx
@@ -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"