From b2e68d31008f41c6daca6adb56b77c2eb9c66b33 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Thu, 12 Mar 2026 17:56:23 +0800
Subject: [PATCH] Refine Upcoming day headers: thinner, subtler, aligned

- 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>
---
 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 069031d..ce68fd1 100644
--- a/frontend/src/components/dashboard/UpcomingWidget.tsx
+++ b/frontend/src/components/dashboard/UpcomingWidget.tsx
@@ -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>
                       )}