From fb83304683423a437429dc4ddf8bd8765bac840f Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 22 May 2021 21:19:40 +0300
Subject: [PATCH] Closes #514 better map planner element locations

---
 components/plans/StageSelector.tsx |  2 +-
 pages/plans.tsx                    | 68 +++++++++++++++---------------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/components/plans/StageSelector.tsx b/components/plans/StageSelector.tsx
index 6b4ef41da..d11d8adc0 100644
--- a/components/plans/StageSelector.tsx
+++ b/components/plans/StageSelector.tsx
@@ -38,7 +38,7 @@ const StageSelector: React.FC<StageSelectorProps> = ({
 }) => {
   const { i18n } = useLingui();
   return (
-    <Box maxW="20rem" m="3rem auto">
+    <Box maxW="20rem" m="0 auto 2rem auto">
       <Select value={currentBackground.stage} onChange={handleChange}>
         {salmonRunStages
           .concat(stages)
diff --git a/pages/plans.tsx b/pages/plans.tsx
index cd27cac1b..de732479b 100644
--- a/pages/plans.tsx
+++ b/pages/plans.tsx
@@ -293,6 +293,39 @@ const MapPlannerPage = () => {
           color={color}
           setColor={setColor}
         />
+
+        <StageSelector
+          handleChange={(e) => {
+            const stage = e.target.value;
+            if (stage === "") {
+              return;
+            }
+
+            if (stage === "Blank") {
+              setBg({ stage });
+              return;
+            }
+
+            const newIsSalmonRunStage = !stages.includes(stage as any);
+            const oldIsSalmonRunStage = !stages.includes(bg.stage as any);
+
+            if (newIsSalmonRunStage === oldIsSalmonRunStage) {
+              setBg({ ...bg, stage });
+              return;
+            }
+
+            if (newIsSalmonRunStage) {
+              setBg({ stage, tide: "mid" });
+              return;
+            }
+
+            setBg({ stage, mode: "SZ", view: "M" });
+          }}
+          currentBackground={bg}
+          changeMode={(mode) => setBg({ ...bg, mode })}
+          changeTide={(tide: "low" | "mid" | "high") => setBg({ ...bg, tide })}
+          changeView={(view: "M" | "R") => setBg({ ...bg, view })}
+        />
         <MapSketch
           sketch={sketch}
           controlledValue={controlledValue}
@@ -301,8 +334,6 @@ const MapPlannerPage = () => {
           tool={tool}
         />
 
-        <ImageAdder addImageToSketch={addImageToSketch} />
-        <Divider mx="3" my={4} />
         <Flex mt={6} mb={2} justifyContent="space-between">
           <Button
             onClick={() => {
@@ -340,38 +371,9 @@ const MapPlannerPage = () => {
             </Button>
           </ButtonGroup>
         </Flex>
-        <StageSelector
-          handleChange={(e) => {
-            const stage = e.target.value;
-            if (stage === "") {
-              return;
-            }
 
-            if (stage === "Blank") {
-              setBg({ stage });
-              return;
-            }
-
-            const newIsSalmonRunStage = !stages.includes(stage as any);
-            const oldIsSalmonRunStage = !stages.includes(bg.stage as any);
-
-            if (newIsSalmonRunStage === oldIsSalmonRunStage) {
-              setBg({ ...bg, stage });
-              return;
-            }
-
-            if (newIsSalmonRunStage) {
-              setBg({ stage, tide: "mid" });
-              return;
-            }
-
-            setBg({ stage, mode: "SZ", view: "M" });
-          }}
-          currentBackground={bg}
-          changeMode={(mode) => setBg({ ...bg, mode })}
-          changeTide={(tide: "low" | "mid" | "high") => setBg({ ...bg, tide })}
-          changeView={(view: "M" | "R") => setBg({ ...bg, view })}
-        />
+        <Divider mx="3" my={6} />
+        <ImageAdder addImageToSketch={addImageToSketch} />
         <input
           type="file"
           accept=".json"