Cleanup

reminder-dashboard/src/components/Reminder/ImagePicker.tsx

@@ -88,10 +88,11 @@ const ImagePickerModal = ({ setModalOpen, setImage, url, uploadsEnabled, dropped
     const uploadInProgress = useRef(false);
 
     const upload = async (files: File[]) => {
+        setBlocked(false);
         if (!uploadsEnabled || uploadInProgress.current) return;
         setError("");
         if (files.length !== 1) {
-            setError("Please upload one image at a time.");
+            setError("Please upload only one image.");
             return;
         }
         const file = files[0];
@@ -128,27 +129,6 @@ const ImagePickerModal = ({ setModalOpen, setImage, url, uploadsEnabled, dropped
         if (droppedFiles) void upload(droppedFiles);
     }, [droppedFiles]);
 
-    if (blocked) {
-        return (
-            <Modal
-                setModalOpen={() => setBlocked(false)}
-                title="Image upload blocked"
-                onSubmit={() => setBlocked(false)}
-                onSubmitText="OK"
-            >
-                <p>
-                    This image was flagged as potentially NSFW. Unfortunately, due to the UK's
-                    Online Safety Act, we cannot handle explicit content. Please defer to using
-                    Imgur or another image storage platform who have the resources to deal with
-                    idiotic laws.
-                </p>
-                <p>
-                    The image you attempted to upload <strong>has not been stored.</strong>
-                </p>
-            </Modal>
-        );
-    }
-
     return (
         <Modal
             setModalOpen={setModalOpen}
@@ -180,6 +160,7 @@ const ImagePickerModal = ({ setModalOpen, setImage, url, uploadsEnabled, dropped
                     {...handlers}
                     class={`mt-4 image-upload-dropzone ${dragging ? "image-picker-dragging" : ""}`}
                 >
+                    <p>or…</p>
                     <input
                         ref={fileInput}
                         type="file"
@@ -203,8 +184,22 @@ const ImagePickerModal = ({ setModalOpen, setImage, url, uploadsEnabled, dropped
                     </button>
                     <p class="help">Or drag and drop an image here.</p>
                     <p class="help">
-                        PNG, JPEG, GIF or WebP, up to 8 MiB. All uploads are converted to PNGs.
+                        Static PNG, JPEG, GIF or WebP, up to 8 MiB. All uploads are converted to
+                        PNGs.
                     </p>
+                    {blocked && (
+                        <>
+                            <p class="help" style="color: red;">
+                                This image was flagged as potentially NSFW. Unfortunately, due to
+                                the UK's Online Safety Act, we cannot handle explicit content.
+                                Please defer to using Imgur or another image storage platform who
+                                have the resources to deal with idiotic laws.
+                            </p>
+                            <p class="help" style="color: red;">
+                                The image you attempted to upload has not been stored.
+                            </p>
+                        </>
+                    )}
                     {uploading && <p role="status">Uploading image…</p>}
                 </div>
             )}