fix(calendar): completed events always use white text#997
Merged
Conversation
…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>
There was a problem hiding this comment.
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
nullfor[style.color]whentask.completed, removing the inline color so.task-block { color: white }wins. - All-day chips now emit
nullfor[style.color]whentask.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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Completed calendar events get a green (
#5c7829) background (.completedclass), but their text colour still followed the board-colour contrast ruleboardTextColor(task.color). That rule returns dark#1a1a1afor 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 emitsnullwhentask.completed(in addition to the existing inactive guard), so the base.task-block { color: white }(which.task-timeinherits) applies.calendar-week-grid.component.html— all-day chips: sametask.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.completedwhich 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 computesrgb(255,255,255)white on the green background; simulating the old path (#1a1a1ainline) 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