Skip to content

fix(calendar): completed events always use white text#997

Merged
renemadsen merged 1 commit into
stablefrom
fix/calendar-completed-white-text
Jun 10, 2026
Merged

fix(calendar): completed events always use white text#997
renemadsen merged 1 commit into
stablefrom
fix/calendar-completed-white-text

Conversation

@renemadsen

Copy link
Copy Markdown
Member

Summary

Completed calendar events get a green (#5c7829) background (.completed class), but their text colour still followed the board-colour contrast rule boardTextColor(task.color). That rule returns dark #1a1a1a for the four "light" boards (#fff286 / #e6cfff / #ff88cf / #bfd8ff), producing unreadable dark text on the green tile. Completed events should always be white.

Fix (Option B — emit null inline colour, let base CSS win)

  • calendar-task-block.component.html — timed tiles: [style.color] now emits null when task.completed (in addition to the existing inactive guard), so the base .task-block { color: white } (which .task-time inherits) applies.
  • calendar-week-grid.component.html — all-day chips: same task.completed ? null : … guard; base .all-day-chip { color: #fff } applies.
  • calendar-task-block.component.scss — comment only (no rule change): documents why no explicit colour is needed on .completed (base is already white), unlike .gcal-task--inactive.completed which must re-assert white over the inactive grey.

The text colour is now board-colour-independent for completed events; non-completed events keep the contrast rule unchanged. Mirrors the existing inactive-tile null-emit mechanism.

Verification

Live on /plugins/backend-configuration-pn/calendar: a completed tile has the inline colour removed and computes rgb(255,255,255) white on the green background; simulating the old path (#1a1a1a inline) reproduced the dark-on-green bug. Reviewed by code-reviewer + code-simplifier (no issues; confirmed no regression for the inactive+completed combination, drag-ghost, or schedule view).

🤖 Generated with Claude Code

…colour rule

Completed events get a green (#5c7829) background via the .completed class, but
their text colour still followed boardTextColor(task.color), which returns dark
(#1a1a1a) for the four light boards (#fff286/#e6cfff/#ff88cf/#bfd8ff) — giving
unreadable dark text on the green tile.

Emit a null inline [style.color] when task.completed (timed tiles + all-day
chips) so the base `.task-block { color: white }` / `.all-day-chip { color:#fff }`
applies — white regardless of board colour. Mirrors the existing inactive-tile
mechanism. No SCSS rule change needed (base colour already white); added a
clarifying comment. Verified live: completed tile computes rgb(255,255,255) on
green; simulating the old path reproduced the dark-on-green bug.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 10, 2026 17:13

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes unreadable text on completed calendar events by ensuring completed tiles/chips no longer use the board-dependent contrast color (boardTextColor(...)), allowing the base CSS white text to apply consistently on the green completed background.

Changes:

  • Timed event tiles now emit null for [style.color] when task.completed, removing the inline color so .task-block { color: white } wins.
  • All-day chips now emit null for [style.color] when task.completed, removing the inline color so .all-day-chip { color: #fff } wins.
  • Added an explanatory comment in the timed tile SCSS clarifying why no explicit completed text color rule is required.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
eform-client/src/app/plugins/modules/backend-configuration-pn/modules/calendar/components/calendar-week-grid/calendar-week-grid.component.html Prevents completed all-day chips from applying board-based inline text color so base white text applies.
eform-client/src/app/plugins/modules/backend-configuration-pn/modules/calendar/components/calendar-task-block/calendar-task-block.component.scss Documents the completed-text-color rationale and relationship to template inline-style removal.
eform-client/src/app/plugins/modules/backend-configuration-pn/modules/calendar/components/calendar-task-block/calendar-task-block.component.html Prevents completed timed tiles from applying board-based inline text color so base white text applies.

@renemadsen renemadsen merged commit bf821b9 into stable Jun 10, 2026
51 of 52 checks passed
@renemadsen renemadsen deleted the fix/calendar-completed-white-text branch June 10, 2026 17:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants