improvments to popup

interface/package.json

@@ -13,7 +13,7 @@
     "@types/chrome": "^0.0.246",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
-    "react-best-gradient-color-picker": "^2.2.22",
+    "react-best-gradient-color-picker": "^2.2.23",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {

interface/src/App.tsx

@@ -6,6 +6,7 @@ import logoDark from './assets/betterseqta-light-full.png';
 import Shortcuts from './pages/Shortcuts';
 import About from './pages/About';
 import { SettingsContextProvider } from './SettingsContext';
+import Picker from './components/Picker';
 
 const App: React.FC = () => {
 
@@ -32,6 +33,7 @@ const App: React.FC = () => {
           <img src={logo} className="w-4/5 dark:hidden" />
           <img src={logoDark} className="hidden w-4/5 dark:block" />
         </div>
+        <Picker />
         <TabbedContainer tabs={tabs} />
       </div>
     </SettingsContextProvider>

interface/src/SettingsContext.tsx

@@ -7,6 +7,8 @@ import useSettingsState from './hooks/settingsState';
 const SettingsContext = createContext<{
   settingsState: SettingsState;
   setSettingsState: React.Dispatch<React.SetStateAction<SettingsState>>;
+  showPicker: boolean;
+  setShowPicker: React.Dispatch<React.SetStateAction<boolean>>;
 } | undefined>(undefined);
 
 export const SettingsContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
@@ -15,15 +17,18 @@ export const SettingsContextProvider: React.FC<{ children: ReactNode }> = ({ chi
     lessonAlerts: false,
     animatedBackground: false,
     animatedBackgroundSpeed: "0",
-    customThemeColor: "#db6969",
+    customThemeColor: "rgba(219, 105, 105, 1)",
     betterSEQTAPlus: true,
-    shortcuts: []
+    shortcuts: [],
+    customshortcuts: [],
   });
 
+  const [showPicker, setShowPicker] = useState<boolean>(false);
+
   useSettingsState({ settingsState, setSettingsState });
 
   return (
-    <SettingsContext.Provider value={{ settingsState, setSettingsState }}>
+    <SettingsContext.Provider value={{ settingsState, setSettingsState, showPicker, setShowPicker }}>
       {children}
     </SettingsContext.Provider>
   );

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;

interface/src/main.d.ts

@@ -4,3 +4,5 @@ declare module "*.png";
 declare module "*.svg";
 declare module "*.jpeg";
 declare module "*.jpg";
+
+declare module 'react-best-gradient-color-picker';

interface/src/main.tsx

@@ -1,10 +1,20 @@
-import React from 'react'
+import React, { useState } from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.js'
 import './index.css'
+// @ts-expect-error There aren't any types for the below library
+import ColorPicker from 'react-best-gradient-color-picker';
 
 const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
 
+// @ts-expect-error woaefoiahef
+// eslint-disable-next-line
+function Testing() {
+  const [color, setColor] = useState('#fffff');
+
+  return <ColorPicker value={color} onChange={setColor} />
+}
+
 root.render(
   <React.StrictMode>
     <App />

interface/src/pages/Settings.tsx

@@ -1,6 +1,6 @@
-import ColorPicker from '../components/ColorPicker';
 import Switch from '../components/Switch';
 import Slider from '../components/Slider';
+import PickerSwatch from '../components/PickerSwatch';
 
 import { SettingsList } from '../types/SettingsProps';
 import { useSettingsContext } from '../SettingsContext';
@@ -20,13 +20,6 @@ const Settings: React.FC = () => {
       ...settingsState,
       [key]: value,
     });
-  }
-
-  const colorChange = (color: string) => {
-    setSettingsState({
-      ...settingsState,
-      customThemeColor: color,
-    });
   };
 
   const settings: SettingsList[] = [
@@ -53,7 +46,7 @@ const Settings: React.FC = () => {
     {
       title: "Custom Theme Colour",
       description: "Customise the overall theme colour of SEQTA Learn.",
-      modifyElement: <ColorPicker color={settingsState.customThemeColor} onChange={(color: string) => colorChange(color)} />
+      modifyElement: <PickerSwatch />
     },
     {
       title: "BetterSEQTA+",

interface/src/types/ColorPickerProps.ts

@@ -1,4 +1,5 @@
 export interface ColorPickerProps {
     color: string;
     onChange: (color: string) => void;
+    id: string;
 }