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

Compact MoodTracker layout - reduced blank space and refined sizing

Browse Source
This commit is contained in:
Avery Felts 2026-01-27 23:54:56 -07:00
parent 57bb0eb42a
commit e764fdabba
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/MoodTracker.tsx
View File

@ -198,9 +198,9 @@ export function MoodTracker() {
</div>
</CardHeader>
<CardContent className="pt-6 space-y-8">
<CardContent className="pt-2 space-y-4">
{/* Mood Selection */}
<div className="grid grid-cols-3 gap-3 sm:gap-6">
<div className="grid grid-cols-3 gap-3">
{[
{ id: 'good', icon: Smile, label: 'Good', color: 'emerald' },
{ id: 'neutral', icon: Meh, label: 'Okay', color: 'amber' },
@ -215,7 +215,7 @@ export function MoodTracker() {
onClick={() => handleMoodSelect(item.id as any)}
disabled={isSaving}
className={cn(
"group relative flex flex-col items-center justify-center gap-3 p-4 rounded-2xl transition-all duration-300",
"group relative flex flex-col items-center justify-center gap-2 p-3 rounded-2xl transition-all duration-300",
"border",
isSelected
? (theme === 'light'
@ -227,17 +227,17 @@ export function MoodTracker() {
)}
>
<div className={cn(
"p-3 rounded-xl transition-all duration-300",
"p-2 rounded-xl transition-all duration-300",
isSelected
? `bg-${item.color}-500 text-white shadow-lg scale-110`
: (theme === 'light'
? `bg-slate-100 text-slate-400 group-hover:text-${item.color}-500 group-hover:scale-110`
: `bg-white/5 text-white/60 group-hover:text-${item.color}-400 group-hover:scale-110`)
)}>
<Icon className={cn("w-6 h-6", isSelected && "animate-pulse-subtle")} />
<Icon className={cn("w-5 h-5", isSelected && "animate-pulse-subtle")} />
</div>
<span className={cn(
"text-xs font-semibold tracking-wide uppercase transition-colors",
"text-[10px] font-semibold tracking-wide uppercase transition-colors",
isSelected
? (theme === 'light' ? `text-${item.color}-700` : "text-white")
: (theme === 'light' ? "text-slate-400 group-hover:text-slate-600" : "text-white/40 group-hover:text-white/80")
@ -252,22 +252,22 @@ export function MoodTracker() {
{/* Dynamic Affirmation */}
<div className={cn(
"relative overflow-hidden transition-all duration-500 ease-out",
affirmation ? "opacity-100 max-h-32 translate-y-0" : "opacity-0 max-h-0 translate-y-4"
affirmation ? "opacity-100 max-h-24 translate-y-0" : "opacity-0 max-h-0 translate-y-4"
)}>
<div className={cn(
"rounded-xl p-4 flex gap-4 items-center border",
"rounded-xl p-3 flex gap-3 items-center border",
theme === 'light'
? "bg-indigo-50 border-indigo-100"
: "bg-gradient-to-r from-indigo-500/10 to-purple-500/10 border-indigo-500/20"
)}>
<div className={cn(
"p-2 rounded-full shrink-0",
"p-1.5 rounded-full shrink-0",
theme === 'light' ? "bg-indigo-100 text-indigo-500" : "bg-indigo-500/20"
)}>
<Quote className={cn("w-4 h-4", theme === 'light' ? "text-indigo-500" : "text-indigo-400")} />
<Quote className={cn("w-3.5 h-3.5", theme === 'light' ? "text-indigo-500" : "text-indigo-400")} />
</div>
<p className={cn(
"text-sm font-medium leading-relaxed",
"text-xs font-medium leading-relaxed",
theme === 'light' ? "text-indigo-900" : "text-indigo-100/90"
)}>
{affirmation}
@ -276,9 +276,9 @@ export function MoodTracker() {
</div>
{/* Mini Graph */}
<div className="space-y-4 pt-2">
<div className="space-y-3 pt-0">
<div className={cn(
"flex items-center gap-2 text-xs font-medium uppercase tracking-widest px-1",
"flex items-center gap-2 text-[10px] font-medium uppercase tracking-widest px-1",
theme === 'light' ? "text-slate-400" : "text-white/40"
)}>
<TrendingUp className="w-3 h-3" />
@ -286,7 +286,7 @@ export function MoodTracker() {
</div>
<div className={cn(
"h-32 w-full rounded-xl border p-4 relative group",
"h-28 w-full rounded-xl border p-2 relative group",
theme === 'light'
? "bg-white/50 border-slate-200"
: "bg-white/5 border-white/5"