From 03ffe22fbb116fc1b258082c15b9caeb3419a096 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Thu, 19 Sep 2024 15:58:06 +1000
Subject: [PATCH] feat(ColourPicker): add dark mode to the colour picker

---
 package.json                                  |  4 +-
 .../components/ColourPicker.css               | 83 +++++++++++++++++++
 .../components/ColourPicker.svelte            |  2 +-
 .../components/utils/ReactAdapter.svelte      | 10 +--
 src/svelte-interface/index.css                |  2 +
 5 files changed, 91 insertions(+), 10 deletions(-)
 create mode 100644 src/svelte-interface/components/ColourPicker.css

diff --git a/package.json b/package.json
index 844fff32..209dd05f 100644
--- a/package.json
+++ b/package.json
@@ -85,9 +85,9 @@
     "motion": "^10.18.0",
     "postcss": "^8.4.45",
     "publish-browser-extension": "^2.2.1",
-    "react": "^18.3.1",
+    "react": "17",
     "react-best-gradient-color-picker": "^3.0.10",
-    "react-dom": "^18.3.1",
+    "react-dom": "17",
     "react-error-boundary": "^4.0.13",
     "react-router-dom": "^6.26.2",
     "react-shadow-root": "^6.2.0",
diff --git a/src/svelte-interface/components/ColourPicker.css b/src/svelte-interface/components/ColourPicker.css
new file mode 100644
index 00000000..825624c1
--- /dev/null
+++ b/src/svelte-interface/components/ColourPicker.css
@@ -0,0 +1,83 @@
+.dark {
+  div:has(> #rbgcp-wrapper) {
+    background: transparent !important;
+  }
+
+  #rbgcp-wrapper {
+    div[style="padding-top: 11px; position: relative;"] div {
+      color: white !important;
+    }
+
+    div:has(> #rbgcp-solid-btn),
+    div:has(> #rbgcp-advanced-btn),
+    #rbgcp-color-model-btn > div,
+    #rbgcp-gradient-controls-wrap {
+      background-color: #37373b !important;
+      color: white !important;
+
+      svg {
+        circle {
+          fill: white !important;
+        }
+
+        polyline,
+        line,
+        g,
+        path {
+          stroke: white !important;
+        }
+      }
+
+      #rbgcp-radial-btn,
+      #rbgcp-linear-btn {
+        &[style*="background: white;"] {
+          background-color: #28282B !important;
+        }
+
+        svg {
+          path, g, polyline, circle {
+            stroke: white !important;
+            fill: transparent !important;
+          }
+        }
+      }
+
+      div:has(> #rbgcp-stop-input) svg {
+        path {
+          stroke: unset !important;
+          fill: white !important;
+        }
+      }
+
+      #rbgcp-comparibles-btn svg path {
+        fill: white !important;
+      }
+
+      > div {
+        color: white !important;
+
+        &[style*="background: white;"] {
+          background: #28282b !important;
+        }
+      }
+    }
+
+    div:has(> #rbgcp-degree-input) {
+      width: 70px !important;
+    }
+
+    #rbgcp-degree-input {
+      width: 50px !important;
+    }
+
+    #rbgcp-degree-input,
+    #rbgcp-stop-input {
+      color: white !important;
+    }
+
+    #rbgcp-gradient-controls-wrap > div,
+    #rbgcp-gradient-controls-wrap > div > div:not([role="button"]) {
+      background-color: #37373b !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/svelte-interface/components/ColourPicker.svelte b/src/svelte-interface/components/ColourPicker.svelte
index f61212f0..28118304 100644
--- a/src/svelte-interface/components/ColourPicker.svelte
+++ b/src/svelte-interface/components/ColourPicker.svelte
@@ -13,7 +13,6 @@
   let content: HTMLDivElement;
 
   const closePicker = async () => {
-    // reverse animation
     animate(
       content,
       { scale: [1, 0.4], opacity: [1, 0] },
@@ -26,6 +25,7 @@
       { easing: [0.4, 0, 0.2, 1] }
     );
 
+
     await delay(400);
     hidePicker();
   }
diff --git a/src/svelte-interface/components/utils/ReactAdapter.svelte b/src/svelte-interface/components/utils/ReactAdapter.svelte
index 6cbaffee..2a7de2fc 100644
--- a/src/svelte-interface/components/utils/ReactAdapter.svelte
+++ b/src/svelte-interface/components/utils/ReactAdapter.svelte
@@ -1,17 +1,15 @@
 <script lang="ts">
   import React from "react";
-  import { createRoot } from "react-dom/client";
+  import ReactDOM from "react-dom";
   import { onDestroy, onMount } from "svelte";
 
   const e = React.createElement;
   let container: HTMLDivElement;
-  let root: ReturnType<typeof createRoot>;
 
   onMount(() => {
     const { el, children, class: _, ...props } = $$props;
     try {
-      root = createRoot(container);
-      root.render(e(el, props, children));
+      ReactDOM.render(e(el, props, children), container);
     } catch (err) {
       console.warn(`react-adapter failed to mount.`, { err });
     }
@@ -19,9 +17,7 @@
 
   onDestroy(() => {
     try {
-      if (root) {
-        root.unmount();
-      }
+      ReactDOM.unmountComponentAtNode(container);
     } catch (err) {
       console.warn(`react-adapter failed to unmount.`, { err });
     }
diff --git a/src/svelte-interface/index.css b/src/svelte-interface/index.css
index 7f34c2f4..0f5866fc 100644
--- a/src/svelte-interface/index.css
+++ b/src/svelte-interface/index.css
@@ -1,3 +1,5 @@
+@import './components/ColourPicker.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;