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>
)}
</>