Move map and token settings to match the group overlay visual

src/components/Select.js

@@ -24,7 +24,7 @@ function Select({ creatable, ...props }) {
         }),
         control: (provided, state) => ({
           ...provided,
-          backgroundColor: theme.colors.background,
+          backgroundColor: "transparent",
           color: theme.colors.text,
           borderColor: theme.colors.text,
           opacity: state.isDisabled ? 0.5 : 1,

src/components/map/MapSettings.js

@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
-
-import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
+import { Flex, Box, Label, Input, Checkbox } from "theme-ui";
 
 import { isEmpty } from "../../helpers/shared";
 import { getGridUpdatedInset } from "../../helpers/grid";
@@ -43,8 +41,6 @@ function MapSettings({
   mapState,
   onSettingsChange,
   onStateSettingsChange,
-  showMore,
-  onShowMoreChange,
 }) {
   function handleFlagChange(event, flag) {
     if (event.target.checked) {
@@ -177,172 +173,142 @@ function MapSettings({
           my={1}
         />
       </Box>
-      {showMore && (
-        <>
-          <Flex
-            mt={2}
-            mb={mapEmpty || map.type === "default" ? 2 : 0}
-            sx={{ flexDirection: "column" }}
-          >
-            <Flex sx={{ alignItems: "flex-end" }}>
-              <Box sx={{ width: "50%" }}>
-                <Label>Grid Type</Label>
-                <Select
-                  isDisabled={mapEmpty}
-                  options={gridTypeSettings}
-                  value={
-                    !mapEmpty &&
-                    gridTypeSettings.find((s) => s.value === map.grid.type)
-                  }
-                  onChange={handleGridTypeChange}
-                  isSearchable={false}
-                />
-              </Box>
-              <Flex sx={{ flexGrow: 1, flexDirection: "column" }} ml={2}>
-                <Label>
-                  <Checkbox
-                    checked={!mapEmpty && map.showGrid}
-                    disabled={mapEmpty}
-                    onChange={(e) =>
-                      onSettingsChange("showGrid", e.target.checked)
-                    }
-                  />
-                  Draw Grid
-                </Label>
-                <Label>
-                  <Checkbox
-                    checked={!mapEmpty && map.snapToGrid}
-                    disabled={mapEmpty}
-                    onChange={(e) =>
-                      onSettingsChange("snapToGrid", e.target.checked)
-                    }
-                  />
-                  Snap to Grid
-                </Label>
-              </Flex>
-            </Flex>
-            <Flex sx={{ alignItems: "flex-end" }}>
-              <Box my={2} sx={{ width: "50%" }}>
-                <Label>Grid Measurement</Label>
-                <Select
-                  isDisabled={mapEmpty}
-                  options={
-                    map && map.grid.type === "square"
-                      ? gridSquareMeasurementTypeSettings
-                      : gridHexMeasurementTypeSettings
-                  }
-                  value={
-                    !mapEmpty &&
-                    gridSquareMeasurementTypeSettings.find(
-                      (s) => s.value === map.grid.measurement.type
-                    )
-                  }
-                  onChange={handleGridMeasurementTypeChange}
-                  isSearchable={false}
-                />
-              </Box>
-              <Box m={2} mr={0} sx={{ flexGrow: 1 }}>
-                <Label htmlFor="gridMeasurementScale">Grid Scale</Label>
-                <Input
-                  name="gridMeasurementScale"
-                  value={`${map && map.grid.measurement.scale}`}
-                  onChange={handleGridMeasurementScaleChange}
-                  disabled={mapEmpty}
-                  min={1}
-                  my={1}
-                  autoComplete="off"
-                />
-              </Box>
-            </Flex>
-          </Flex>
-          {!mapEmpty && map.type !== "default" && (
-            <Flex my={2} sx={{ alignItems: "center" }}>
-              <Box mb={1} sx={{ width: "50%" }}>
-                <Label>Quality</Label>
-                <Select
-                  options={qualitySettings}
-                  value={
-                    !mapEmpty &&
-                    qualitySettings.find((s) => s.value === map.quality)
-                  }
-                  isDisabled={mapEmpty}
-                  onChange={(option) =>
-                    onSettingsChange("quality", option.value)
-                  }
-                  isOptionDisabled={(option) =>
-                    mapEmpty ||
-                    (option.value !== "original" &&
-                      !map.resolutions[option.value])
-                  }
-                  isSearchable={false}
-                />
-              </Box>
-              <Label sx={{ width: "50%" }} ml={2}>
-                Size: {mapSize > 0 && `${mapSize}MB`}
-              </Label>
-            </Flex>
-          )}
-          <Divider fill />
-          <Box my={2} sx={{ flexGrow: 1 }}>
-            <Label>Allow Others to Edit</Label>
-            <Flex my={1}>
-              <Label>
-                <Checkbox
-                  checked={!mapStateEmpty && mapState.editFlags.includes("fog")}
-                  disabled={mapStateEmpty}
-                  onChange={(e) => handleFlagChange(e, "fog")}
-                />
-                Fog
-              </Label>
-              <Label>
-                <Checkbox
-                  checked={
-                    !mapStateEmpty && mapState.editFlags.includes("drawing")
-                  }
-                  disabled={mapStateEmpty}
-                  onChange={(e) => handleFlagChange(e, "drawing")}
-                />
-                Drawings
-              </Label>
-              <Label>
-                <Checkbox
-                  checked={
-                    !mapStateEmpty && mapState.editFlags.includes("tokens")
-                  }
-                  disabled={mapStateEmpty}
-                  onChange={(e) => handleFlagChange(e, "tokens")}
-                />
-                Tokens
-              </Label>
-              <Label>
-                <Checkbox
-                  checked={
-                    !mapStateEmpty && mapState.editFlags.includes("notes")
-                  }
-                  disabled={mapStateEmpty}
-                  onChange={(e) => handleFlagChange(e, "notes")}
-                />
-                Notes
-              </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"}
+      <Flex
+        mt={2}
+        mb={mapEmpty || map.type === "default" ? 2 : 0}
+        sx={{ flexDirection: "column" }}
       >
-        <ExpandMoreIcon />
-      </IconButton>
+        <Flex sx={{ alignItems: "flex-end" }}>
+          <Box sx={{ width: "50%" }}>
+            <Label>Grid Type</Label>
+            <Select
+              isDisabled={mapEmpty}
+              options={gridTypeSettings}
+              value={
+                !mapEmpty &&
+                gridTypeSettings.find((s) => s.value === map.grid.type)
+              }
+              onChange={handleGridTypeChange}
+              isSearchable={false}
+            />
+          </Box>
+          <Flex sx={{ flexGrow: 1, flexDirection: "column" }} ml={2}>
+            <Label>
+              <Checkbox
+                checked={!mapEmpty && map.showGrid}
+                disabled={mapEmpty}
+                onChange={(e) => onSettingsChange("showGrid", e.target.checked)}
+              />
+              Draw Grid
+            </Label>
+            <Label>
+              <Checkbox
+                checked={!mapEmpty && map.snapToGrid}
+                disabled={mapEmpty}
+                onChange={(e) =>
+                  onSettingsChange("snapToGrid", e.target.checked)
+                }
+              />
+              Snap to Grid
+            </Label>
+          </Flex>
+        </Flex>
+        <Flex sx={{ alignItems: "flex-end" }}>
+          <Box my={2} sx={{ width: "50%" }}>
+            <Label>Grid Measurement</Label>
+            <Select
+              isDisabled={mapEmpty}
+              options={
+                map && map.grid.type === "square"
+                  ? gridSquareMeasurementTypeSettings
+                  : gridHexMeasurementTypeSettings
+              }
+              value={
+                !mapEmpty &&
+                gridSquareMeasurementTypeSettings.find(
+                  (s) => s.value === map.grid.measurement.type
+                )
+              }
+              onChange={handleGridMeasurementTypeChange}
+              isSearchable={false}
+            />
+          </Box>
+          <Box m={2} mr={0} sx={{ flexGrow: 1 }}>
+            <Label htmlFor="gridMeasurementScale">Grid Scale</Label>
+            <Input
+              name="gridMeasurementScale"
+              value={`${map && map.grid.measurement.scale}`}
+              onChange={handleGridMeasurementScaleChange}
+              disabled={mapEmpty}
+              min={1}
+              my={1}
+              autoComplete="off"
+            />
+          </Box>
+        </Flex>
+      </Flex>
+      {!mapEmpty && map.type !== "default" && (
+        <Flex my={2} sx={{ alignItems: "center" }}>
+          <Box mb={1} sx={{ width: "50%" }}>
+            <Label>Quality</Label>
+            <Select
+              options={qualitySettings}
+              value={
+                !mapEmpty &&
+                qualitySettings.find((s) => s.value === map.quality)
+              }
+              isDisabled={mapEmpty}
+              onChange={(option) => onSettingsChange("quality", option.value)}
+              isOptionDisabled={(option) =>
+                mapEmpty ||
+                (option.value !== "original" && !map.resolutions[option.value])
+              }
+              isSearchable={false}
+            />
+          </Box>
+          <Label sx={{ width: "50%" }} ml={2}>
+            Size: {mapSize > 0 && `${mapSize}MB`}
+          </Label>
+        </Flex>
+      )}
+      <Divider fill />
+      <Box my={2} sx={{ flexGrow: 1 }}>
+        <Label>Allow Others to Edit</Label>
+        <Flex my={1}>
+          <Label>
+            <Checkbox
+              checked={!mapStateEmpty && mapState.editFlags.includes("fog")}
+              disabled={mapStateEmpty}
+              onChange={(e) => handleFlagChange(e, "fog")}
+            />
+            Fog
+          </Label>
+          <Label>
+            <Checkbox
+              checked={!mapStateEmpty && mapState.editFlags.includes("drawing")}
+              disabled={mapStateEmpty}
+              onChange={(e) => handleFlagChange(e, "drawing")}
+            />
+            Drawings
+          </Label>
+          <Label>
+            <Checkbox
+              checked={!mapStateEmpty && mapState.editFlags.includes("tokens")}
+              disabled={mapStateEmpty}
+              onChange={(e) => handleFlagChange(e, "tokens")}
+            />
+            Tokens
+          </Label>
+          <Label>
+            <Checkbox
+              checked={!mapStateEmpty && mapState.editFlags.includes("notes")}
+              disabled={mapStateEmpty}
+              onChange={(e) => handleFlagChange(e, "notes")}
+            />
+            Notes
+          </Label>
+        </Flex>
+      </Box>
     </Flex>
   );
 }

src/modals/EditMapModal.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { Button, Flex, Label } from "theme-ui";
+import { Button, Flex, Label, useThemeUI } from "theme-ui";
+import SimpleBar from "simplebar-react";
 
 import Modal from "../components/Modal";
 import MapSettings from "../components/map/MapSettings";
@@ -18,6 +19,8 @@ function EditMapModal({
   onUpdateMap,
   onUpdateMapState,
 }) {
+  const { theme } = useThemeUI();
+
   function handleClose() {
     setMapSettingChanges({});
     setMapStateSettingChanges({});
@@ -99,8 +102,6 @@ function EditMapModal({
     ...mapStateSettingChanges,
   };
 
-  const [showMoreSettings, setShowMoreSettings] = useState(true);
-
   const layout = useResponsiveLayout();
 
   if (!map) {
@@ -111,29 +112,45 @@ function EditMapModal({
     <Modal
       isOpen={isOpen}
       onRequestClose={handleClose}
-      style={{ maxWidth: layout.modalSize, width: "calc(100% - 16px)" }}
+      style={{
+        maxWidth: layout.modalSize,
+        width: "calc(100% - 16px)",
+        padding: 0,
+        display: "flex",
+        overflow: "hidden",
+      }}
     >
       <Flex
         sx={{
           flexDirection: "column",
+          width: "100%",
         }}
       >
-        <Label pt={2} pb={1}>
+        <Label pt={2} pb={1} px={3}>
           Edit map
         </Label>
-        <MapEditor
-          map={selectedMapWithChanges}
-          onSettingsChange={handleMapSettingsChange}
-        />
-        <MapSettings
-          map={selectedMapWithChanges}
-          mapState={selectedMapStateWithChanges}
-          onSettingsChange={handleMapSettingsChange}
-          onStateSettingsChange={handleMapStateSettingsChange}
-          showMore={showMoreSettings}
-          onShowMoreChange={setShowMoreSettings}
-        />
-        <Button onClick={handleSave}>Save</Button>
+        <SimpleBar
+          style={{
+            minHeight: 0,
+            padding: "0 20px",
+            backgroundColor: theme.colors.muted,
+            margin: "0 8px",
+          }}
+        >
+          <MapEditor
+            map={selectedMapWithChanges}
+            onSettingsChange={handleMapSettingsChange}
+          />
+          <MapSettings
+            map={selectedMapWithChanges}
+            mapState={selectedMapStateWithChanges}
+            onSettingsChange={handleMapSettingsChange}
+            onStateSettingsChange={handleMapStateSettingsChange}
+          />
+        </SimpleBar>
+        <Button m={3} onClick={handleSave}>
+          Save
+        </Button>
       </Flex>
     </Modal>
   );

src/modals/EditTokenModal.js

@@ -1,16 +1,18 @@
 import React, { useState } from "react";
-import { Button, Flex, Label } from "theme-ui";
+import { Button, Flex, Label, useThemeUI } from "theme-ui";
+import SimpleBar from "simplebar-react";
 
 import Modal from "../components/Modal";
 import TokenSettings from "../components/token/TokenSettings";
 import TokenPreview from "../components/token/TokenPreview";
-import LoadingOverlay from "../components/LoadingOverlay";
 
 import { isEmpty } from "../helpers/shared";
 
 import useResponsiveLayout from "../hooks/useResponsiveLayout";
 
 function EditTokenModal({ isOpen, onDone, token, onUpdateToken }) {
+  const { theme } = useThemeUI();
+
   function handleClose() {
     setTokenSettingChanges({});
     onDone();
@@ -47,6 +49,10 @@ function EditTokenModal({ isOpen, onDone, token, onUpdateToken }) {
 
   const layout = useResponsiveLayout();
 
+  if (!token) {
+    return null;
+  }
+
   return (
     <Modal
       isOpen={isOpen}
@@ -54,35 +60,37 @@ function EditTokenModal({ isOpen, onDone, token, onUpdateToken }) {
       style={{
         maxWidth: layout.modalSize,
         width: "calc(100% - 16px)",
+        padding: 0,
+        display: "flex",
+        overflow: "hidden",
       }}
     >
       <Flex
         sx={{
           flexDirection: "column",
+          width: "100%",
         }}
       >
-        <Label pt={2} pb={1}>
+        <Label pt={2} pb={1} px={3}>
           Edit token
         </Label>
-        {!token ? (
-          <Flex
-            sx={{
-              width: "100%",
-              height: layout.screenSize === "large" ? "500px" : "300px",
-              position: "relative",
-            }}
-            bg="muted"
-          >
-            <LoadingOverlay />
-          </Flex>
-        ) : (
+        <SimpleBar
+          style={{
+            minHeight: 0,
+            padding: "0 20px",
+            backgroundColor: theme.colors.muted,
+            margin: "0 8px",
+          }}
+        >
           <TokenPreview token={selectedTokenWithChanges} />
-        )}
-        <TokenSettings
-          token={selectedTokenWithChanges}
-          onSettingsChange={handleTokenSettingsChange}
-        />
-        <Button onClick={handleSave}>Save</Button>
+          <TokenSettings
+            token={selectedTokenWithChanges}
+            onSettingsChange={handleTokenSettingsChange}
+          />
+        </SimpleBar>
+        <Button m={3} onClick={handleSave}>
+          Save
+        </Button>
       </Flex>
     </Modal>
   );