Color picker

src/components/EditReminder/Embed/Color.tsx

@@ -0,0 +1,91 @@
+import { useState } from "preact/hooks";
+import { HexColorPicker } from "react-colorful";
+
+export const Color = ({ color: colorProp, onChange }) => {
+    const [modalOpen, setModalOpen] = useState(false);
+    const [color, setColor] = useState(colorProp);
+
+    return (
+        <>
+            {modalOpen && (
+                <ColorModal
+                    color={color}
+                    setModalOpen={setModalOpen}
+                    onSave={setColor}
+                ></ColorModal>
+            )}
+            <button
+                class="change-color button is-rounded is-small"
+                onClick={() => {
+                    setModalOpen(true);
+                }}
+            >
+                <span class="is-sr-only">Choose embed color</span>
+                <i class="fas fa-eye-dropper"></i>
+            </button>
+        </>
+    );
+};
+
+const ColorModal = ({ setModalOpen, color: colorProp, onSave }) => {
+    const [color, setColor] = useState(colorProp);
+
+    return (
+        <div class="modal is-active" id="pickColorModal">
+            <div
+                class="modal-background"
+                onClick={() => {
+                    setModalOpen(false);
+                }}
+            ></div>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <label class="modal-card-title" for="colorInput">
+                        Select Color
+                    </label>
+                    <button
+                        class="delete close-modal"
+                        aria-label="close"
+                        onClick={() => {
+                            setModalOpen(false);
+                        }}
+                    ></button>
+                </header>
+                <section class="modal-card-body">
+                    <div class="colorpicker-container">
+                        <HexColorPicker color={color} onChange={setColor}></HexColorPicker>
+                    </div>
+                    <br></br>
+                    <input
+                        class="input"
+                        id="colorInput"
+                        value={color}
+                        onChange={(ev) => {
+                            setColor(ev.currentTarget.value);
+                        }}
+                    ></input>
+                </section>
+                <footer class="modal-card-foot">
+                    <button class="button is-success" onChange={onSave}>
+                        Save
+                    </button>
+                    <button
+                        class="button close-modal"
+                        onClick={() => {
+                            setModalOpen(false);
+                        }}
+                    >
+                        Cancel
+                    </button>
+                </footer>
+            </div>
+            <button
+                class="modal-close is-large close-modal"
+                aria-label="close"
+                onClick={() => {
+                    setModalOpen(false);
+                }}
+            ></button>
+        </div>
+    );
+};

src/components/EditReminder/Embed/Footer.tsx

@@ -0,0 +1,24 @@
+export const Footer = ({ footer, icon }) => (
+    <div class="embed-footer-box">
+        <p class="image is-20x20 customizable">
+            <a>
+                <img
+                    class="is-rounded embed_footer_url"
+                    src={icon || "/static/img/bg.webp"}
+                    alt="Footer profile-like image"
+                ></img>
+            </a>
+        </p>
+        <label class="is-sr-only" for="embedFooter">
+            Embed Footer text
+        </label>
+        <textarea
+            class="discord-embed-footer message-input autoresize "
+            placeholder="Embed Footer..."
+            maxlength={2048}
+            name="embed_footer"
+            rows={1}
+            value={footer}
+        ></textarea>
+    </div>
+);

src/components/EditReminder/Embed/index.tsx

@@ -1,15 +1,14 @@
 import { Author } from "./Author";
 import { Title } from "./Title";
 import { Description } from "./Description";
+import { Footer } from "./Footer";
+import { Color } from "./Color";
 
 export const Embed = ({ reminder }) => {
     return (
         <div class="discord-embed">
             <div class="embed-body">
-                <button class="change-color button is-rounded is-small">
-                    <span class="is-sr-only">Choose embed color</span>
-                    <i class="fas fa-eye-dropper"></i>
-                </button>
+                <Color color={reminder.embed_color} onChange={() => {}}></Color>
                 <div class="a">
                     <Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author>
                     <Title title={reminder.embed_title}></Title>
@@ -73,28 +72,7 @@ export const Embed = ({ reminder }) => {
                 </a>
             </p>
 
-            <div class="embed-footer-box">
-                <p class="image is-20x20 customizable">
-                    <a>
-                        <img
-                            class="is-rounded embed_footer_url"
-                            src="/static/img/bg.webp"
-                            alt="Footer profile-like image"
-                        ></img>
-                    </a>
-                </p>
-
-                <label class="is-sr-only" for="embedFooter">
-                    Embed Footer text
-                </label>
-                <textarea
-                    class="discord-embed-footer message-input autoresize "
-                    placeholder="Embed Footer..."
-                    maxlength={2048}
-                    name="embed_footer"
-                    rows={1}
-                ></textarea>
-            </div>
+            <Footer footer={reminder.embed_footer} icon={reminder.embed_footer_url}></Footer>
         </div>
     );
 };