Improve parity

Portal modals to body. Pad timezone buttons. Add initial attachment
support. Default username/avatar

src/components/App/TimezoneProvider.tsx

@@ -1,14 +1,14 @@
 import { createContext } from "preact";
 import { useContext } from "preact/compat";
 import { useState } from "preact/hooks";
-import { SystemZone } from "luxon";
+import { DateTime } from "luxon";
 
 type TTimezoneContext = [string, (tz: string) => void];
 
 const TimezoneContext = createContext(["UTC", () => {}] as TTimezoneContext);
 
 export const TimezoneProvider = ({ children }) => {
-    const [timezone, setTimezone] = useState(SystemZone.name);
+    const [timezone, setTimezone] = useState(DateTime.now().zoneName);
 
     return (
         <TimezoneContext.Provider value={[timezone, setTimezone]}>

src/components/Modal/index.tsx

@@ -1,4 +1,5 @@
 import { JSX } from "preact";
+import { createPortal } from "preact/compat";
 
 type Props = {
     setModalOpen: (open: boolean) => never;
@@ -9,7 +10,9 @@ type Props = {
 };
 
 export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }: Props) => {
-    return (
+    const body = document.querySelector("body");
+
+    return createPortal(
         <div class="modal is-active">
             <div
                 class="modal-background"
@@ -52,6 +55,7 @@ export const Modal = ({ setModalOpen, title, onSubmit, onSubmitText, children }:
                     setModalOpen(false);
                 }}
             ></button>
-        </div>
+        </div>,
+        body,
     );
 };

src/components/Reminder/Attachment.tsx

@@ -1,12 +1,39 @@
 import { useReminder } from "./ReminderContext";
 
 export const Attachment = () => {
-    const [{ attachment, attachment_name }, setReminder] = useReminder();
+    const [{ attachment_name }, setReminder] = useReminder();
 
     return (
         <div class="file is-small is-boxed">
             <label class="file-label">
-                <input class="file-input" type="file" name="attachment"></input>
+                <input
+                    class="file-input"
+                    type="file"
+                    name="attachment"
+                    onInput={async (ev) => {
+                        const input = ev.currentTarget;
+
+                        let file = input.files[0];
+
+                        if (file.size >= 8 * 1024 * 1024) {
+                            return { error: "File too large." };
+                        }
+
+                        let attachment: string = await new Promise((resolve) => {
+                            let fileReader = new FileReader();
+                            fileReader.onload = () => resolve(fileReader.result as string);
+                            fileReader.readAsDataURL(file);
+                        });
+                        attachment = attachment.split(",")[1];
+                        const attachment_name = file.name;
+
+                        setReminder((reminder) => ({
+                            ...reminder,
+                            attachment,
+                            attachment_name,
+                        }));
+                    }}
+                ></input>
                 <span class="file-cta">
                     <span class="file-label">{attachment_name || "Add Attachment"}</span>
                     <span class="file-icon">

src/components/Reminder/Message.tsx

@@ -14,7 +14,7 @@ export const Message = () => {
                     <p class="image is-32x32 customizable">
                         <ImagePicker
                             class="is-rounded avatar"
-                            url={reminder.avatar}
+                            url={reminder.avatar || "/static/img/icon.png"}
                             alt="Image for discord avatar"
                             setImage={(url: string) => {
                                 setReminder((reminder) => ({

src/components/Reminder/TimeInput.tsx

@@ -53,7 +53,7 @@ export const TimeInput = ({ defaultValue, onInput }) => {
                             type="text"
                             pattern="\d*"
                             maxlength={4}
-                            placeholder="2023"
+                            placeholder="YYYY"
                             value={time?.year.toLocaleString("en-US", {
                                 minimumIntegerDigits: 4,
                                 useGrouping: false,
@@ -76,7 +76,7 @@ export const TimeInput = ({ defaultValue, onInput }) => {
                             type="text"
                             pattern="\d*"
                             maxlength={2}
-                            placeholder="12"
+                            placeholder="MM"
                             value={time?.month.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
                             onBlur={(ev) => {
                                 setTime(time.set({ month: ev.currentTarget.value }));
@@ -96,7 +96,7 @@ export const TimeInput = ({ defaultValue, onInput }) => {
                             type="text"
                             pattern="\d*"
                             maxlength={2}
-                            placeholder="25"
+                            placeholder="DD"
                             value={time?.day.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
                             onBlur={(ev) => {
                                 setTime(time.set({ day: ev.currentTarget.value }));
@@ -115,7 +115,7 @@ export const TimeInput = ({ defaultValue, onInput }) => {
                             type="text"
                             pattern="\d*"
                             maxlength={2}
-                            placeholder="12"
+                            placeholder="hh"
                             value={time?.hour.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
                             onBlur={(ev) => {
                                 setTime(time.set({ hour: ev.currentTarget.value }));
@@ -135,7 +135,7 @@ export const TimeInput = ({ defaultValue, onInput }) => {
                             type="text"
                             pattern="\d*"
                             maxlength={2}
-                            placeholder="30"
+                            placeholder="mm"
                             value={time?.minute.toLocaleString("en-US", {
                                 minimumIntegerDigits: 2,
                             })}
@@ -157,7 +157,7 @@ export const TimeInput = ({ defaultValue, onInput }) => {
                             type="text"
                             pattern="\d*"
                             maxlength={2}
-                            placeholder="00"
+                            placeholder="ss"
                             value={time?.second.toLocaleString("en-US", {
                                 minimumIntegerDigits: 2,
                             })}

src/components/Reminder/Username.tsx

@@ -11,8 +11,8 @@ export const Username = () => {
                 placeholder="Username Override"
                 maxlength={32}
                 name="username"
-                value={reminder.username}
+                value={reminder.username || "Reminder"}
-                onInput={(ev) => {
+                onBlur={(ev) => {
                     setReminder((reminder) => ({
                         ...reminder,
                         username: ev.currentTarget.value,

src/components/TimezonePicker/index.tsx

@@ -52,7 +52,7 @@ export const TimezonePicker = () => {
 };
 
 const TimezoneModal = ({ setModalOpen }) => {
-    const browserTimezone = SystemZone.name;
+    const browserTimezone = DateTime.now().zoneName;
     const [selectedZone, setSelectedZone] = useTimezone();
 
     const queryClient = useQueryClient();
@@ -69,11 +69,10 @@ const TimezoneModal = ({ setModalOpen }) => {
             <p>
                 Your configured timezone is:{" "}
                 <TimezoneDisplay timezone={selectedZone}></TimezoneDisplay>
-                <br></br>
+                <br />
-                <br></br>
                 Your browser timezone is:{" "}
                 <TimezoneDisplay timezone={browserTimezone}></TimezoneDisplay>
-                <br></br>
+                <br />
                 {!isError && (
                     <>
                         Your bot timezone is:{" "}
@@ -89,6 +88,9 @@ const TimezoneModal = ({ setModalOpen }) => {
             <div class="has-text-centered">
                 <button
                     class="button is-success"
+                    style={{
+                        margin: "2px",
+                    }}
                     id="set-browser-timezone"
                     onClick={() => {
                         setSelectedZone(browserTimezone);
@@ -102,6 +104,9 @@ const TimezoneModal = ({ setModalOpen }) => {
                 <button
                     class="button is-success"
                     id="set-bot-timezone"
+                    style={{
+                        margin: "2px",
+                    }}
                     onClick={() => {
                         setSelectedZone(data.timezone);
                     }}
@@ -114,6 +119,9 @@ const TimezoneModal = ({ setModalOpen }) => {
                 <button
                     class="button is-warning"
                     id="update-bot-timezone"
+                    style={{
+                        margin: "2px",
+                    }}
                     onClick={() => {
                         userInfoMutation.mutate(browserTimezone);
                     }}