Fix some eslint errors; animate button

Author: PeterTYLiu

src/components/BottomControls/BottomControls.tsx

@@ -60,12 +60,26 @@ export const BottomControls = () => {
       <Stack gap={1} direction="row" sx={{ alignItems: "center" }}>
         <Box
           sx={{
-            backgroundImage: "conic-gradient(#ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c1, #ff0000)",
+            "@keyframes rotate": {
+              from: { "--angle": "0deg" },
+              to: { "--angle": "360deg" },
+            },
+            "--angle": "0deg",
+            backgroundImage:
+              "conic-gradient(from var(--angle), #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c1, #ff0000)",
+            transition: "all 0.5s",
             borderRadius: 1,
             p: "1px",
+            "&:has(button:hover), &:has(button:focus)": {
+              animation: "rotate 1.6s linear infinite",
+            },
           }}
         >
-          <Button variant="contained" onClick={() => setThemeOptions(generateTheme())} sx={SHARED_BUTTON_STYLES}>
+          <Button
+            variant="contained"
+            onClick={() => setThemeOptions(generateTheme())}
+            sx={{ ...SHARED_BUTTON_STYLES, outlineOffset: "1px" }}
+          >
             Randomize!
           </Button>
         </Box>

src/components/ColourPicker/ColorPicker.tsx

@@ -6,14 +6,12 @@ import { FieldContainer, type FieldContainerProps } from "../FieldContainer/Fiel
 
 interface ColorPickerProps extends FieldContainerProps {
   value: string;
+  name: string;
   onChange: (hex: string) => void;
 }
 
-export const ColorPicker = ({ value, onChange, ...fieldContainerProps }: ColorPickerProps) => {
+export const ColorPicker = ({ value, onChange, name, ...fieldContainerProps }: ColorPickerProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
-
-  const popverId = Math.random().toString();
-
   const handleNewInputValue = (inputValue: string) => {
     const newValue = toStandardHex(inputValue, value);
     if (newValue === value) return;
@@ -34,7 +32,7 @@ export const ColorPicker = ({ value, onChange, ...fieldContainerProps }: ColorPi
     <FieldContainer {...fieldContainerProps}>
       <Box
         component="button"
-        popoverTarget={popverId}
+        popoverTarget={name}
         sx={{
           border: 1,
           borderInlineEnd: 0,
@@ -60,7 +58,7 @@ export const ColorPicker = ({ value, onChange, ...fieldContainerProps }: ColorPi
         }}
       />
       <Box
-        id={popverId}
+        id={name}
         popover="auto"
         sx={{
           insetInlineEnd: "anchor(start)",
@@ -81,6 +79,7 @@ export const ColorPicker = ({ value, onChange, ...fieldContainerProps }: ColorPi
       </Box>
       <Box
         component="input"
+        name={name}
         ref={inputRef}
         key={value}
         sx={{

src/components/MockApp/MockApp.tsx

@@ -48,7 +48,8 @@ import {
   type ChipProps,
 } from "@mui/material";
 import { useState } from "react";
-import { FAKE_DATA_1, FAKE_DATA_2, FAKE_DATA_3, Sparkline } from "../Sparkline/Sparkline";
+import { Sparkline } from "../Sparkline/Sparkline";
+import { FAKE_DATA_1, FAKE_DATA_2, FAKE_DATA_3 } from "./mockData";
 
 // Remove these styled components when MUI fixes table border colors
 // https://github.com/mui/material-ui/issues/47749