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

46
src/components/UserHeader.tsx
View File

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

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

@ -16,7 +16,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref} ref={ref}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( 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", "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 className
)} )}
@ -35,7 +35,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item <DropdownMenuPrimitive.Item
ref={ref} ref={ref}
className={cn( 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", inset && "pl-8",
className className
)} )}
@ -50,7 +50,7 @@ const DropdownMenuSeparator = React.forwardRef<
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator <DropdownMenuPrimitive.Separator
ref={ref} ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)} className={cn("my-2 h-px bg-white/20", className)}
{...props} {...props}
/> />
)) ))