switch hoverable elements to use :hover

cardboard/static/style.css

@@ -122,6 +122,16 @@ body {
   line-height: normal;
 }
 
+.clickable-puzzle-cell {
+  cursor: pointer;
+  min-height: 1.4rem;
+  width: 100%;
+}
+
+.clickable-puzzle-cell:hover {
+  background-color: #ffe579;
+}
+
 :root {
   --bs-navbar-padding-y: .5rem;
   --bs-nav-link-padding-x: 1rem;

hunts/src/NameCell.tsx

@@ -108,6 +108,7 @@ export default function NameCell({
 
   return (
     <div
+      className="clickable-puzzle-cell"
       onMouseEnter={() => {
         setUiHovered(true);
       }}
@@ -128,14 +129,7 @@ export default function NameCell({
             },
           })
         );
-      }}
-      style={{
-        // TODO: abstract these properties out into their own CSS class
-        paddingLeft: `${row.depth * 2}rem`,
-        minHeight: '1.4rem', cursor: 'pointer',
-        backgroundColor: uiHovered ? '#ffe579' : undefined
-      }}
-    >
+      }}>
       <div
         onMouseEnter={() => {
           setUiHovered(true);

hunts/src/NotesCell.tsx

@@ -14,6 +14,7 @@ export default function NotesCell({ row, value }: { row: Row; value: string }) {
 
   return (
     <div
+    className="clickable-puzzle-cell"
     onMouseEnter={() => {
       setUiHovered(true);
     }}
@@ -26,8 +27,6 @@ export default function NotesCell({ row, value }: { row: Row; value: string }) {
         setEditedNotesValue(value);
       }
     }}
-    // TODO: abstract these properties out into their own CSS class
-    style={{width: "100%", minHeight: '1.4rem', cursor: !editing ? 'pointer' : undefined, backgroundColor: uiHovered && !editing ? '#ffe579' : undefined}}
     >
       {editing ?
       <div style={{ display: 'flex' }}>

hunts/src/TagCell.tsx

@@ -1,10 +1,8 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { showModal } from "./modalSlice";
-import { faTag } from "@fortawesome/free-solid-svg-icons";
 import { toggleFilterTag } from "./filterSlice";
 import TagPill from "./TagPill";
-import ClickableIcon from "./ClickableIcon";
 
 import type { RootState } from "./store";
 import type { Hunt, Puzzle, Row } from "./types";
@@ -23,6 +21,7 @@ function TagCell({ row }: { row: Row<Puzzle> }) {
 
   return (
     <div
+     className="clickable-puzzle-cell"
      onMouseEnter={() => {
        setUiHovered(true);
      }}
@@ -40,19 +39,16 @@ function TagCell({ row }: { row: Row<Puzzle> }) {
           },
         })
        );
-     }}
-     style={{
-       // TODO: abstract these properties out into their own CSS class
-       cursor: 'pointer',
-       minHeight: '1.4rem',
-       backgroundColor: uiHovered ? '#ffe579' : undefined
      }}>
       {tagsToShow.map(({ name, color, id }) => (
         <TagPill
         name={name}
         color={color}
         key={name}
-        onClick={() => dispatch(toggleFilterTag({ name, color, id }))}
+        onClick={(e: React.MouseEvent) => {
+          e.stopPropagation();
+          dispatch(toggleFilterTag({ name, color, id }));
+        }}
         />
       ))}
     </div>

hunts/src/TagPill.tsx

@@ -6,7 +6,7 @@ interface TagPillProps {
   color: string;
   selected?: boolean;
   faded?: boolean;
-  onClick?: (() => void) | null;
+  onClick?: React.MouseEventHandler<HTMLElement>;
 }
 
 function TagPill(props: TagPillProps) {