feat(app): massive ui updates all over the place

src/components/SettingsActions/SettingsActions.tsx

@@ -1,5 +1,13 @@
-import { useRecoilValue, useResetRecoilState } from "recoil";
-import { ArrowCounterClockwise, CheckCircle, Link } from "@phosphor-icons/react";
+import { useState } from "react";
+import ReactGA from "react-ga4";
+import { useRecoilState, useResetRecoilState } from "recoil";
+import {
+  ArrowCounterClockwise,
+  CheckCircle,
+  DiceFive,
+  Link,
+} from "@phosphor-icons/react";
+import { IconStyle } from "@phosphor-icons/core";
 
 import { useTransientState } from "@/hooks";
 import {
@@ -12,12 +20,13 @@ import {
 import "./SettingsActions.css";
 
 const SettingsActions = () => {
-  const weight = useRecoilValue(iconWeightAtom);
-  const size = useRecoilValue(iconSizeAtom);
-  const color = useRecoilValue(iconColorAtom);
+  const [weight, setWeight] = useRecoilState(iconWeightAtom);
+  const [size, setSize] = useRecoilState(iconSizeAtom);
+  const [color, setColor] = useRecoilState(iconColorAtom);
   const reset = useResetRecoilState(resetSettingsSelector);
 
   const [copied, setCopied] = useTransientState<boolean>(false, 2000);
+  const [booped, setBooped] = useState<boolean>(false);
 
   const copyDeepLinkToClipboard = () => {
     const paramString = new URLSearchParams([
@@ -35,26 +44,60 @@ const SettingsActions = () => {
       });
   };
 
+  const randomizeSettings = () => {
+    if (booped) setBooped(false);
+    setBooped(true);
+
+    const rWeight = Object.values(IconStyle).filter((w) => w !== weight)[
+      Math.floor(Math.random() * 5)
+    ];
+    const rSize = 16 + Math.floor(Math.random() * 20 + 1) * 4;
+    const rColor =
+      "#" +
+      Math.floor(Math.random() * (0xffffff + 1))
+        .toString(16)
+        .padStart(6, "0");
+
+    setWeight(rWeight);
+    setColor(rColor);
+    setSize(rSize);
+
+    ReactGA.event({ category: "Settings", action: "Random" });
+  };
+
   return (
     <>
       <button
-        className="action-button"
+        className="tool-button"
         title="Restore default settings"
         onClick={reset}
       >
         <ArrowCounterClockwise size={24} />
       </button>
       <button
-        className="action-button"
+        className="tool-button"
         title="Copy URL for current settings"
         onClick={copyDeepLinkToClipboard}
       >
         {copied ? (
-          <CheckCircle size={24} color="#1FA647" weight="fill" />
+          <CheckCircle size={24} color="var(--green)" weight="fill" />
         ) : (
           <Link size={24} />
         )}
       </button>
+      <button
+        className="tool-button"
+        title="Randomize"
+        onClick={randomizeSettings}
+      >
+        <span
+          className={booped ? "bounce" : ""}
+          style={{ display: "flex" }}
+          onAnimationEnd={() => setBooped(false)}
+        >
+          <DiceFive className={booped ? "spin" : ""} size={24} />
+        </span>
+      </button>
     </>
   );
 };