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

Fix stats card text to white and improve dropdown menu visibility

Browse Source 
- Update stats card text to white for better visibility
- Add chevron down icon to dropdown trigger for clearer interaction
- Style dropdown menu with dark background and proper z-index
- Improve dropdown menu item hover states
- Make dropdown trigger more visible with background

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Avery Felts 2026-01-24 01:24:56 -07:00
parent 4a26c1ccdc
commit b15f9a3c8e
4 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/app/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

18
src/components/StatsCard.tsx
View File

@ -61,7 +61,7 @@ export function StatsCard({ usageData, substance }: StatsCardProps) {
return (
<Card className={`bg-card/80 backdrop-blur-sm border ${borderColor} bg-gradient-to-br ${bgGradient}`}>
<CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2">
<CardTitle className="flex items-center gap-2 text-white">
<SubstanceIcon className={`h-5 w-5 ${iconColor}`} />
<span>{substanceLabel} Stats</span>
</CardTitle>
@ -69,20 +69,20 @@ export function StatsCard({ usageData, substance }: StatsCardProps) {
<CardContent>
<div className="grid grid-cols-2 gap-4">
<div className="bg-muted p-4 rounded-lg text-center">
<p className="text-2xl font-bold">{todayUsage}</p>
<p className="text-sm text-muted-foreground">Today</p>
<p className="text-2xl font-bold text-white">{todayUsage}</p>
<p className="text-sm text-white/70">Today</p>
</div>
<div className="bg-muted p-4 rounded-lg text-center">
<p className="text-2xl font-bold">{weekAverage}</p>
<p className="text-sm text-muted-foreground">Daily Avg (7d)</p>
<p className="text-2xl font-bold text-white">{weekAverage}</p>
<p className="text-sm text-white/70">Daily Avg (7d)</p>
</div>
<div className="bg-muted p-4 rounded-lg text-center">
<p className="text-2xl font-bold">{streak}</p>
<p className="text-sm text-muted-foreground">Free days</p>
<p className="text-2xl font-bold text-white">{streak}</p>
<p className="text-sm text-white/70">Free days</p>
</div>
<div className="bg-muted p-4 rounded-lg text-center">
<p className="text-2xl font-bold">{totalDays}</p>
<p className="text-sm text-muted-foreground">Days tracked</p>
<p className="text-2xl font-bold text-white">{totalDays}</p>
<p className="text-sm text-white/70">Days tracked</p>
</div>
</div>

46
src/components/UserHeader.tsx
View File

@ -1,7 +1,6 @@
'use client';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
@ -13,7 +12,7 @@ import { User } from '@/lib/session';
import { fetchPreferences } from '@/lib/storage';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Cigarette, Leaf, LogOut, Home } from 'lucide-react';
import { Cigarette, Leaf, LogOut, Home, ChevronDown } from 'lucide-react';
interface UserHeaderProps {
user: User;
@ -36,10 +35,14 @@ export function UserHeader({ user }: UserHeaderProps) {
.join('')
.toUpperCase() || user.email[0].toUpperCase();
const handleLogout = async () => {
const handleLogout = () => {
window.location.href = '/api/auth/logout';
};
const handleNavigate = (path: string) => {
router.push(path);
};
return (
<header className="border-b border-white/10" style={{
background: 'linear-gradient(135deg, rgba(147, 112, 219, 0.9) 0%, rgba(138, 99, 210, 0.85) 50%, rgba(123, 82, 195, 0.9) 100%)',
@ -49,7 +52,7 @@ export function UserHeader({ user }: UserHeaderProps) {
<div className="flex items-center gap-4">
<h1
className="text-2xl font-bold text-white cursor-pointer hover:opacity-80 transition-opacity"
onClick={() => router.push('/')}
onClick={() => handleNavigate('/')}
>
QuitTraq
</h1>
@ -60,34 +63,35 @@ export function UserHeader({ user }: UserHeaderProps) {
)}
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="focus:outline-none focus:ring-2 focus:ring-white/30 rounded-full">
<Avatar className="h-10 w-10 ring-2 ring-white/30 cursor-pointer hover:ring-white/50 transition-all">
<button className="flex items-center gap-2 px-3 py-2 rounded-full bg-white/10 hover:bg-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-white/30">
<Avatar className="h-8 w-8 ring-2 ring-white/30">
<AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
<AvatarFallback className="bg-white/20 text-white">{initials}</AvatarFallback>
<AvatarFallback className="bg-white/20 text-white text-sm">{initials}</AvatarFallback>
</Avatar>
<ChevronDown className="h-4 w-4 text-white" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuItem onClick={() => router.push('/')} className="cursor-pointer">
<Home className="mr-2 h-4 w-4" />
Dashboard
<DropdownMenuContent align="end" sideOffset={8}>
<DropdownMenuItem onClick={() => handleNavigate('/')}>
<Home className="mr-3 h-4 w-4 text-white/70" />
<span>Dashboard</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => router.push('/track/nicotine')} className="cursor-pointer">
<Cigarette className="mr-2 h-4 w-4 text-red-500" />
Track Nicotine Usage
<DropdownMenuItem onClick={() => handleNavigate('/track/nicotine')}>
<Cigarette className="mr-3 h-4 w-4 text-red-400" />
<span>Track Nicotine Usage</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => router.push('/track/marijuana')} className="cursor-pointer">
<Leaf className="mr-2 h-4 w-4 text-green-500" />
Track Marijuana Usage
<DropdownMenuItem onClick={() => handleNavigate('/track/marijuana')}>
<Leaf className="mr-3 h-4 w-4 text-green-400" />
<span>Track Marijuana Usage</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout} className="cursor-pointer text-red-500">
<LogOut className="mr-2 h-4 w-4" />
Sign out
<DropdownMenuItem onClick={handleLogout} className="text-red-400 hover:text-red-300">
<LogOut className="mr-3 h-4 w-4" />
<span>Sign out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

6
src/components/ui/dropdown-menu.tsx
View File

@ -16,7 +16,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
"z-[100] min-w-[12rem] overflow-hidden rounded-lg border border-white/20 bg-zinc-900 p-2 text-white shadow-xl",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
@ -35,7 +35,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-pointer select-none items-center rounded-md px-3 py-2.5 text-sm outline-none transition-colors hover:bg-white/10 focus:bg-white/10 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
)}
@ -50,7 +50,7 @@ const DropdownMenuSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
className={cn("my-2 h-px bg-white/20", className)}
{...props}
/>
))