From 32d1affb508212cd588370cc21a1cf58e4859771 Mon Sep 17 00:00:00 2001
From: Martin Fournier <martin@mfournier.com>
Date: Wed, 22 Sep 2021 11:51:13 -0400
Subject: [PATCH] Add material-ui-color picker in theme editor

---
 package.json                      |  1 +
 src/ui/React/ThemeEditorModal.tsx | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/package.json b/package.json
index 636f0e1e7..e86b45496 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "jszip": "^3.7.0",
     "loader-runner": "^2.3.0",
     "loader-utils": "^1.1.0",
+    "material-ui-color": "^1.2.0",
     "mathjax-full": "^3.2.0",
     "mathjax-react": "^1.0.6",
     "memory-fs": "~0.4.1",
diff --git a/src/ui/React/ThemeEditorModal.tsx b/src/ui/React/ThemeEditorModal.tsx
index aaf1bd130..826bebdc2 100644
--- a/src/ui/React/ThemeEditorModal.tsx
+++ b/src/ui/React/ThemeEditorModal.tsx
@@ -6,6 +6,7 @@ import TextField from "@mui/material/TextField";
 import DoneIcon from "@mui/icons-material/Done";
 import IconButton from "@mui/material/IconButton";
 import ReplyIcon from "@mui/icons-material/Reply";
+import { Color, ColorPicker } from "material-ui-color";
 import { ThemeEvents } from "./Theme";
 import { Settings, defaultSettings } from "../../Settings/Settings";
 
@@ -30,9 +31,15 @@ function ColorEditor({ name }: { name: string }): React.ReactElement {
     setColor(defaultSettings.theme[name]);
     ThemeEvents.emit();
   }
+
   function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
     setColor(event.target.value);
   }
+
+  function onColorPickerChange(newValue: Color): void {
+    setColor("#" + newValue.hex.toLowerCase());
+  }
+
   return (
     <>
       <TextField
@@ -42,6 +49,15 @@ function ColorEditor({ name }: { name: string }): React.ReactElement {
         onChange={onChange}
         variant="standard"
         InputProps={{
+          startAdornment: (
+            <>
+              <ColorPicker
+                hideTextfield
+                value={color}
+                onChange={onColorPickerChange}
+              />
+            </>
+          ),
           endAdornment: (
             <>
               <IconButton onClick={set} disabled={!valid}>