From 2337263297d33ea92ce91fb9ed4da3f57f04c8d2 Mon Sep 17 00:00:00 2001
From: Duncan Stuart <dgmstuart@gmail.com>
Date: Mon, 22 Apr 2024 22:51:20 +0200
Subject: [PATCH] Redo approach to button active states

This didn't actually work: it assumed that there were styles set on the
element with `style=""` (?) but the styling is actually done entirely
with CSS.

In some ways the setStyles approach is maybe more elegant? But it means
we can't use the CSS variables (?), and overall an "active" class just
seems simpler.
---
 src/components/ActionButton.tsx | 22 +++-------------------
 src/components/CardActions.css  |  5 +++++
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
index cdfc0ee..fa0be7b 100644
--- a/src/components/ActionButton.tsx
+++ b/src/components/ActionButton.tsx
@@ -15,31 +15,15 @@ const ActionButton: React.FC<{
     target.disabled = false;
   };
 
-  const setStyles = function (
-    element: HTMLElement,
-    styles: React.CSSProperties,
-  ) {
-    Object.assign(element.style, styles);
-  };
-
   const buttonActive = function (element: HTMLButtonElement) {
-    const {
-      innerText,
-      style: { color, backgroundColor },
-    } = element;
+    const { innerText } = element;
 
     setTimeout(() => {
-      setStyles(element, {
-        color: color,
-        backgroundColor: backgroundColor,
-      });
+      element.classList.remove("active");
       element.innerText = innerText;
     }, activeDuration);
 
-    setStyles(element, {
-      color: "#282c34",
-      backgroundColor: "white",
-    });
+    element.classList.add("active");
     if (changeText) {
       element.innerText = changeText;
     }
diff --git a/src/components/CardActions.css b/src/components/CardActions.css
index a0da220..35f2b6e 100644
--- a/src/components/CardActions.css
+++ b/src/components/CardActions.css
@@ -17,3 +17,8 @@
   border-radius: 0.25rem;
   background-color: transparent;
 }
+
+.CardActions button.active {
+  color: var(--dark);
+  background-color: var(--off-white);
+}