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

@@ -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;
     }

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);
+}