From 805508a413a2422fe5a0e8115d387814a0b7c3d2 Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Sun, 1 Feb 2026 12:30:26 -0700
Subject: [PATCH] Refactor UserHeader for transparent background and simplified
 styling

---
 src/components/UserHeader.tsx | 41 ++++++++++++-----------------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index ace967e..40b5521 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -276,7 +276,7 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
   return (
     <>
       <header className="sticky top-0 z-50 relative overflow-hidden h-16 sm:h-20" style={{
-        borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.08)' : '1px solid rgba(255,255,255,0.08)'
+        borderBottom: '1px solid rgba(255,255,255,0.08)'
       }}>
         {/* Background Layers */}
         <div className="absolute inset-0 z-[-1] pointer-events-none overflow-hidden">
@@ -310,15 +310,11 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
             }
           ` }} />
 
-          {/* Base Color & Blur Layer - Optimized for Performance on Mobile */}
+          {/* Base Background Layer - Simple semi-transparent base */}
           <div
             className="absolute inset-0 transition-colors duration-500"
             style={{
-              background: theme === 'light'
-                ? (isMobile ? 'rgba(255, 255, 255, 0.45)' : 'rgba(255, 255, 255, 0.35)')
-                : (isMobile ? 'rgba(10, 10, 20, 0.45)' : 'rgba(10, 10, 20, 0.35)'),
-              backdropFilter: isMobile ? 'blur(10px)' : 'blur(20px)', // Reduce blur on mobile for performance
-              WebkitBackdropFilter: isMobile ? 'blur(10px)' : 'blur(20px)',
+              background: 'rgba(10, 10, 20, 0.5)',
             }}
           />
 
@@ -373,7 +369,7 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
                 "absolute inset-0 w-full h-full object-cover transition-opacity duration-[1500ms] ease-in-out",
                 isMobile ? "scale-105" : "scale-110",
                 isVideoPlaying
-                  ? (isMobile ? "opacity-60 dark:opacity-40" : "opacity-80 dark:opacity-60") // Lower opacity on mobile for better text contrast
+                  ? "opacity-50" // Simple consistent transparency
                   : "opacity-[0.01]"
               )}
             >
@@ -381,13 +377,6 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
             </video>
           </div>
 
-          {/* Vignette/Readability Overlay - Reinforced for contrast */}
-          <div className={cn(
-            "absolute inset-0 bg-gradient-to-b mix-blend-multiply",
-            isMobile
-              ? "from-black/40 via-transparent to-black/60 dark:from-black/70 dark:via-transparent dark:to-black/80" // Stronger contrast on mobile
-              : "from-black/30 via-transparent to-black/50 dark:from-black/60 dark:via-transparent dark:to-black/70"
-          )} />
         </div>
 
         <div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">
@@ -395,19 +384,19 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
           <div className="flex-1 flex justify-start">
             <button
               onClick={() => setIsSideMenuOpen(true)}
-              className="group relative flex items-center gap-2 p-1.5 pr-3 rounded-full transition-all hover:bg-black/5 dark:hover:bg-white/5 active:scale-95 border border-transparent hover:border-primary/10"
+              className="group relative flex items-center gap-2 p-1.5 pr-3 rounded-full transition-all hover:bg-white/10 active:scale-95 border border-transparent hover:border-white/10"
             >
               <div className="relative">
-                <Avatar className="h-9 w-9 sm:h-10 sm:w-10 ring-2 ring-primary/20 transition-all group-hover:ring-primary/50 shadow-sm">
+                <Avatar className="h-9 w-9 sm:h-10 sm:w-10 ring-2 ring-white/20 transition-all group-hover:ring-white/50 shadow-sm">
                   <AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
                   <AvatarFallback className="bg-gradient-to-br from-indigo-500 to-purple-500 text-white font-bold">{initials}</AvatarFallback>
                 </Avatar>
-                <div className="absolute -bottom-1 -right-1 bg-white dark:bg-slate-900 rounded-full p-0.5 shadow-sm border border-border">
-                  <Menu className="h-3 w-3 text-primary" />
+                <div className="absolute -bottom-1 -right-1 bg-slate-900 rounded-full p-0.5 shadow-sm border border-white/10">
+                  <Menu className="h-3 w-3 text-white" />
                 </div>
               </div>
               <div className="hidden sm:block text-left">
-                <div className="text-[10px] font-bold uppercase tracking-widest opacity-50 leading-none">Menu</div>
+                <div className="text-[10px] font-bold uppercase tracking-widest opacity-50 text-white leading-none">Menu</div>
               </div>
             </button>
           </div>
@@ -417,19 +406,17 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
             <h1
               className={cn(
                 "text-xl sm:text-2xl font-bold cursor-pointer transition-all duration-300 hover:scale-105 tracking-tight leading-tight bg-clip-text text-transparent w-fit mx-auto",
-                theme === 'light'
-                  ? 'bg-gradient-to-br from-[#4f46e5] to-[#7c3aed]'
-                  : 'bg-gradient-to-br from-[#a78bfa] to-[#f472b6]'
+                "bg-gradient-to-br from-[#a78bfa] to-[#f472b6]"
               )}
               onClick={() => handleNavigate('/')}
               style={{
-                filter: theme === 'dark' ? 'drop-shadow(0 0 10px rgba(167, 139, 250, 0.3))' : 'none'
+                filter: 'drop-shadow(0 0 10px rgba(167, 139, 250, 0.3))'
               }}
             >
               QuitTraq
             </h1>
             {userName && (
-              <p className="text-[10px] sm:text-xs font-medium text-foreground/60 tracking-wide mt-0.5 whitespace-nowrap overflow-hidden">
+              <p className="text-[10px] sm:text-xs font-medium text-white/60 tracking-wide mt-0.5 whitespace-nowrap overflow-hidden">
                 Welcome {userName}, you got this!
               </p>
             )}
@@ -443,7 +430,7 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
                 "p-2 sm:p-2.5 rounded-full transition-all duration-300 active:scale-90 shadow-sm",
                 reminderSettings.enabled
                   ? 'bg-indigo-500/15 text-indigo-400 border border-indigo-500/20'
-                  : 'bg-muted border border-transparent text-muted-foreground'
+                  : 'bg-white/5 border border-transparent text-white/50 hover:bg-white/10'
               )}
             >
               {reminderSettings.enabled ? (
@@ -455,7 +442,7 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
             <InstallAppButton />
             <button
               onClick={toggleTheme}
-              className="p-2 sm:p-2.5 rounded-full bg-muted border border-transparent hover:bg-muted/80 transition-all active:scale-90"
+              className="p-2 sm:p-2.5 rounded-full bg-white/5 border border-transparent hover:bg-white/10 transition-all active:scale-90"
             >
               {theme === 'dark' ? (
                 <Moon className="h-4.5 w-4.5 sm:h-5 sm:w-5 text-blue-300" />