diff --git a/client/src/App/App.styles.scss b/client/src/App/App.styles.scss index a74f9aa7e..11012d468 100644 --- a/client/src/App/App.styles.scss +++ b/client/src/App/App.styles.scss @@ -53,7 +53,7 @@ --tech-icon-color: orangered; /* Light mode tech icon color */ --clone-border-color: #1890ff; /* Light mode clone border color */ --event-arrived-bg: rgba(4, 141, 4, 0.4); /* Light mode arrived event background */ - --event-block-bg: rgba(212, 2, 2, 0.6); /* Light mode block event background */ + --event-block-bg: tomato; /* Light mode block event background */ --event-selected-bg: slategrey; /* Light mode selected event background */ --task-bg: #fff; /* Light mode task center background */ --task-text: rgba(0, 0, 0, 0.85); /* Light mode task text */ @@ -83,7 +83,7 @@ --tag-wrapper-text: #000; /* Light mode tag wrapper text */ --preview-bg: lightgray; /* Light mode preview background */ --preview-border-color: #2196F3; /* Light mode preview border color */ - --event-bg-fallback: #ffffff; /* Light mode event background fallback */ + --event-bg-fallback: #c4c4c4; /* Light mode event background fallback */ --card-bg-fallback: #ffffff; /* Light mode card background fallback */ --card-text-fallback: black; /* Light mode card text fallback */ --table-row-even-bg: rgb(236, 236, 236); /* Light mode table row even background */ @@ -159,7 +159,7 @@ --tech-icon-color: #ff4500; /* Dark mode tech icon color */ --clone-border-color: #4da8ff; /* Dark mode clone border color */ --event-arrived-bg: rgba(4, 141, 4, 0.6); /* Dark mode arrived event background */ - --event-block-bg: rgba(212, 2, 2, 0.8); /* Dark mode block event background */ + --event-block-bg: tomato; /* Dark mode block event background */ --event-selected-bg: #4a5e6e; /* Dark mode selected event background */ --task-bg: #2a2a2a; /* Dark mode task center background */ --task-text: rgba(255, 255, 255, 0.85); /* Dark mode task text */ @@ -189,7 +189,7 @@ --tag-wrapper-text: #cccccc; /* Dark mode tag wrapper text */ --preview-bg: #2a2a2a; /* Dark mode preview background */ --preview-border-color: #4da8ff; /* Dark mode preview border color */ - --event-bg-fallback: #2a2a2a; /* Dark mode event background fallback */ + --event-bg-fallback: #262626; /* Dark mode event background fallback */ --card-bg-fallback: #2a2a2a; /* Dark mode card background fallback */ --card-text-fallback: #cccccc; /* Dark mode card text fallback */ --table-row-even-bg: #2a2a2a; /* Dark mode table row even background */ diff --git a/client/src/components/job-at-change/schedule-event.component.jsx b/client/src/components/job-at-change/schedule-event.component.jsx index b9987b48e..acaf839db 100644 --- a/client/src/components/job-at-change/schedule-event.component.jsx +++ b/client/src/components/job-at-change/schedule-event.component.jsx @@ -424,6 +424,9 @@ export function ScheduleEventComponent({ // Adjust event color for dark mode if needed const getEventBackground = () => { + if (event?.block) { + return "var(--event-block-bg)"; // Use a specific color for dark mode + } const baseColor = event.color && event.color.hex ? event.color.hex : event.color || "var(--event-bg-fallback)"; // Optionally adjust color for dark mode (e.g., lighten if too dark) return baseColor; diff --git a/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx b/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx index faea7a23d..bee287332 100644 --- a/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx +++ b/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx @@ -212,6 +212,10 @@ export function ScheduleCalendarHeaderComponent({ bodyshop, label, refetch, date return bodyshop.workingdays[day]; }; + const blocked = isDayBlocked.length > 0; + const headerStyle = blocked ? { color: "#fff" } : { color: isShopOpen(date) ? "" : "tomato" }; + const headerClass = `imex-calendar-header-card ${blocked ? "imex-calendar-header-card--blocked" : ""}`.trim(); + return (
0} date={date} refetch={refetch}> diff --git a/client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss b/client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss index f7eb1cf46..03bb447dc 100644 --- a/client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss +++ b/client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss @@ -26,6 +26,37 @@ background-color: var(--event-block-bg); } +/* Ensure readable text when fallback background is used */ +.imex-event-fallback, +.imex-event-fallback .rbc-event-content, +.imex-event-fallback .rbc-event-label, +.imex-event-fallback a { + color: var(--card-text-fallback) !important; +} + +/* Optional subtle border to distinguish on white backgrounds */ +.imex-event-fallback { + border: 1px solid var(--bar-border-color); +} + +/* Header day card styling */ +.imex-calendar-header-card { + display: inline-block; + padding: 0.15rem 0.35rem; + border-radius: 0.25rem; +} + +.imex-calendar-header-card--blocked { + background-color: var(--event-block-bg); + color: #ffffff; +} + +.imex-calendar-header-card--blocked a, +.imex-calendar-header-card--blocked span, +.imex-calendar-header-card--blocked .ant-typography { + color: #ffffff; +} + .rbc-month-view { // height: 125rem; } diff --git a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx index 3ff26a624..8bedaa41a 100644 --- a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx +++ b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx @@ -37,17 +37,39 @@ export function ScheduleCalendarWrapperComponent({ const history = useNavigate(); const { t } = useTranslation(); + // Determine current view to compute styles consistently + const currentView = search.view || defaultView || "week"; + const handleEventPropStyles = (event, start, end, isSelected) => { + const hasColor = Boolean(event?.color?.hex || event?.color); + const useBg = currentView !== "agenda"; + + // Prioritize explicit blocked-day background to ensure red in all themes + let bg; + if (useBg) { + if (event?.block) { + bg = "var(--event-block-bg)"; + } else if (hasColor) { + bg = event?.color?.hex ?? event?.color; + } else { + bg = "var(--event-bg-fallback)"; + } + } + + const usedFallback = !hasColor && !event?.block; // only mark as fallback when not blocked + + const classes = [ + "imex-event", + event.arrived && "imex-event-arrived", + event.block && "imex-event-block", + usedFallback && "imex-event-fallback" + ] + .filter(Boolean) + .join(" "); + return { - ...(event.color && !((search.view || defaultView) === "agenda") - ? { - style: { - backgroundColor: - event.color && event.color.hex ? event.color.hex : event.color || "var(--event-bg-fallback)" - } - } - : {}), - className: `${event.arrived ? "imex-event-arrived" : ""} ${event.block ? "imex-event-block" : ""}` + ...(bg ? { style: { backgroundColor: bg } } : {}), + className: classes }; };