Improve filter button styling.

Author: SyntaxColoring

src/App.tsx

@@ -195,26 +195,40 @@ function FilterAreaContents(): React.JSX.Element {
   );
 
   return (
-    <>
-      <section className="col-span-2">
-        <h2>
-          {mismatchCount} mismatched{" "}
-          {mismatchCount == 1 ? "transaction" : "transactions"}
-        </h2>
-        <MismatchFiltersList />
-      </section>
-
-      <section className="col-span-2">
-        <label>
-          Show excluded transactions
-          <input
-            type="checkbox"
-            checked={showingExcludedTransactions}
-            onChange={() => dispatch(toggleShowExcludedFromComparison())}
-          />
-        </label>
-      </section>
-    </>
+    <div className="mx-auto max-w-6xl space-y-4 text-center">
+      <p className="text-lg font-bold">
+        {mismatchCount === 0 ? (
+          <>All transactions match between YNAB and the bank.</>
+        ) : (
+          <>
+            {mismatchCount}{" "}
+            {mismatchCount === 1 ? "transaction is" : "transactions are"} out of
+            sync between YNAB and the bank.
+          </>
+        )}
+      </p>
+      <p>
+        {mismatchCount === 0 ? (
+          <>
+            If this doesn't seem right, check the "Comparing" columns and make
+            sure that all the transactions that you expect are included in the
+            comparison.
+          </>
+        ) : (
+          <>Use these filters to narrow them down.</>
+        )}
+      </p>
+      <MismatchFiltersList />
+      <label>
+        <input
+          className="accent-green-700"
+          type="checkbox"
+          checked={!showingExcludedTransactions}
+          onChange={() => dispatch(toggleShowExcludedFromComparison())}
+        />{" "}
+        Hide transactions that aren't being compared
+      </label>
+    </div>
   );
 }
 

src/MismatchFiltersList.tsx

@@ -1,6 +1,4 @@
-import type currency from "currency.js";
-
-import { Amount } from "./currencyFormatting";
+import { FilterToggleButton } from "./components/FilterToggleButton";
 import { selectAmountFilters, toggleFilter } from "./redux/tablesSlice";
 import { useAppDispatch, useAppSelector } from "./redux/typedHooks";
 
@@ -11,40 +9,25 @@ export function MismatchFiltersList(): React.JSX.Element {
     useAppSelector((state) => selectAmountFilters(state.present)) ?? [];
 
   return (
-    <ul>
-      {filters.map((filter) => (
-        <li key={filter.key} className="inline-block">
-          <MismatchToggleButton
-            amount={filter.mismatch.amount}
-            count={Math.abs(
-              filter.mismatch.bankCount - filter.mismatch.ynabCount,
-            )}
-            enabled={filter.filterEnabled}
-            onClick={() => dispatch(toggleFilter({ key: filter.key }))}
-          />
-        </li>
-      ))}
-    </ul>
-  );
-}
-
-function MismatchToggleButton({
-  amount,
-  count,
-  enabled,
-  onClick,
-}: {
-  amount: currency;
-  count: number;
-  enabled: boolean;
-  onClick: () => void;
-}): React.JSX.Element {
-  return (
-    <button
-      className={enabled ? "font-bold text-blue-500" : ""}
-      onClick={onClick}
-    >
-      <Amount amount={amount} /> ({count})
-    </button>
+    <div className="rounded bg-well p-3">
+      {filters.length === 0 ? (
+        <i className="mx-auto">No filters to show</i>
+      ) : (
+        <menu className="scroll flex gap-3 overflow-x-auto">
+          {filters.map((filter) => (
+            <li key={filter.key}>
+              <FilterToggleButton
+                currencyAmount={filter.mismatch.amount}
+                mismatchCount={Math.abs(
+                  filter.mismatch.bankCount - filter.mismatch.ynabCount,
+                )}
+                selected={filter.filterEnabled}
+                onClick={() => dispatch(toggleFilter({ key: filter.key }))}
+              />
+            </li>
+          ))}
+        </menu>
+      )}
+    </div>
   );
 }

src/components/FilterToggleButton.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import type currency from "currency.js";
+import type React from "react";
+
+import { Amount } from "../currencyFormatting";
+import styles from "./inputs/inputs.module.css";
+
+export interface Props {
+  currencyAmount: currency;
+  mismatchCount: number;
+  selected: boolean;
+  onClick?: () => void;
+}
+
+export function FilterToggleButton(props: Props): React.JSX.Element {
+  const { currencyAmount, mismatchCount, selected, onClick } = props;
+
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      className={clsx(
+        styles.input,
+        selected && (mismatchCount === 0 ? "bg-green-200" : "bg-amber-200"),
+      )}
+      onClick={onClick}
+    >
+      <span className="flex gap-2">
+        <span
+          className={clsx(
+            "inline-block min-w-[1lh] rounded-full",
+            mismatchCount === 0
+              ? selected
+                ? "bg-green-400"
+                : "bg-green-200"
+              : selected
+                ? "bg-amber-400"
+                : "bg-amber-200",
+          )}
+        >
+          {mismatchCount}x
+        </span>
+        <span>
+          <Amount amount={currencyAmount} />
+        </span>
+      </span>
+    </button>
+  );
+}

src/components/icons/ComparedIcon.tsx

@@ -19,8 +19,8 @@ export function ComparedIcon(props: Props): JSX.Element {
   const otherSideCopy = thisSide === "bank" ? "YNAB" : "bank";
 
   const title = compared
-    ? `This ${thisSideCopy} transaction is included in the comparison. You expect it to also exist on the ${otherSideCopy} side.`
-    : `This ${thisSideCopy} transaction is excluded from the comparison. You don't expect it to exist on the ${otherSideCopy} side.`;
+    ? `This ${thisSideCopy} transaction is included in the comparison, meaning you expect it to have a match on the ${otherSideCopy} side.`
+    : `This ${thisSideCopy} transaction is excluded from the comparison, meaning you don't expect it to have a match on the ${otherSideCopy} side.`;
   return compared ? (
     <SearchCheck {...{ className, ...rest }}>
       <title>{title}</title>