From e18c94cd83c66357087ad602190d2de2aa846afd Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Fri, 13 Mar 2026 02:43:33 +0800
Subject: [PATCH] Fix weekend tint visibility, dot spacing, and event FOUC

Weekend tint: hsl(0 0% 6%) was lighter than page bg #0a0a0a (imperceptible).
Changed to hsl(0 0% 2%) = #050505 for visible darkening. Added rule for
fc-daygrid-day-frame to paint above FC6 internal layers.

Dot spacing: Reduced padding from 1px 4px to 1px 2px for tighter edge gap.

FOUC fix: Moved umbra-event class from eventDidMount (post-paint) to
eventClassNames (synchronous pre-mount). eventDidMount now only sets
the --event-color CSS custom property.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/calendar/CalendarPage.tsx |  4 ++--
 frontend/src/index.css                            | 14 ++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/calendar/CalendarPage.tsx b/frontend/src/components/calendar/CalendarPage.tsx
index cbeb908..6baa0e1 100644
--- a/frontend/src/components/calendar/CalendarPage.tsx
+++ b/frontend/src/components/calendar/CalendarPage.tsx
@@ -507,8 +507,7 @@ export default function CalendarPage() {
     if (color) {
       info.el.style.setProperty('--event-color', color);
     }
-    info.el.classList.add('umbra-event');
-  }, []);
+      }, []);
 
   const renderEventContent = useCallback((arg: EventContentArg) => {
     const isMonth = arg.view.type === 'dayGridMonth';
@@ -705,6 +704,7 @@ export default function CalendarPage() {
                 dayHeaderFormat={{ weekday: 'short', day: 'numeric', month: 'numeric' }}
                 slotEventOverlap={false}
                 eventDidMount={handleEventDidMount}
+                eventClassNames={() => ['umbra-event']}
                 eventContent={renderEventContent}
               />
             </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index d735332..83eb86e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -167,19 +167,25 @@
 /* Weekend column tint */
 .fc .fc-day-sat,
 .fc .fc-day-sun {
-  background-color: hsl(0 0% 6%);
+  background-color: hsl(0 0% 2%);
 }
 
 /* Weekend tint: header cells (higher specificity to override .fc-col-header-cell) */
 .fc .fc-col-header-cell.fc-day-sat,
 .fc .fc-col-header-cell.fc-day-sun {
-  background-color: hsl(0 0% 6%) !important;
+  background-color: hsl(0 0% 2%) !important;
 }
 
 /* Weekend tint: timegrid column cells */
 .fc .fc-timegrid-col.fc-day-sat,
 .fc .fc-timegrid-col.fc-day-sun {
-  background-color: hsl(0 0% 6%);
+  background-color: hsl(0 0% 2%);
+}
+
+/* Weekend tint: daygrid frame layer (paints above td background in FC6) */
+.fc .fc-day-sat .fc-daygrid-day-frame,
+.fc .fc-day-sun .fc-daygrid-day-frame {
+  background-color: hsl(0 0% 2%);
 }
 
 .fc .fc-col-header-cell {
@@ -246,7 +252,7 @@
 
 .fc .fc-daygrid-event.umbra-event {
   font-size: 0.75rem;
-  padding: 1px 4px;
+  padding: 1px 2px;
   line-height: 1.4;
 }