improvements to popup_dev

2026-06-06 03:34:40 +00:00 · 2023-09-12 16:27:29 +10:00
parent 1e1c5f9b40
commit 979e67f622
12 changed files with 128 additions and 20 deletions
@@ -6,8 +6,8 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
-  <body>
-    <div id="ExtensionPopup" class="dark."></div>
+  <body class="">
+    <div id="ExtensionPopup" class=""></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
@@ -12,6 +12,7 @@
  "dependencies": {
    "framer-motion": "^10.16.4",
    "react": "^18.2.0",
+    "react-best-gradient-color-picker": "^2.2.22",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
@@ -1,26 +1,67 @@
 import './App.css'
-import Slider from './components/Slider'
 import Switch from './components/Switch'
+import logo from './assets/betterseqta-dark-full.png'
+import logoDark from './assets/betterseqta-light-full.png'
+import ColorPicker from './components/ColorPicker'
+
+const switchChange = (isOn: boolean) => {
+  console.log(isOn)
+}
+
+const settings = [
+  {
+    title: "Notification Collector", 
+    description: "Uncaps the 9+ limit for notifications, showing the real number.",
+    modifyElement: <Switch onChange={switchChange} />
+  },
+  {  
+    title: "Lesson Alerts",
+    description: "Sends a native browser notification ~5 minutes prior to lessons.", 
+    modifyElement: <Switch onChange={switchChange} />
+  },
+  {
+    title: "Animated Background",
+    description: "Adds an animated background to BetterSEQTA. (May impact battery life)",
+    modifyElement: <Switch onChange={switchChange} /> 
+  },
+  {
+    title: "Animated Background Speed",
+    description: "Controls the speed of the animated background.",
+    modifyElement: <Switch onChange={switchChange} /> 
+  },
+  {
+    title: "Custom Theme Colour",
+    description: "Customise the overall theme colour of SEQTA Learn.",
+    modifyElement: <ColorPicker />
+  },
+  {
+    title: "BetterSEQTA+", 
+    description: "Unlocks premium features.",
+    modifyElement: <Switch onChange={switchChange} />
+  }
+]

 function App() {
-  const switchChange = (isOn: boolean) => {
-    console.log(isOn)
-  }

  return (
    <div className="flex flex-col gap-2 dark:bg-zinc-800">
-      <Switch onChange={switchChange} />
-      <div className="w-48">
-        <Slider onValueChange={(value) => console.log(value)} />
+      <div className="grid border-b border-b-zinc-200 place-items-center h-1/2">
+        <img src={logo} className="w-4/5 dark:hidden" />
+        <img src={logoDark} className="hidden w-4/5 dark:block" />
      </div>
-      <Switch onChange={switchChange} />
-      <Switch onChange={switchChange} />
-      <Switch onChange={switchChange} />
-      <Switch onChange={switchChange} />
-      <Switch onChange={switchChange} />
-      <Switch onChange={switchChange} />
+      {settings.map((setting, index) => (
+        <div className="flex justify-between px-4 place-items-center" key={index}>
+          <div className="dark:text-white">
+            <h2 className="text-sm font-bold">{setting.title}</h2>
+            <p className="text-xs">{setting.description}</p>
+          </div>
+          <div>
+            {setting.modifyElement}
+          </div>
+        </div>
+      ))}
    </div>
  )
 }

-export default App
+export default App
@@ -0,0 +1,43 @@
+// TODO: Create types for ColorPicker
+// @ts-expect-error No typescript declarations available
+import ColorPicker from 'react-best-gradient-color-picker';
+import { useState, useRef, useEffect } from 'react';
+
+const Picker = (): JSX.Element => {
+  const [color, setColor] = useState<string>('rgba(255,20,255,1)');
+  const [showPicker, setShowPicker] = useState<boolean>(false);
+  const pickerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) {
+        setShowPicker(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [pickerRef]);
+
+  return (
+    <div className="relative" ref={pickerRef}>
+      <button
+        onClick={() => setShowPicker(!showPicker)}
+        style={{
+          'background': color
+        }}
+        className="w-16 h-8 rounded-md"
+      ></button>
+      <div className="absolute top-0 right-0 z-10 p-2 bg-white border rounded-lg shadow-2xl border-zinc-200">
+        { showPicker &&
+          <ColorPicker value={color} onChange={setColor} />
+        }
+      </div>
+    </div>
+  );
+};
+
+export default Picker;
@@ -0,0 +1,21 @@
+.range-slider{
+	margin: 20px;
+	appearance: none;
+	outline: none;
+	width: 150px;
+	height: 3px;
+	border-radius: 5px;
+	background-color: #ccc;
+}
+
+.range-slide::-webkit-slider-runnable-track{
+	background-color: #4BD663 !important;
+}
+.range-slider::-webkit-slider-thumb {
+  background: #fafafa;
+  appearance: none;
+  box-shadow: 1px 2px 26px 1px #bdbdbd;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+}
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import "./Slider.css";

 interface Slider {
  onValueChange: (value: number) => void;
@@ -25,7 +26,7 @@ const Slider: React.FC<Slider> = ({ onValueChange }) => {
        value={sliderValue}
        onChange={handleInputChange}
        onMouseUp={handleMouseUp}
-        className="absolute w-full h-1.5 bg-gray-300 rounded-full cursor-pointer focus:outline-none"
+        className="absolute w-full h-1 rounded-full cursor-pointer range-slider focus:outline-none"
      />
    </div>
  );