fix: restrict today highlight to date header only
Remove today background/border from data row cells so the yellow highlight only appears on the day label, not the entire column. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -30,11 +30,9 @@ function parseDate(iso: string) {
|
|||||||
|
|
||||||
function DayCell({
|
function DayCell({
|
||||||
dayData,
|
dayData,
|
||||||
isToday,
|
|
||||||
isWeekend,
|
isWeekend,
|
||||||
}: {
|
}: {
|
||||||
dayData: DayData | undefined;
|
dayData: DayData | undefined;
|
||||||
isToday: boolean;
|
|
||||||
isWeekend: boolean;
|
isWeekend: boolean;
|
||||||
}) {
|
}) {
|
||||||
const base: React.CSSProperties = {
|
const base: React.CSSProperties = {
|
||||||
@@ -44,14 +42,7 @@ function DayCell({
|
|||||||
borderBottom: "1px solid var(--color-border)",
|
borderBottom: "1px solid var(--color-border)",
|
||||||
borderLeft: "1px solid var(--color-border)",
|
borderLeft: "1px solid var(--color-border)",
|
||||||
height: 56,
|
height: 56,
|
||||||
background: isToday
|
background: isWeekend ? "var(--color-weekend-header)" : "transparent",
|
||||||
? "var(--color-today-bg)"
|
|
||||||
: isWeekend
|
|
||||||
? "var(--color-weekend-header)"
|
|
||||||
: "transparent",
|
|
||||||
borderLeftColor: isToday ? "var(--color-today-border)" : undefined,
|
|
||||||
borderRightColor: isToday ? "var(--color-today-border)" : undefined,
|
|
||||||
borderRight: isToday ? "1px solid var(--color-today-border)" : undefined,
|
|
||||||
transition: "background 120ms ease",
|
transition: "background 120ms ease",
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -172,14 +163,12 @@ function ParkRow({
|
|||||||
weekDates,
|
weekDates,
|
||||||
parsedDates,
|
parsedDates,
|
||||||
parkData,
|
parkData,
|
||||||
today,
|
|
||||||
}: {
|
}: {
|
||||||
park: Park;
|
park: Park;
|
||||||
parkIdx: number;
|
parkIdx: number;
|
||||||
weekDates: string[];
|
weekDates: string[];
|
||||||
parsedDates: ReturnType<typeof parseDate>[];
|
parsedDates: ReturnType<typeof parseDate>[];
|
||||||
parkData: Record<string, DayData>;
|
parkData: Record<string, DayData>;
|
||||||
today: string;
|
|
||||||
}) {
|
}) {
|
||||||
const rowBg = parkIdx % 2 === 0 ? "var(--color-bg)" : "var(--color-surface)";
|
const rowBg = parkIdx % 2 === 0 ? "var(--color-bg)" : "var(--color-surface)";
|
||||||
return (
|
return (
|
||||||
@@ -214,7 +203,6 @@ function ParkRow({
|
|||||||
<DayCell
|
<DayCell
|
||||||
key={date}
|
key={date}
|
||||||
dayData={parkData[date]}
|
dayData={parkData[date]}
|
||||||
isToday={date === today}
|
|
||||||
isWeekend={parsedDates[i].isWeekend}
|
isWeekend={parsedDates[i].isWeekend}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
@@ -336,7 +324,6 @@ export function WeekCalendar({ parks, weekDates, data, grouped }: WeekCalendarPr
|
|||||||
weekDates={weekDates}
|
weekDates={weekDates}
|
||||||
parsedDates={parsedDates}
|
parsedDates={parsedDates}
|
||||||
parkData={data[park.id] ?? {}}
|
parkData={data[park.id] ?? {}}
|
||||||
today={today}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
|||||||
Reference in New Issue
Block a user