Cleanup

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

@@ -88,11 +88,10 @@ 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 only one image.");
+            setError("Please upload one image at a time.");
             return;
         }
         const file = files[0];
@@ -129,6 +128,27 @@ 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}
@@ -160,7 +180,6 @@ 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"
@@ -184,22 +203,8 @@ const ImagePickerModal = ({ setModalOpen, setImage, url, uploadsEnabled, dropped
                     </button>
                     <p class="help">Or drag and drop an image here.</p>
                     <p class="help">
-                        Static PNG, JPEG, GIF or WebP, up to 8 MiB. All uploads are converted to
+                        PNG, JPEG, GIF or WebP, up to 8 MiB. All uploads are converted to PNGs.
-                        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>
             )}