improvments to popup

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>
+  );
+}