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

Refine Upcoming day headers: thinner, subtler, aligned

Browse Source 
- Removed bg-card from sticky headers (was creating opaque bars against
  glassmorphic card background)
- Reduced padding from pb-1.5 to py-0.5 for slimmer profile
- Added leading-none for proper vertical centering of chevron + text
- Softened border opacity to 30%, text to 70%, chevron to 60%
- Shrunk text from text-xs to text-[10px], chevron from h-3 to h-2.5

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-12 17:56:23 +08:00
parent 39a42d08ec
commit b2e68d3100
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

@ -251,26 +251,26 @@ export default function UpcomingWidget({ items }: UpcomingWidgetProps) {
<button
onClick={() => toggleDay(dateKey)}
className={cn(
'sticky top-0 bg-card z-10 w-full flex items-center gap-1.5 pb-1.5 border-b border-border cursor-pointer select-none',
groupIdx === 0 ? 'pt-0' : 'pt-3'
'sticky top-0 z-10 w-full flex items-center gap-1.5 py-0.5 border-b border-border/30 cursor-pointer select-none leading-none',
groupIdx === 0 ? 'pt-0' : 'mt-2'
)}
>
<ChevronRight
className={cn(
'h-3 w-3 text-muted-foreground transition-transform duration-150',
'h-2.5 w-2.5 text-muted-foreground/60 transition-transform duration-150 shrink-0',
!isCollapsed && 'rotate-90'
)}
/>
<span
className={cn(
'text-xs font-semibold uppercase tracking-wider',
isTodayGroup ? 'text-accent' : 'text-muted-foreground'
'text-[10px] font-semibold uppercase tracking-wider leading-none',
isTodayGroup ? 'text-accent' : 'text-muted-foreground/70'
)}
>
{label}
</span>
{isCollapsed && (
<span className="text-[10px] text-muted-foreground font-normal ml-auto mr-1">
<span className="text-[9px] text-muted-foreground/50 font-normal ml-auto mr-1 leading-none">
{dayItems.length} {dayItems.length === 1 ? 'item' : 'items'}
</span>
)}