From bab5d8708b1267097cfa42ea3ddbc53da5342b0b Mon Sep 17 00:00:00 2001 From: maebeale Date: Mon, 22 Jun 2026 08:23:58 -0400 Subject: [PATCH] Tint scholarship and CE credit cards to match their toggle state Coloring only the toggle track left the surrounding card neutral, so a requested scholarship or CE credit was easy to miss at a glance. Mounting each card's Stimulus controller on the
lets it tint the whole box to mirror the toggle: theme color when saved-on, amber while pending, neutral when off. An already-awarded scholarship keeps a static themed tint since its toggle is gone. Co-Authored-By: Claude Opus 4.8 --- .../ce_credit_requested_controller.js | 16 ++++++++++++---- .../scholarship_requested_controller.js | 19 +++++++++++++++---- app/views/event_registrations/_form.html.erb | 10 +++++----- .../event_registrations/_scholarship.html.erb | 9 +++++---- 4 files changed, 37 insertions(+), 17 deletions(-) diff --git a/app/frontend/javascript/controllers/ce_credit_requested_controller.js b/app/frontend/javascript/controllers/ce_credit_requested_controller.js index 58b2528798..546ecea9c7 100644 --- a/app/frontend/javascript/controllers/ce_credit_requested_controller.js +++ b/app/frontend/javascript/controllers/ce_credit_requested_controller.js @@ -1,9 +1,10 @@ import { Controller } from "@hotwired/stimulus" -// Drives the CE-credit box on the registration form. Colors the "Requested" -// toggle to signal save state: amber while the choice is pending (changed but -// not yet saved), the continuing-education theme color once it matches the -// stored "on" value, neutral gray when stored as off. While "Requested" is on it +// Drives the CE-credit box on the registration form. Mounted on the
+// so it can tint the whole card to signal save state: amber while the choice is +// pending (changed but not yet saved), the continuing-education theme color once +// it matches the stored "on" value, neutral gray when stored as off — the +// "Requested" toggle and the card share that color. While "Requested" is on it // reveals the CE details (license number + hours) and keeps the "Provided" badge // and amount-owed total ($rate × hours) in sync as the admin edits them. export default class extends Controller { @@ -22,6 +23,13 @@ export default class extends Controller { this.trackTarget.classList.toggle("bg-teal-600", checked && !pending) this.trackTarget.classList.toggle("bg-gray-200", !checked && !pending) + this.element.classList.toggle("bg-amber-50", pending) + this.element.classList.toggle("border-amber-200", pending) + this.element.classList.toggle("bg-teal-50", checked && !pending) + this.element.classList.toggle("border-teal-200", checked && !pending) + this.element.classList.toggle("bg-white", !checked && !pending) + this.element.classList.toggle("border-gray-200", !checked && !pending) + if (this.hasDetailsTarget) this.detailsTarget.classList.toggle("hidden", !checked) this.updateLicenseBadge() diff --git a/app/frontend/javascript/controllers/scholarship_requested_controller.js b/app/frontend/javascript/controllers/scholarship_requested_controller.js index 6e2e4473a5..37ed8d11e5 100644 --- a/app/frontend/javascript/controllers/scholarship_requested_controller.js +++ b/app/frontend/javascript/controllers/scholarship_requested_controller.js @@ -1,9 +1,11 @@ import { Controller } from "@hotwired/stimulus" -// Colors the "Requested" toggle to signal save state: amber while the choice is -// pending (changed but not yet saved with the registration form), the -// scholarship theme color once it matches the stored "on" value, and neutral -// gray when stored as off. +// Colors the "Requested" toggle and its whole card to signal save state: amber +// while the choice is pending (changed but not yet saved with the registration +// form), the scholarship theme color once it matches the stored "on" value, and +// neutral gray when stored as off. Mounted on the
so this.element is +// the card to tint. When a scholarship has already been awarded the toggle is +// gone — there's no checkbox to read, so we leave the server-rendered tint. export default class extends Controller { static targets = ["checkbox", "track"] static values = { initial: Boolean } @@ -13,11 +15,20 @@ export default class extends Controller { } refresh() { + if (!this.hasCheckboxTarget) return + const checked = this.checkboxTarget.checked const pending = checked !== this.initialValue this.trackTarget.classList.toggle("bg-amber-500", pending) this.trackTarget.classList.toggle("bg-fuchsia-600", checked && !pending) this.trackTarget.classList.toggle("bg-gray-200", !checked && !pending) + + this.element.classList.toggle("bg-amber-50", pending) + this.element.classList.toggle("border-amber-200", pending) + this.element.classList.toggle("bg-fuchsia-50", checked && !pending) + this.element.classList.toggle("border-fuchsia-200", checked && !pending) + this.element.classList.toggle("bg-white", !checked && !pending) + this.element.classList.toggle("border-gray-200", !checked && !pending) } } diff --git a/app/views/event_registrations/_form.html.erb b/app/views/event_registrations/_form.html.erb index 13a1091ad2..a364ff27f5 100644 --- a/app/views/event_registrations/_form.html.erb +++ b/app/views/event_registrations/_form.html.erb @@ -214,7 +214,10 @@ details (license number + requested hours) and what they owe at the default hourly rate, recomputed live by the ce-credit-requested controller. The details collapse when CE isn't requested. ---- %> -
+
" + data-controller="ce-credit-requested" + data-ce-credit-requested-initial-value="<%= f.object.ce_credit_requested %>" + data-ce-credit-requested-rate-value="<%= EventRegistration::CE_HOURLY_RATE_DOLLARS %>">
@@ -222,10 +225,7 @@

CE credits

-
+