Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(ui): weekend/vacation/checkbox colors follow accent theme

Browse Source 
- Unify Saturday+Sunday into single isWeekend flag (header + grid lines)
- Replace hardcoded amber vacation bar/tooltip colors with brand-* classes
- Add global accent-color for checkboxes and radio buttons via CSS variable
- Update VACATION_TIMELINE_COLORS/BORDER to use brand palette (SICK stays red)
- Vacation-only tooltip uses neutral dark surface with brand accent border

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-04-10 14:06:44 +02:00
parent 0339b11038
commit e4bf121b33
6 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/timeline/TimelineHeader.tsx
+7 -8
View File
@@ -62,9 +62,9 @@ export function TimelineHeader({
<div className="flex">
{dates.map((date, i) => {
const isToday = date.toDateString() === today.toDateString();
const isMonday = date.getDay() === 1;
const isSaturday = date.getDay() === 6;
const isSunday = date.getDay() === 0;
const dow = date.getDay();
const isMonday = dow === 1;
const isWeekend = dow === 0 || dow === 6;
// Week zoom: show label only on Mondays to avoid overcrowding
const showLabel = zoom === "day" || isMonday;
return (
@@ -73,8 +73,7 @@ export function TimelineHeader({
className={clsx(
"flex-shrink-0 border-r flex flex-col items-center justify-center text-xs overflow-hidden",
isToday ? "bg-brand-50 dark:bg-brand-950/40 border-brand-200 dark:border-brand-800" :
isSaturday ? "bg-amber-50/60 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800" :
isSunday ? "bg-gray-100/80 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700" :
isWeekend ? "bg-brand-50/60 dark:bg-brand-950/30 border-brand-200 dark:border-brand-800" :
isMonday ? "border-gray-200 dark:border-gray-700" : "border-gray-100 dark:border-gray-800",
)}
style={{ width: CELL_WIDTH, height: HEADER_DAY_HEIGHT }}
@@ -83,7 +82,7 @@ export function TimelineHeader({
<>
<span className={clsx(
"font-medium leading-none",
isToday ? "text-brand-600" : isSaturday ? "text-amber-600 dark:text-amber-400" : "text-gray-600 dark:text-gray-300",
isToday ? "text-brand-600" : isWeekend ? "text-brand-600 dark:text-brand-400" : "text-gray-600 dark:text-gray-300",
)}>
{zoom === "week"
? `${date.getDate()} ${MONTHS_SHORT[date.getMonth()]}`
@@ -92,9 +91,9 @@ export function TimelineHeader({
{zoom === "day" && (
<span className={clsx(
"text-[9px] leading-none mt-0.5",
isSaturday ? "text-amber-400 dark:text-amber-500" : "text-gray-300 dark:text-gray-600",
isWeekend ? "text-brand-400 dark:text-brand-500" : "text-gray-300 dark:text-gray-600",
)}>
{["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][date.getDay()]}
{["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"][dow]}
</span>
)}
</>
apps/web/src/components/timeline/TimelineTooltip.tsx
+10 -10
View File
@@ -242,25 +242,25 @@ function VacationSummary({
return (
<div className={className}>
<div className="flex items-center gap-1.5">
<span className="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-amber-500" />
<span className="font-semibold text-amber-300">{title}</span>
<span className="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-brand-500" />
<span className="font-semibold text-brand-300">{title}</span>
</div>
<div className="mt-0.5 text-[11px] text-amber-200/80">
<div className="mt-0.5 text-[11px] text-brand-200/80">
{formatDateLong(vacation.startDate)} to {formatDateLong(vacation.endDate)}
</div>
{holidayMeta ? (
<div className="mt-1 text-[11px] text-amber-100/75">{holidayMeta}</div>
<div className="mt-1 text-[11px] text-brand-100/75">{holidayMeta}</div>
) : null}
{holidayLocationBasis ? (
<div className="mt-1 text-[11px] text-amber-100/85">{holidayLocationBasis}</div>
<div className="mt-1 text-[11px] text-brand-100/85">{holidayLocationBasis}</div>
) : null}
{isPublicHoliday && vacation.calendarName ? (
<div className="mt-1 text-[11px] text-amber-200/60">
<div className="mt-1 text-[11px] text-brand-200/60">
Calendar: {vacation.calendarName}
</div>
) : null}
{vacation.note && !isPublicHoliday ? (
<div className="mt-1 text-[11px] text-amber-200/60">{vacation.note}</div>
<div className="mt-1 text-[11px] text-brand-200/60">{vacation.note}</div>
) : null}
</div>
);
@@ -376,7 +376,7 @@ export function TimelineTooltip({
<VacationSummary
vacation={vacationHover}
title={vacationTitle ?? "Vacation"}
className="mt-2 border-t border-amber-700/40 pt-2"
className="mt-2 border-t border-brand-700/40 pt-2"
/>
</TooltipSurface>,
);
@@ -410,8 +410,8 @@ export function TimelineTooltip({
<TooltipSurface
tooltipRef={vacationTooltipRef}
position={vacationTooltipPos}
backgroundColor="rgba(120, 53, 15, 0.95)"
className="fixed z-40 max-w-xs pointer-events-none rounded-xl border border-amber-700/50 bg-amber-950/95 px-3 py-2 text-xs text-amber-50 shadow-2xl"
backgroundColor="rgba(10, 10, 10, 0.96)"
className="fixed z-40 max-w-xs pointer-events-none rounded-xl border border-brand-700/50 bg-gray-950/96 px-3 py-2 text-xs text-gray-50 shadow-2xl"
>
<VacationSummary vacation={vacationHover} title={vacationTitle ?? "Vacation"} />
</TooltipSurface>,
apps/web/src/components/timeline/renderHelpers.tsx
+2 -2
View File
@@ -64,8 +64,8 @@ export function renderVacationBlocks(blocks: VacationBlockInfo[], rowHeight: num
if (blocks.length === 0) return null;
return blocks.map(({ vacation: v, left, width }) => {
const colorClass = VACATION_TIMELINE_COLORS[v.type] ?? "bg-orange-400/40";
const borderClass = VACATION_TIMELINE_BORDER[v.type] ?? "border-orange-500";
const colorClass = VACATION_TIMELINE_COLORS[v.type] ?? "bg-brand-400/40";
const borderClass = VACATION_TIMELINE_BORDER[v.type] ?? "border-brand-500";
const label = VACATION_TYPE_LABELS_SHORT[v.type] ?? v.type;
const isPending = v.status === "PENDING";