chore(ui): add react gradient colour picker

src/svelte-interface/pages/settings.svelte

@@ -10,6 +10,12 @@
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
 
   import { closeSettings, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
+  import ColourPicker from '../components/ColourPicker.svelte'
+
+
+  const openColourPicker = () => {
+    showColourPicker = true;
+  }
 
   const openChangelog = () => {
     OpenWhatsNewPopup();
@@ -22,6 +28,7 @@
   };
     
   let { standalone = false } = $props<{ standalone?: boolean }>();
+  let showColourPicker = $state<boolean>(false);
 
   onMount(() => {
     if (!standalone) return;
@@ -38,12 +45,17 @@
       <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" />
       <button onclick={openChangelog} class="absolute right-0 w-8 h-8 text-lg rounded-xl font-IconFamily top-1 bg-zinc-100 dark:bg-zinc-700"></button>
       <button onclick={openAbout} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">ⓘ</button>
+      <!-- <button onclick={() => showColourPicker = true} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">ⓘ</button> -->
     </div>
 
     <TabbedContainer tabs={[
-      { title: 'Settings', Content: Settings },
+      { title: 'Settings', Content: Settings, props: { showColourPicker: openColourPicker } },
       { title: 'Shortcuts', Content: Shortcuts },
       { title: 'Themes', Content: Theme },
     ]} />
   </div>
+
+  {#if showColourPicker}
+    <ColourPicker hidePicker={() => { showColourPicker = false }} />
+  {/if}
 </div>

src/svelte-interface/pages/settings/general.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import Switch from "../../components/Switch.svelte"
   import Button from "../../components/Button.svelte"
-  import PickerSwatch from "../../components/PickerSwatch.svelte"
   import Slider from "../../components/Slider.svelte"
 
   import browser from "webextension-polyfill"
   
   import type { SettingsList } from "@/svelte-interface/types/SettingsProps"
   import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
+  import PickerSwatch from "@/svelte-interface/components/PickerSwatch.svelte"
+
+  const { showColourPicker } = $props<{ showColourPicker: () => void }>();
 </script>
 
 {#snippet Setting({ title, description, Component, props }: SettingsList) }
@@ -54,12 +56,15 @@
         onChange: (value: number) => settingsState.bksliderinput = `${value}`
       }
     },
-    /* {
+    {
       title: "Custom Theme Colour",
       description: "Customise the overall theme colour of SEQTA Learn.",
       id: 4,
-      Component: PickerSwatch
-    }, */
+      Component: PickerSwatch,
+      props: {
+        onClick: showColourPicker
+      }
+    },
     {
       title: "Edit Sidebar Layout",
       description: "Customise the sidebar layout.",