From 12acbc5b1cbb0c6a10f800b2e89924177f305d0a Mon Sep 17 00:00:00 2001 From: Esdras Renan Date: Thu, 13 Nov 2025 18:43:41 -0300 Subject: [PATCH] Improve today highlighting in calendar --- src/components/ui/calendar.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx index 91604aa..8e2642f 100644 --- a/src/components/ui/calendar.tsx +++ b/src/components/ui/calendar.tsx @@ -20,6 +20,14 @@ type OptionElement = React.ReactElement<{ type CalendarDropdownProps = DropdownProps & { children?: React.ReactNode } +const TODAY_HIGHLIGHT_CLASS = [ + // Subtle cyan background + ring when today isn't selected + "[&_button]:ring-1 [&_button]:ring-[#00d6eb] [&_button]:ring-offset-1 [&_button]:ring-offset-white", + "[&_button:not([aria-selected='true'])]:bg-[#00e8ff]/20 [&_button:not([aria-selected='true'])]:text-neutral-900", + // Preserve selection colors but keep a cyan outline when today is part of the range + "[&_button[aria-selected='true']]:ring-[#00f5ff] [&_button[aria-selected='true']]:ring-offset-neutral-900 [&_button[aria-selected='true']]:shadow-[0_0_0_1.5px_rgba(0,214,235,0.45)]", +].join(" ") + const buildOptions = (options?: DropdownProps["options"], children?: React.ReactNode) => { if (options && options.length > 0) { return options.map((option) => ({ @@ -169,8 +177,7 @@ export function Calendar({ range_middle: "bg-transparent text-neutral-900 [&_button]:rounded-full [&_button]:bg-neutral-900/10 [&_button]:text-neutral-900", range_start: "bg-transparent [&_button]:rounded-full [&_button]:bg-neutral-900 [&_button]:text-neutral-50 [&_button]:focus-visible:ring-0", range_end: "bg-transparent [&_button]:rounded-full [&_button]:bg-neutral-900 [&_button]:text-neutral-50 [&_button]:focus-visible:ring-0", - today: - "[&_button]:bg-[#00e8ff]/20 [&_button]:text-neutral-900 [&_button]:ring-1 [&_button]:ring-[#00d6eb] [&_button]:ring-offset-1 [&_button]:ring-offset-white", + today: TODAY_HIGHLIGHT_CLASS, ...modifiersClassNames, }} // Setas ao lado do caption