rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Replace left border indicators with subtle type-colored hover glow

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-11 21:24:08 +08:00
parent 9635401fe8
commit 5af54de44b
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/dashboard/UpcomingWidget.tsx
View File

@ -26,10 +26,10 @@ interface UpcomingWidgetProps {
days?: number; days?: number;
} }
const typeConfig: Record<string, { borderColor: string; pillBg: string; pillText: string; label: string }> = { const typeConfig: Record<string, { hoverGlow: string; pillBg: string; pillText: string; label: string }> = {
todo: { borderColor: 'border-l-blue-400', pillBg: 'bg-blue-500/15', pillText: 'text-blue-400', label: 'TODO' }, todo: { hoverGlow: 'hover:bg-blue-500/8', 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' }, event: { hoverGlow: 'hover:bg-purple-500/8', 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' }, reminder: { hoverGlow: 'hover:bg-orange-500/8', pillBg: 'bg-orange-500/15', pillText: 'text-orange-400', label: 'REMINDER' },
}; };
function getMinutesUntilTomorrowMorning(): number { function getMinutesUntilTomorrowMorning(): number {
@ -270,8 +270,8 @@ export default function UpcomingWidget({ items }: UpcomingWidgetProps) {
onMouseEnter={() => setHoveredItem(itemKey)} onMouseEnter={() => setHoveredItem(itemKey)}
onMouseLeave={() => { setHoveredItem(null); setSnoozeOpen(null); }} onMouseLeave={() => { setHoveredItem(null); setSnoozeOpen(null); }}
className={cn( 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', 'flex items-center gap-2 py-1.5 px-2 rounded-md transition-colors duration-150 cursor-pointer',
config.borderColor, config.hoverGlow,
isPast && 'opacity-50' isPast && 'opacity-50'
)} )}
> >