From 3f34c7951f63dcd79e68eef7c1fbb06a47a9381c Mon Sep 17 00:00:00 2001
From: Nikolay Tatarinov <me@arnike.ru>
Date: Sat, 7 Mar 2026 00:35:26 +0300
Subject: [PATCH] feat: enhance CalendarDay component with holiday outline
 styling

- Added a new CSS variable for today's holiday outline to improve visual distinction on the calendar.
- Updated the CalendarDay component to apply the holiday outline styling when the day is marked as today and has associated event summaries.
- Enhanced unit tests to verify the correct application of styles for today and holiday events, ensuring proper rendering and user experience.
---
 webapp-next/src/app/globals.css                  |  1 +
 .../src/components/calendar/CalendarDay.test.tsx | 16 ++++++++++++++++
 .../src/components/calendar/CalendarDay.tsx      |  6 +++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/webapp-next/src/app/globals.css b/webapp-next/src/app/globals.css
index 3f73b74..083913c 100644
--- a/webapp-next/src/app/globals.css
+++ b/webapp-next/src/app/globals.css
@@ -76,6 +76,7 @@
   --today-hover: color-mix(in srgb, var(--bg) 15%, var(--today));
   --today-border: color-mix(in srgb, var(--today) 35%, transparent);
   --today-border-selected: color-mix(in srgb, var(--bg) 50%, transparent);
+  --today-holiday-outline: color-mix(in srgb, var(--bg) 28%, var(--today));
   --today-gradient-end: color-mix(in srgb, var(--today) 15%, transparent);
   --muted-fade: color-mix(in srgb, var(--muted) 40%, transparent);
   --handle-bg: color-mix(in srgb, var(--muted) 80%, var(--text));
diff --git a/webapp-next/src/components/calendar/CalendarDay.test.tsx b/webapp-next/src/components/calendar/CalendarDay.test.tsx
index 20d4f14..5102ca4 100644
--- a/webapp-next/src/components/calendar/CalendarDay.test.tsx
+++ b/webapp-next/src/components/calendar/CalendarDay.test.tsx
@@ -76,4 +76,20 @@ describe("CalendarDay", () => {
     const button = screen.getByRole("button", { name: /15/ });
     expect(button.getAttribute("aria-disabled")).not.toBe("true");
   });
+
+  it("applies today base and holiday outline when isToday and eventSummaries are set", () => {
+    render(
+      <CalendarDay
+        {...defaultProps}
+        isOtherMonth={false}
+        isToday={true}
+        eventSummaries={["Holiday"]}
+        onDayClick={() => {}}
+      />
+    );
+    const button = screen.getByRole("button", { name: /15/ });
+    expect(button.className).toMatch(/bg-today|today/);
+    expect(button.className).toMatch(/ring-2|today-holiday-outline/);
+    expect(button.getAttribute("aria-disabled")).not.toBe("true");
+  });
 });
diff --git a/webapp-next/src/components/calendar/CalendarDay.tsx b/webapp-next/src/components/calendar/CalendarDay.tsx
index 877d794..9f714c1 100644
--- a/webapp-next/src/components/calendar/CalendarDay.tsx
+++ b/webapp-next/src/components/calendar/CalendarDay.tsx
@@ -45,6 +45,7 @@ function CalendarDayInner({
     [duties]
   );
   const hasEvent = eventSummaries.length > 0;
+  const isTodayHoliday = isToday && hasEvent;
   const showIndicator = !isOtherMonth;
   const hasAny = duties.length > 0 || hasEvent;
 
@@ -82,10 +83,9 @@ function CalendarDayInner({
         showIndicator && hasAny && "font-bold",
         showIndicator &&
           hasEvent &&
+          !isToday &&
           "bg-[linear-gradient(135deg,var(--surface)_0%,var(--today-gradient-end)_100%)] border border-[var(--today-border)]",
-        isToday &&
-          hasEvent &&
-          "bg-today text-[var(--bg)] border border-[var(--today-border-selected)]"
+        isTodayHoliday && "ring-1 ring-inset ring-[var(--today-holiday-outline)]"
       )}
       onClick={(e) => {
         if (isOtherMonth) return;