From 5af54de44b78b69ef46a572733a51b159213063e Mon Sep 17 00:00:00 2001 From: Kyle Pope Date: Wed, 11 Mar 2026 21:24:08 +0800 Subject: [PATCH] Replace left border indicators with subtle type-colored hover glow Removes the always-visible 2px colored left border from each row. On hover, the row background now glows with the type color at 8% opacity (blue for todos, purple for events, orange for reminders). Cleaner at rest, still provides type recognition on interaction. Co-Authored-By: Claude Opus 4.6 --- frontend/src/components/dashboard/UpcomingWidget.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/dashboard/UpcomingWidget.tsx b/frontend/src/components/dashboard/UpcomingWidget.tsx index fd18d93..c569b7d 100644 --- a/frontend/src/components/dashboard/UpcomingWidget.tsx +++ b/frontend/src/components/dashboard/UpcomingWidget.tsx @@ -26,10 +26,10 @@ interface UpcomingWidgetProps { days?: number; } -const typeConfig: Record = { - todo: { borderColor: 'border-l-blue-400', pillBg: 'bg-blue-500/15', pillText: 'text-blue-400', label: 'TODO' }, - event: { borderColor: 'border-l-purple-400', pillBg: 'bg-purple-500/15', pillText: 'text-purple-400', label: 'EVENT' }, - reminder: { borderColor: 'border-l-orange-400', pillBg: 'bg-orange-500/15', pillText: 'text-orange-400', label: 'REMINDER' }, +const typeConfig: Record = { + todo: { hoverGlow: 'hover:bg-blue-500/8', pillBg: 'bg-blue-500/15', pillText: 'text-blue-400', label: 'TODO' }, + event: { hoverGlow: 'hover:bg-purple-500/8', pillBg: 'bg-purple-500/15', pillText: 'text-purple-400', label: 'EVENT' }, + reminder: { hoverGlow: 'hover:bg-orange-500/8', pillBg: 'bg-orange-500/15', pillText: 'text-orange-400', label: 'REMINDER' }, }; function getMinutesUntilTomorrowMorning(): number { @@ -270,8 +270,8 @@ export default function UpcomingWidget({ items }: UpcomingWidgetProps) { onMouseEnter={() => setHoveredItem(itemKey)} onMouseLeave={() => { setHoveredItem(null); setSnoozeOpen(null); }} className={cn( - 'flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-white/5 transition-colors duration-150 cursor-pointer border-l-2', - config.borderColor, + 'flex items-center gap-2 py-1.5 px-2 rounded-md transition-colors duration-150 cursor-pointer', + config.hoverGlow, isPast && 'opacity-50' )} >