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

Cleanup side menu and reduce header transparency for a more solid feel

Browse Source
This commit is contained in:
Avery Felts 2026-01-28 09:00:47 -07:00
parent 4dec6adc1c
commit 1a95af4fed
2 changed files with 6 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/SideMenu.tsx
View File

@ -133,30 +133,6 @@ export function SideMenu({ isOpen, onClose, user, userName }: SideMenuProps) {
onClick={() => handleNavigate('/smoking-aids')}
color="purple"
/>
<MenuLink
icon={Heart}
label="Health Status"
onClick={() => {
// Link to Dashboard Health Section
onClose();
const el = document.getElementById('journey-section');
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
else alert("View your Health Status on the Dashboard Journey section!");
}}
color="blue"
/>
<MenuLink
icon={Calendar}
label="History"
onClick={() => {
onClose();
// Link to Calendar section
const el = document.getElementById('calendar-section');
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
else alert("View your History on the Dashboard Calendar!");
}}
color="amber"
/>
</div>
{/* Footer Actions */}
@ -164,14 +140,6 @@ export function SideMenu({ isOpen, onClose, user, userName }: SideMenuProps) {
"p-4 border-t",
theme === 'light' ? "border-slate-100" : "border-white/5"
)}>
<MenuLink
icon={Settings}
label="Settings"
onClick={() => {
onClose();
alert("Please use the Notification Bell in the header for settings.");
}}
/>
<button
onClick={handleLogout}
className="w-full flex items-center gap-3 px-3 py-3 rounded-xl text-red-500 hover:bg-red-500/10 transition-colors font-medium mt-1"

12
src/components/UserHeader.tsx
View File

@ -214,15 +214,15 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
<>
<header className="sticky top-0 z-50 transition-colors duration-300 relative" style={{
background: theme === 'light'
? 'rgba(255, 255, 255, 0.85)'
: 'rgba(10, 10, 20, 0.95)',
backdropFilter: 'blur(12px)',
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.05)' : '1px solid rgba(255,255,255,0.05)'
? 'rgba(255, 255, 255, 0.98)'
: 'rgba(10, 10, 20, 0.99)',
backdropFilter: 'blur(16px)',
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.05)' : '1px solid rgba(255,255,255,0.08)'
}}>
{/* Cloudy/Foggy effect overlay - removed mix-blend-overlay for visibility */}
<div className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-all duration-300">
<div className="absolute inset-0 fog-layer-1 opacity-50 dark:opacity-40" />
<div className="absolute inset-0 fog-layer-2 opacity-40 dark:opacity-30" />
<div className="absolute inset-0 fog-layer-1 opacity-35 dark:opacity-25" />
<div className="absolute inset-0 fog-layer-2 opacity-25 dark:opacity-15" />
</div>
<div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">