Moved change map button to map component and centered it

src/components/AddMapButton.js

@@ -13,7 +13,7 @@ import Modal from "./Modal";
 
 const defaultMapSize = 22;
 
-function AddMapButton({ handleMapChange }) {
+function AddMapButton({ onMapChanged }) {
   const fileInputRef = useRef();
 
   function openImageDialog() {
@@ -54,7 +54,7 @@ function AddMapButton({ handleMapChange }) {
 
   function handleDone() {
     if (mapDataRef.current && mapSource) {
-      handleMapChange(mapDataRef.current, mapSource);
+      onMapChanged(mapDataRef.current, mapSource);
     }
     closeModal();
   }

src/components/Map.js

@@ -3,11 +3,19 @@ import { Box, Image } from "theme-ui";
 
 import Token from "../components/Token";
 import ProxyToken from "../components/ProxyToken";
+import AddMapButton from "../components/AddMapButton";
 
 const mapTokenClassName = "map-token";
 const defaultTokenSize = 48;
 
-function Map({ mapSource, mapData, tokens, onMapTokenMove, onMapTokenRemove }) {
+function Map({
+  mapSource,
+  mapData,
+  tokens,
+  onMapTokenMove,
+  onMapTokenRemove,
+  onMapChanged
+}) {
   function handleProxyDragEnd(isOnMap, token) {
     if (isOnMap && onMapTokenMove) {
       onMapTokenMove(token);
@@ -27,7 +35,12 @@ function Map({ mapSource, mapData, tokens, onMapTokenMove, onMapTokenRemove }) {
     <>
       <Box
         className="map"
-        sx={{ flexGrow: 1, position: "relative", overflow: "hidden" }}
+        sx={{
+          flexGrow: 1,
+          position: "relative",
+          overflow: "hidden",
+          backgroundColor: "rgba(0, 0, 0, 0.1)"
+        }}
         bg="background"
       >
         <Box
@@ -83,6 +96,17 @@ function Map({ mapSource, mapData, tokens, onMapTokenMove, onMapTokenRemove }) {
             ))}
           </Box>
         </Box>
+        <Box
+          p={2}
+          sx={{
+            position: "absolute",
+            top: "0",
+            left: "50%",
+            transform: "translateX(-50%)"
+          }}
+        >
+          <AddMapButton onMapChanged={onMapChanged} />
+        </Box>
       </Box>
       <ProxyToken
         tokenClassName={mapTokenClassName}

src/routes/Game.js

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useCallback
 } from "react";
-import { Box, Flex } from "theme-ui";
+import { Flex } from "theme-ui";
 
 import { omit } from "../helpers/shared";
 
@@ -15,7 +15,6 @@ import useSession from "../helpers/useSession";
 import Party from "../components/Party";
 import Tokens from "../components/Tokens";
 import Map from "../components/Map";
-import AddMapButton from "../components/AddMapButton";
 
 function Game() {
   const { gameId } = useContext(GameContext);
@@ -35,7 +34,7 @@ function Game() {
   const [mapSource, setMapSource] = useState(null);
   const mapDataRef = useRef(null);
 
-  function handleMapChange(mapData, mapSource) {
+  function handleMapChanged(mapData, mapSource) {
     mapDataRef.current = mapData;
     setMapSource(mapSource);
     for (let connection of Object.values(connections)) {
@@ -107,20 +106,10 @@ function Game() {
           tokens={mapTokens}
           onMapTokenMove={handleEditMapToken}
           onMapTokenRemove={handleRemoveMapToken}
+          onMapChanged={handleMapChanged}
         />
         <Tokens onCreateMapToken={handleEditMapToken} />
       </Flex>
-      <Box
-        p={2}
-        sx={{
-          position: "absolute",
-          top: "0",
-          left: "50%",
-          transform: "translateX(-50%)"
-        }}
-      >
-        <AddMapButton handleMapChange={handleMapChange} />
-      </Box>
     </Flex>
   );
 }