averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UserHeader for transparent background and simplified styling

Browse Source
This commit is contained in:
Avery Felts 2026-02-01 12:30:26 -07:00
parent 7ee0aff52f
commit 805508a413
1 changed files with 14 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/UserHeader.tsx
View File

@ -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" />