From 463371d1999951a43d974de2376744687fedd709 Mon Sep 17 00:00:00 2001
From: mandalore <samleboy08@gmail.com>
Date: Fri, 4 Sep 2026 16:38:21 -0500
Subject: [PATCH] Make filter button active/inactive state clearer in dark mode

btn-outline + btn-active read too similarly to tell apart at a glance
in dark mode. Now: active buttons are solid-colored, matching the
badge they control (warning for Format, info for Scope, same colors
already used on the event cards), and inactive buttons are a dimmed
outline. Color alone now tells you what a button does; fill vs. outline
tells you whether it's on.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SBzcNkW7JcYipnAX6HfgmK
---
 sites/events/index.html  |  8 ++++----
 sites/events/src/main.js | 17 ++++++++++++++---
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/sites/events/index.html b/sites/events/index.html
index ea8c77e..41f04ca 100644
--- a/sites/events/index.html
+++ b/sites/events/index.html
@@ -21,11 +21,11 @@
       <!-- Filters: toggle any combination off to narrow the list below -->
       <div class="flex flex-wrap items-center gap-2 mb-8" id="filters">
         <span class="text-xs uppercase tracking-widest opacity-50 mr-1">Format</span>
-        <button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="format" data-filter-value="Singles">Singles</button>
-        <button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="format" data-filter-value="Team Event">Team Event</button>
+        <button type="button" class="btn btn-sm btn-warning" data-filter-group="format" data-filter-value="Singles">Singles</button>
+        <button type="button" class="btn btn-sm btn-warning" data-filter-group="format" data-filter-value="Team Event">Team Event</button>
         <span class="text-xs uppercase tracking-widest opacity-50 ml-3 mr-1">Scope</span>
-        <button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="scope" data-filter-value="RTT">RTT</button>
-        <button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="scope" data-filter-value="GT">GT</button>
+        <button type="button" class="btn btn-sm btn-info" data-filter-group="scope" data-filter-value="RTT">RTT</button>
+        <button type="button" class="btn btn-sm btn-info" data-filter-group="scope" data-filter-value="GT">GT</button>
       </div>
 
       <!-- Loading skeleton -->
diff --git a/sites/events/src/main.js b/sites/events/src/main.js
index 1fdc067..c1f6e88 100644
--- a/sites/events/src/main.js
+++ b/sites/events/src/main.js
@@ -221,12 +221,23 @@ function passesFilter(ev) {
   return activeFormats.has(formatOf(ev)) && (scope === null || activeScopes.has(scope));
 }
 
+// Filter buttons use the same color as the badge they control (warning
+// for Format, info for Scope) when active, so it's obvious at a glance
+// which is which — and switch to a dimmed outline when off, since
+// btn-outline alone reads too similarly to its own active state in dark
+// mode to tell the two apart at a glance.
+const FILTER_GROUP_COLOR = { format: "btn-warning", scope: "btn-info" };
+
 function setupFilters() {
   document.querySelectorAll("#filters button[data-filter-group]").forEach(btn => {
+    const group = btn.dataset.filterGroup;
+    const onClass = FILTER_GROUP_COLOR[group];
     btn.addEventListener("click", () => {
-      const set = btn.dataset.filterGroup === "format" ? activeFormats : activeScopes;
-      const nowActive = !btn.classList.contains("btn-active");
-      btn.classList.toggle("btn-active", nowActive);
+      const set = group === "format" ? activeFormats : activeScopes;
+      const nowActive = !btn.classList.contains(onClass);
+      btn.classList.toggle(onClass, nowActive);
+      btn.classList.toggle("btn-outline", !nowActive);
+      btn.classList.toggle("opacity-40", !nowActive);
       if (nowActive) set.add(btn.dataset.filterValue);
       else set.delete(btn.dataset.filterValue);
       renderCircuits();