improvments to popup

interface/src/components/ColorPicker.tsx

@@ -1,42 +0,0 @@
-// @ts-expect-error There aren't any types for the below library
-import ColorPicker from 'react-best-gradient-color-picker';
-import { useState, useRef, useEffect } from 'react';
-import type { ColorPickerProps } from '../types/ColorPickerProps';
-
-const Picker = ({ color, onChange }: ColorPickerProps) => {
-  const [showPicker, setShowPicker] = useState<boolean>(false);
-  const ref = useRef<HTMLDivElement>(null);
-  
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent): void => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        setShowPicker(false);
-      }
-    };
-    if (showPicker) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [showPicker]);
-
-  return (
-    <>
-      <button
-        onClick={() => setShowPicker(!showPicker)}
-        style={{ background: color }}
-        className="w-16 h-8 rounded-md"
-      ></button>
-      {showPicker && (
-        <div className="absolute top-0 left-0 w-full h-full bg-black/20">
-          <div ref={ref} className="fixed top-0 left-0 z-50 p-4 bg-white border rounded-lg shadow-lg border-zinc-00">
-            <ColorPicker value={color} onChange={onChange} />
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Picker;

interface/src/components/Picker.tsx

@@ -0,0 +1,56 @@
+// @ts-expect-error There aren't any types for the below library
+import ColorPicker from 'react-best-gradient-color-picker';
+import { useSettingsContext } from '../SettingsContext';
+import { motion } from "framer-motion";
+
+export default function Picker() {
+  const { settingsState, setSettingsState, showPicker, setShowPicker } = useSettingsContext();
+
+  const colorChange = (color: string) => {
+    setSettingsState({
+      ...settingsState,
+      customThemeColor: color,
+    });
+  };
+
+  // Define animation variants
+  const backgroundVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+    exit: { opacity: 0 }
+  };
+
+  const scaleVariants = {
+    hidden: { scale: 0.3 },
+    visible: { scale: 1 },
+    exit: { scale: 0.4 } // Adding exit animation
+  };
+
+  return (
+    // Apply fade-in animation to background
+    <motion.div 
+      initial="hidden"
+      animate={showPicker ? "visible" : "exit"}
+      exit="exit"
+      variants={backgroundVariants}
+      transition={{ duration: 0.2 }}
+      onClick={() => setShowPicker(false)}
+      className={`absolute top-0 left-0 z-50 flex justify-center w-full h-full pt-4 bg-black/20 ${!showPicker ? 'pointer-events-none' : ''}`}
+    >
+      <div>
+        {/* Apply springy scale animation */}
+        <motion.div 
+          initial="hidden"
+          animate={showPicker ? "visible" : "exit"}
+          exit="exit"
+          variants={scaleVariants}
+          transition={{ type: "spring", stiffness: 500, damping: 40 }}
+          onClick={(e) => e.stopPropagation()} 
+          className="h-auto p-4 bg-white border rounded-lg shadow-lg dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
+        >
+          <ColorPicker hideInputs={true} value={settingsState.customThemeColor} onChange={colorChange} />
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+}

interface/src/components/PickerSwatch.tsx

@@ -0,0 +1,19 @@
+import { useSettingsContext } from '../SettingsContext';
+
+const PickerSwatch = () => {
+  const { setShowPicker, settingsState } = useSettingsContext();
+
+  const enablePicker = () => {
+    setShowPicker(true);
+  };
+
+  return (
+    <button
+      onClick={enablePicker}
+      style={{ background: settingsState.customThemeColor }}
+      className="w-16 h-8 rounded-md"
+    ></button>
+  );
+};
+
+export default PickerSwatch;