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

src/SEQTA.js

@@ -9,7 +9,7 @@ import loading, { AppendLoadingSymbol } from "./seqta/ui/Loading.js";
 // Icons
 import assessmentsicon from "./seqta/icons/assessmentsIcon.js";
 import coursesicon from "./seqta/icons/coursesIcon.js";
-import StorageListener from "./seqta/utils/StorageListener";
+import StorageListener from "./seqta/utils/StorageListener.js";
 
 let isChrome = window.chrome;
 let SettingsClicked = false;
@@ -691,10 +691,17 @@ export function ColorLuminance(color, lum = 0) {
   if (color.includes("gradient")) {
     let gradient = color;
 
-    // Find and replace all instances of RGBA in the gradient
+    // Create a set to hold unique RGBA strings
+    let uniqueRgbaSet = new Set();
+
+    // Find all instances of RGBA in the gradient
     let match;
     while ((match = rgbaRegex.exec(color)) !== null) {
-      const rgbaString = match[1];
+      uniqueRgbaSet.add(match[1]);  // Add the unique RGBA string to the set
+    }
+
+    // Loop through each unique RGBA string
+    for (let rgbaString of uniqueRgbaSet) {
       const [r, g, b, a] = rgbaString.split(",").map(str => str.trim());
 
       // Apply the original luminance adjustment logic
@@ -705,8 +712,9 @@ export function ColorLuminance(color, lum = 0) {
       }
       adjustedRgba.push(a);  // Add the alpha component back
 
-      // Replace the original RGBA string with the adjusted one
+      // Replace all occurrences of the original RGBA string with the adjusted one
-      gradient = gradient.replace(`rgba(${rgbaString})`, `rgba(${adjustedRgba.join(", ")})`);
+      const regex = new RegExp(`rgba\\(${rgbaString}\\)`, "g");
+      gradient = gradient.replace(regex, `rgba(${adjustedRgba.join(", ")})`);
     }
 
     return gradient;
@@ -1280,261 +1288,13 @@ function CallExtensionSettings() {
   fileref.setAttribute("href", cssFile);
   document.head.append(fileref);
 
-  /*let Settings =
+  let Settings =
-    stringToHTML(
-      String.raw`
-      <div class="outside-container hidden" id="ExtensionPopup"><div class="logo-container"><img src=${chrome.runtime.getURL(
-    "icons/betterseqta-light-full.png",
-  )}></div>
-  <div class="main-page" id="mainpage">
-      <div class="topmenu">
-        <div class="navitem activenav" id="miscsection">Settings</div>
-        <div class="navitem" id="shortcutsection">Shortcuts</div>
-        <div class="navitem" id="aboutsection">About</div>
-      </div>
-    </div>
-  
-
-  <div class="menu-page hiddenmenu" id="menupage">
-    <div class="selector-container" style="margin-bottom: 0;">
-      <div class="menu-item-selection">
-          <div class="aboutcontainer">
-          <div>
-            <h1 class="addonitem">About</h1>
-            <p class="item subitem">Created and developed and maintained by SethBurkart123</p>
-            <p class="item subitem">BetterSEQTA+ is a fork of the project BetterSEQTA, BetterSEQTA is no longer supported so we are here to fill that gap!</p>
-          </div>
-        </div>
-
-        <div class="aboutcontainer">
-          <div>
-            <a class="aboutlinks" href="https://chrome.google.com/webstore/detail/betterseqta%2B/afdgaoaclhkhemfkkkonemoapeinchel?snuoi" target="_blank">
-              <svg style="width:24px;height:24px" viewBox="0 0 24 24">
-                <path fill="currentColor" d="M12,20L15.46,14H15.45C15.79,13.4 16,12.73 16,12C16,10.8 15.46,9.73 14.62,9H19.41C19.79,9.93 20,10.94 20,12A8,8 0 0,1 12,20M4,12C4,10.54 4.39,9.18 5.07,8L8.54,14H8.55C9.24,15.19 10.5,16 12,16C12.45,16 12.88,15.91 13.29,15.77L10.89,19.91C7,19.37 4,16.04 4,12M15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9A3,3 0 0,1 15,12M12,4C14.96,4 17.54,5.61 18.92,8H12C10.06,8 8.45,9.38 8.08,11.21L5.7,7.08C7.16,5.21 9.44,4 12,4M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
-            </svg>
-              Chrome Webstore
-            </a>
-
-          </div>
-        </div>
-        <div class="aboutcontainer">
-          <div>
-
-          </div>
-        </div>
-
-        <div class="aboutcontainer" style="color: rgb(155, 155, 155); font-size: 14px; margin-top: 7px;">
-        <p>Contact: <a href="https://github.com/SethBurkart123/EvenBetterSEQTA/issues">Open an issue on my github</a></p>
-        </div>
-
-      </div>
-    </div>
-  </div>
-
-  <div class="menu-page hiddenmenu" id="shortcutpage">
-    <div class="selector-container" style="margin-bottom: 0; max-height: 17em; overflow-y:hidden;">
-      <div>
-        <div class="custom-shortcuts-button custom-shortcuts-buttons">Create Custom Shortcut</div>
-        <div class="custom-shortcuts-container">
-          <label for="shortcutname" class="custom-shortcuts-label">Shortcut Name:</label>
-          <input type="text" id="shortcutname" name="shortcutname" class="custom-shortcuts-field" placeholder="e.g. Google" maxlength="20">
-          <label for="shortcuturl" class="custom-shortcuts-label">URL:</label>
-          <input type="text" id="shortcuturl" name="shortcuturl" class="custom-shortcuts-field" placeholder="e.g. https://www.google.com">
-          <div class="custom-shortcuts-submit custom-shortcuts-buttons">Create</div>
-        </div>
-      </div>
-      <div class="menu-item-selection menushortcut">
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">YouTube</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox" id="youtube">
-            <label for="youtube" class="onoffswitch-label"></label>
-          </div>
-        </div>
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">Outlook</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox" id="outlook">
-            <label for="outlook" class="onoffswitch-label"></label>
-          </div>
-        </div>
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">Office</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox" id="office">
-            <label for="office" class="onoffswitch-label"></label>
-          </div>
-        </div>
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">Spotify</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox" id="spotify">
-            <label for="spotify" class="onoffswitch-label"></label>
-          </div>
-        </div>
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">Google</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox" id="google">
-            <label for="google" class="onoffswitch-label"></label>
-          </div>
-        </div>
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">DuckDuckGo</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
-              id="duckduckgo">
-              <label for="duckduckgo" class="onoffswitch-label"></label>
-            </div>
-        </div>
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">Cool Math Games</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
-              id="coolmathgames">
-              <label for="coolmathgames" class="onoffswitch-label"></label>
-            </div>
-        </div>
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">SACE</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox" id="sace">
-            <label for="sace" class="onoffswitch-label"></label>
-          </div>
-        </div>
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">Google Scholar</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox"
-              id="googlescholar">
-              <label for="googlescholar" class="onoffswitch-label"></label>
-            </div>
-        </div>
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">Gmail</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox" id="gmail">
-            <label for="gmail" class="onoffswitch-label"></label>
-          </div>
-        </div>
-        <div class="item-container menushortcuts">
-          <div class="text-container">
-            <h1 class="addonitem">Netflix</h1>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification shortcutitem" type="checkbox" id="netflix">
-            <label for="netflix" class="onoffswitch-label"></label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="menu-page" id="miscpage">
-    <div class="selector-container" style="margin-bottom: 0;">
-      <div class="menu-item-selection">
-
-        <div class="item-container">
-          <div class="text-container">
-            <h1 class="addonitem">Notification Collector</h1>
-            <p class="item subitem">Uncaps the 9+ limit for notifications, showing the real number.</p>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="notification">
-          <label for="notification" class="onoffswitch-label"></label>
-          </div>
-        </div>
-
-
-        <div class="item-container">
-          <div class="text-container">
-            <h1 class="addonitem">Lesson Alerts</h1>
-            <p class="item subitem">Sends a native browser notification ~5 minutes prior to lessons.</p>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="lessonalert">
-            <label for="lessonalert" class="onoffswitch-label"></label>
-          </div>
-        </div>
-
-        <div class="item-container">
-          <div class="text-container">
-            <h1 class="addonitem">Animated Background</h1>
-            <p class="item subitem">Adds an animated background to BetterSEQTA. (May impact battery life)</p>
-          </div>
-          <div class="onoffswitch"><input class="onoffswitch-checkbox notification" type="checkbox" id="animatedbk">
-          <label for="animatedbk" class="onoffswitch-label"></label>
-          </div>
-        </div>
-
-        <div class="item-container">
-          <div class="text-container">
-            <h1 class="addonitem">Animated Background Speed</h1>
-            <p class="item subitem">Controls the speed of the animated background.</p>
-          </div>
-          <div class="bkslider">
-            <input type="range" id="bksliderinput" name="Animated Background Slider" min="1" max="200" />
-          </div>
-        </div>
-
-        <div class="item-container">
-          <div class="text-container">
-            <h1 class="addonitem">Custom Theme Colour</h1>
-            <p class="item subitem">Customise the overall theme colour of SEQTA Learn.</p>
-          </div>
-          <div class="clr-field" style="justify-content: end; display: flex; margin: 5px;">
-            <button aria-labelledby="clr-open-label" style="width: 51px; right: 0px; border: 1px solid white;"></button>
-            <input type="text" id="colorpicker" class="coloris" style="width: 42px; border-radius: 3px;" />
-          </div>
-        </div>
-
-
-        <div class="item-container" style="height: 2em; margin-top: 0px; margin-bottom: 24px;">
-          <div class="text-container">
-            <h1 class="addonitem">BetterSEQTA+</h1>
-          </div>
-          <div class="onoffswitch" style="margin-bottom: 0px;"><input class="onoffswitch-checkbox notification" type="checkbox" id="onoff">
-            <label for="onoff" class="onoffswitch-label"></label>
-          </div>
-        </div>
-
-
-      </div>
-    </div>
-  </div>
-
-
-
-
-  <div class="bottom-container">
-    <div class="applychanges" id="applychanges" style="height: 25px;">
-      <div style="margin-top:0px;">
-      <h5>Unsaved Changes</h5>
-      <h6>Click to apply.</h6>
-      </div>
-    </div>
-
-    <div></div>
-
-    <div style="position: absolute; background: #131313; bottom: 15px; right: 0px; color: rgb(177, 177, 177); display: flex; align-items: center; width: 100%; justify-content: space-between;">
-      <p style="margin: 0; flex: 1; padding-left: 24px; margin-right: 5px; color: white;">By SethBurkart123</p>
-      <button style="margin: 0; margin-right: 20px; cursor:pointer; padding: 8px 10px; background: #ff5f5f; color:#1a1a1a;font-weight: 500; border-radius: 10px;" id="whatsnewsettings">Changelog v${chrome.runtime.getManifest().version}</button>
-    </div>
-  </div></div>`);*/
-  let Settings2 =
   stringToHTML(
     String.raw`
     <div class="outside-container hide" id="ExtensionPopup">
     </div>
     `);
-  document.body.append(Settings2.firstChild);
+  document.body.append(Settings.firstChild);
 
   // add an iframe to the div: <iframe src="interface/index.html"></iframe>
   let iframe = document.createElement("iframe");
@@ -2938,9 +2698,8 @@ function SendHomePage() {
     currentSelectedDate = new Date();
 
     // Creates the root of the home page added to the main div
-    var htmlStr = "<div class=\"home-root\"><div class=\"home-container\" id=\"home-container\"></div></div>";
+    var html = stringToHTML("<div class=\"home-root\"><div class=\"home-container\" id=\"home-container\"></div></div>");
-
+    
-    var html = stringToHTML(htmlStr);
     // Appends the html file to main div
     // Note : firstChild of html is done due to needing to grab the body from the stringToHTML function
     main.append(html.firstChild);

src/inject/injected.css

@@ -1171,6 +1171,7 @@ div > ol:has(.uiFileHandlerWrapper) {
 
 .Avatar__Avatar___gE5kx.Avatar__staff___4gVLs {
   --person-colour: var(--better-light);
+  background: var(--person-colour, var(--navy));
 }
 
 .LabelList__LabelList___2RJFf > li.LabelList__selected___3Egk7 {

src/seqta/utils/StorageListener.js

@@ -1,5 +1,5 @@
 /* global chrome */
-import { lightenAndPaleColor, GetThresholdofHex, ColorLuminance, CreateCustomShortcutDiv, RemoveCustomShortcutDiv } from "../../SEQTA";
+import { lightenAndPaleColor, GetThresholdofHex, ColorLuminance, CreateCustomShortcutDiv, RemoveCustomShortcutDiv } from "../../SEQTA.js";
 
 export default function StorageListener() {
   chrome.storage.onChanged.addListener(function (changes) {