Added back show more option for maps but made it on by default

src/components/map/MapSettings.js

@@ -1,5 +1,7 @@
 import React from "react";
-import { Flex, Box, Label, Input, Checkbox } from "theme-ui";
+import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
+
+import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 
 import { isEmpty } from "../../helpers/shared";
 
@@ -19,6 +21,8 @@ function MapSettings({
   mapState,
   onSettingsChange,
   onStateSettingsChange,
+  showMore,
+  onShowMoreChange,
 }) {
   function handleFlagChange(event, flag) {
     if (event.target.checked) {
@@ -127,6 +131,8 @@ function MapSettings({
           my={1}
         />
       </Box>
+      {showMore && (
+        <>
           <Flex
             mt={2}
             mb={mapEmpty || map.type === "default" ? 2 : 0}
@@ -150,7 +156,9 @@ function MapSettings({
                 <Checkbox
                   checked={!mapEmpty && map.showGrid}
                   disabled={mapEmpty || map.type === "default"}
-              onChange={(e) => onSettingsChange("showGrid", e.target.checked)}
+                  onChange={(e) =>
+                    onSettingsChange("showGrid", e.target.checked)
+                  }
                 />
                 Draw Grid
               </Label>
@@ -158,7 +166,9 @@ function MapSettings({
                 <Checkbox
                   checked={!mapEmpty && map.snapToGrid}
                   disabled={mapEmpty || map.type === "default"}
-              onChange={(e) => onSettingsChange("snapToGrid", e.target.checked)}
+                  onChange={(e) =>
+                    onSettingsChange("snapToGrid", e.target.checked)
+                  }
                 />
                 Snap to Grid
               </Label>
@@ -175,10 +185,13 @@ function MapSettings({
                     qualitySettings.find((s) => s.value === map.quality)
                   }
                   isDisabled={mapEmpty}
-              onChange={(option) => onSettingsChange("quality", option.value)}
+                  onChange={(option) =>
+                    onSettingsChange("quality", option.value)
+                  }
                   isOptionDisabled={(option) =>
                     mapEmpty ||
-                (option.value !== "original" && !map.resolutions[option.value])
+                    (option.value !== "original" &&
+                      !map.resolutions[option.value])
                   }
                   isSearchable={false}
                 />
@@ -202,7 +215,9 @@ function MapSettings({
               </Label>
               <Label>
                 <Checkbox
-              checked={!mapStateEmpty && mapState.editFlags.includes("drawing")}
+                  checked={
+                    !mapStateEmpty && mapState.editFlags.includes("drawing")
+                  }
                   disabled={mapStateEmpty}
                   onChange={(e) => handleFlagChange(e, "drawing")}
                 />
@@ -210,7 +225,9 @@ function MapSettings({
               </Label>
               <Label>
                 <Checkbox
-              checked={!mapStateEmpty && mapState.editFlags.includes("tokens")}
+                  checked={
+                    !mapStateEmpty && mapState.editFlags.includes("tokens")
+                  }
                   disabled={mapStateEmpty}
                   onChange={(e) => handleFlagChange(e, "tokens")}
                 />
@@ -218,6 +235,23 @@ function MapSettings({
               </Label>
             </Flex>
           </Box>
+        </>
+      )}
+      <IconButton
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          onShowMoreChange(!showMore);
+        }}
+        sx={{
+          transform: `rotate(${showMore ? "180deg" : "0"})`,
+          alignSelf: "center",
+        }}
+        aria-label={showMore ? "Show Less" : "Show More"}
+        title={showMore ? "Show Less" : "Show More"}
+      >
+        <ExpandMoreIcon />
+      </IconButton>
     </Flex>
   );
 }

src/modals/EditMapModal.js

@@ -96,6 +96,8 @@ function EditMapModal({ isOpen, onDone, map, mapState }) {
     ...mapStateSettingChanges,
   };
 
+  const [showMoreSettings, setShowMoreSettings] = useState(true);
+
   return (
     <Modal
       isOpen={isOpen}
@@ -119,6 +121,8 @@ function EditMapModal({ isOpen, onDone, map, mapState }) {
           mapState={selectedMapStateWithChanges}
           onSettingsChange={handleMapSettingsChange}
           onStateSettingsChange={handleMapStateSettingsChange}
+          showMore={showMoreSettings}
+          onShowMoreChange={setShowMoreSettings}
         />
         <Button onClick={handleSave}>Save</Button>
       </Flex>