From 3a1d01d66222ea48c4f9192ce0a588758d5f9767 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Fri, 27 Mar 2026 21:23:04 +0000
Subject: [PATCH] feat: add crop button to features screenshot

---
 src/components/submit-form/index.tsx          |  2 +-
 .../submit-form/switch-file-upload.tsx        | 22 ++++++++-----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/components/submit-form/index.tsx b/src/components/submit-form/index.tsx
index fed91d5..d3222b2 100644
--- a/src/components/submit-form/index.tsx
+++ b/src/components/submit-form/index.tsx
@@ -336,7 +336,7 @@ export default function SubmitForm() {
 					</div>
 
 					<div className="flex flex-col items-center gap-2">
-						<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} hasCrop />
+						<SwitchFileUpload text="a screenshot of your Mii here" image={miiPortraitUri} setImage={setMiiPortraitUri} forceCrop />
 						<SwitchFileUpload text="a screenshot of your Mii's features here" setImage={setMiiFeaturesUri} />
 						<SwitchSubmitTutorialButton />
 					</div>
diff --git a/src/components/submit-form/switch-file-upload.tsx b/src/components/submit-form/switch-file-upload.tsx
index 1bd2fea..419825d 100644
--- a/src/components/submit-form/switch-file-upload.tsx
+++ b/src/components/submit-form/switch-file-upload.tsx
@@ -9,12 +9,12 @@ import CropPortrait from "./crop-portrait";
 
 interface Props {
 	text: string;
-	hasCrop?: boolean;
+	forceCrop?: boolean;
 	image?: string | undefined;
 	setImage: React.Dispatch<React.SetStateAction<string | undefined>>;
 }
 
-export default function SwitchFileUpload({ text, hasCrop = false, image, setImage }: Props) {
+export default function SwitchFileUpload({ text, forceCrop, image, setImage }: Props) {
 	const [isCameraOpen, setIsCameraOpen] = useState(false);
 	const [isCropOpen, setIsCropOpen] = useState(false);
 	const [hasImage, setHasImage] = useState(false);
@@ -27,7 +27,7 @@ export default function SwitchFileUpload({ text, hasCrop = false, image, setImag
 			reader.onload = async (event) => {
 				setImage(event.target!.result as string);
 				setHasImage(true);
-				if (hasCrop) setIsCropOpen(true);
+				if (forceCrop) setIsCropOpen(true);
 			};
 			reader.readAsDataURL(file);
 		},
@@ -36,7 +36,7 @@ export default function SwitchFileUpload({ text, hasCrop = false, image, setImag
 
 	useEffect(() => {
 		if (!isCameraOpen) return;
-		if (hasCrop) setIsCropOpen(true);
+		if (forceCrop) setIsCropOpen(true);
 	}, [isCameraOpen]);
 
 	return (
@@ -61,17 +61,13 @@ export default function SwitchFileUpload({ text, hasCrop = false, image, setImag
 				<Icon icon="mdi:camera" fontSize={20} />
 				Use your camera
 			</button>
-			{hasCrop && (
-				<>
-					<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
-						<Icon icon="material-symbols:crop" fontSize={20} />
-						Crop Image
-					</button>
-					<CropPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} />
-				</>
-			)}
+			<button type="button" aria-label="Crop image" onClick={() => setIsCropOpen(true)} className="pill button gap-2">
+				<Icon icon="material-symbols:crop" fontSize={20} />
+				Crop Image
+			</button>
 
 			<Camera isOpen={isCameraOpen} setIsOpen={setIsCameraOpen} setImage={setImage} />
+			<CropPortrait isOpen={isCropOpen} setIsOpen={setIsCropOpen} image={image} setImage={setImage} />
 		</div>
 	);
 }