Added import modal

src/components/Import/index.tsx

@@ -0,0 +1,73 @@
+import { Modal } from "../Modal";
+import { useState } from "preact/hooks";
+
+export const Import = () => {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+        <>
+            <a
+                class="show-modal"
+                data-modal="chooseTimezoneModal"
+                onClick={() => {
+                    setModalOpen(true);
+                }}
+            >
+                <span class="icon">
+                    <i class="fas fa-exchange"></i>
+                </span>{" "}
+                Import/Export
+            </a>
+            {modalOpen && <ImportModal setModalOpen={setModalOpen} />}
+        </>
+    );
+};
+
+const ImportModal = ({ setModalOpen }) => {
+    return (
+        <Modal
+            setModalOpen={setModalOpen}
+            title={
+                <>
+                    Import/Export Manager{" "}
+                    <a href="/help/iemanager">
+                        <span>
+                            <i class="fa fa-question-circle"></i>
+                        </span>
+                    </a>
+                </>
+            }
+        >
+            <>
+                <div class="control">
+                    <div class="field">
+                        <label>
+                            <input
+                                type="radio"
+                                class="default-width"
+                                name="exportSelect"
+                                value="reminders"
+                                checked
+                            />
+                            Reminders
+                        </label>
+                    </div>
+                </div>
+                <br />
+                <div class="has-text-centered">
+                    <div style="color: red">
+                        Please first read the <a href="/help/iemanager">support page</a>
+                    </div>
+                    <button class="button is-success is-outlined" id="import-data">
+                        Import Data
+                    </button>
+                    <button class="button is-success" id="export-data">
+                        Export Data
+                    </button>
+                </div>
+                <a id="downloader" download="export.csv" class="is-hidden"></a>
+                <input id="uploader" type="file" hidden></input>
+            </>
+        </Modal>
+    );
+};

src/components/Modal/index.tsx

@@ -3,7 +3,7 @@ import { createPortal } from "preact/compat";
 
 type Props = {
     setModalOpen: (open: boolean) => never;
-    title: string;
+    title: string | JSX.Element;
     onSubmitText?: string;
     onSubmit?: () => void;
     children: string | JSX.Element | JSX.Element[] | (() => JSX.Element);

src/components/Reminder/Embed/Fields/Field.tsx

@@ -18,19 +18,21 @@ export const Field = ({ title, value, inline, index, onUpdate }) => {
                             title: ev.currentTarget.value,
                         })
                     }
-                ></textarea>
+                />
-                <button
+                {(value !== "" || title !== "") && (
-                    class="button is-small inline-btn"
+                    <button
-                    onClick={() => {
+                        class="button is-small inline-btn"
-                        onUpdate({
+                        onClick={() => {
-                            index,
+                            onUpdate({
-                            inline: !inline,
+                                index,
-                        });
+                                inline: !inline,
-                    }}
+                            });
-                >
+                        }}
-                    <span class="is-sr-only">Toggle field inline</span>
+                    >
-                    <i class="fas fa-arrows-h"></i>
+                        <span class="is-sr-only">Toggle field inline</span>
-                </button>
+                        <i class="fas fa-arrows-h"></i>
+                    </button>
+                )}
             </div>
 
             <label class="is-sr-only" for="embedFieldValue">

src/components/Reminder/Embed/index.tsx

@@ -53,8 +53,8 @@ export const Embed = () => {
                                 embed_description: description,
                             }))
                         }
-                    ></Description>
+                    />
-                    <br></br>
+                    <br />
 
                     <Fields />
                 </div>
@@ -66,7 +66,7 @@ export const Embed = () => {
                             url={reminder.embed_thumbnail_url}
                             alt="Square thumbnail embedded image"
                             setImage={() => {}}
-                        ></ImagePicker>
+                        />
                     </p>
                 </div>
             </div>
@@ -77,14 +77,14 @@ export const Embed = () => {
                     url={reminder.embed_image_url}
                     alt="Large embedded image"
                     setImage={() => {}}
-                ></ImagePicker>
+                />
             </p>
 
             <Footer
                 footer={reminder.embed_footer}
                 icon={reminder.embed_footer_url}
                 setReminder={setReminder}
-            ></Footer>
+            />
         </div>
     );
 };

src/components/Sidebar/index.tsx

@@ -7,6 +7,7 @@ import { GuildEntry } from "./GuildEntry";
 import { fetchUserGuilds, GuildInfo } from "../../api";
 import { useState } from "preact/hooks";
 import { TimezonePicker } from "../TimezonePicker";
+import { Import } from "../Import";
 
 type ContentProps = {
     guilds: GuildInfo[];
@@ -28,12 +29,7 @@ const SidebarContent = ({ guilds }: ContentProps) => {
                     <p class="menu-label">Options</p>
                     <ul class="menu-list">
                         <li>
-                            <a class="show-modal" data-modal="dataManagerModal">
+                            <Import />
-                                <span class="icon">
-                                    <i class="fas fa-exchange"></i>
-                                </span>{" "}
-                                Import/Export
-                            </a>
                             <TimezonePicker />
                             <a href="/login/discord/logout">
                                 <span class="icon">