From 0b863b97a4382fb86c6dac40fdd07e1acfa218bd Mon Sep 17 00:00:00 2001
From: Klaas van Schelven <klaas@vanschelven.com>
Date: Mon, 22 Sep 2025 16:39:44 +0200
Subject: [PATCH] Checkbox styling: remove bg-white to fix invisible checkmark

After upgrading to Tailwind 4, the styled checkbox showed no checkmark when
checked. DevTools inspection showed a white-on-white rendering: the checkmark
SVG was filled white while the background was also white. Removing the
bg-white class restores the intended text-* color, making the checkmark
visible again.

The class bg-white was added in 4c8fb20daa9c i.e. in our first attempt
to get a non-ugly checkbox styling; whether it was "ever needed for realz"
is of historic interest mostly.

Fix #225
---
 issues/templates/issues/issue_list.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/issues/templates/issues/issue_list.html b/issues/templates/issues/issue_list.html
index 70c68ec..1dee96b 100644
--- a/issues/templates/issues/issue_list.html
+++ b/issues/templates/issues/issue_list.html
@@ -64,7 +64,7 @@
                 <div class="m-1 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer" onclick="toggleContainedCheckbox(this); matchIssueCheckboxesStateToMain(this)">
 
                     {# the below sounds expensive, but this list is cached #}
-                    {% if page_obj.object_list|length > 0 %}<input type="checkbox" class="bg-white dark:bg-slate-900 border-cyan-800 dark:border-cyan-400 text-cyan-500 dark:text-cyan-300 focus:ring-cyan-200 dark:focus:ring-cyan-700 m-4 cursor-pointer js-main-checkbox" onclick="event.stopPropagation(); matchIssueCheckboxesStateToMain(this.parentNode)"/>{% endif %}
+                    {% if page_obj.object_list|length > 0 %}<input type="checkbox" class="border-cyan-800 dark:border-cyan-400 text-cyan-500 dark:text-cyan-300 focus:ring-cyan-200 dark:focus:ring-cyan-700 m-4 cursor-pointer js-main-checkbox" onclick="event.stopPropagation(); matchIssueCheckboxesStateToMain(this.parentNode)"/>{% endif %}
                 </div>
             </td>
             <td class="w-full ml-0 pb-4 pt-4 pr-4 flex">
@@ -165,7 +165,7 @@
             <tr class="bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600 border-2 ">
             <td>
                 <div class="m-1 rounded-full hover:bg-slate-100 dark:hover:bg-slate-700 cursor-pointer" onclick="toggleContainedCheckbox(this); matchMainCheckboxStateToIssueCheckboxes()">
-                    <input type="checkbox" {% if issue.id in unapplied_issue_ids %}checked{% endif %} name="issue_ids[]" value="{{ issue.id }}" class="bg-white dark:bg-slate-900 border-cyan-800 dark:border-cyan-400 text-cyan-500 dark:text-cyan-300 focus:ring-cyan-200 dark:focus:ring-cyan-700 m-4 cursor-pointer js-issue-checkbox" onclick="event.stopPropagation(); {# prevent the container's handler from undoing the default action #} matchMainCheckboxStateToIssueCheckboxes()"/>
+                    <input type="checkbox" {% if issue.id in unapplied_issue_ids %}checked{% endif %} name="issue_ids[]" value="{{ issue.id }}" class="border-cyan-800 dark:border-cyan-400 text-cyan-500 dark:text-cyan-300 focus:ring-cyan-200 dark:focus:ring-cyan-700 m-4 cursor-pointer js-issue-checkbox" onclick="event.stopPropagation(); {# prevent the container's handler from undoing the default action #} matchMainCheckboxStateToIssueCheckboxes()"/>
                 </div>
             </td>
             <td class="w-full ml-0 pb-4 pt-4 pr-4">