From 309870247bba6199d14309d1cc733409b81ac8e1 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 27 Nov 2020 11:37:15 +1100
Subject: [PATCH] Moved map loading overlay to be full screen width

---
 src/components/map/Map.js               |  2 --
 src/components/map/MapLoadingOverlay.js | 10 +++++-----
 src/routes/Game.js                      |  2 ++
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index cd3305f..0d4e8e3 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -8,7 +8,6 @@ import MapDrawing from "./MapDrawing";
 import MapFog from "./MapFog";
 import MapGrid from "./MapGrid";
 import MapMeasure from "./MapMeasure";
-import MapLoadingOverlay from "./MapLoadingOverlay";
 import NetworkedMapPointer from "../../network/NetworkedMapPointer";
 import MapNotes from "./MapNotes";
 
@@ -448,7 +447,6 @@ function Map({
           {noteMenu}
           {tokenDragOverlay}
           {noteDragOverlay}
-          <MapLoadingOverlay />
         </>
       }
       selectedToolId={selectedToolId}
diff --git a/src/components/map/MapLoadingOverlay.js b/src/components/map/MapLoadingOverlay.js
index d7d2c9c..5b923c3 100644
--- a/src/components/map/MapLoadingOverlay.js
+++ b/src/components/map/MapLoadingOverlay.js
@@ -38,10 +38,10 @@ function MapLoadingOverlay() {
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          left: "8px",
-          bottom: "8px",
+          top: 0,
+          left: 0,
+          right: 0,
           flexDirection: "column",
-          borderRadius: "28px",
           zIndex: 2,
         }}
         bg="overlay"
@@ -50,8 +50,8 @@ function MapLoadingOverlay() {
           ref={progressBarRef}
           max={1}
           value={0}
-          m={2}
-          sx={{ width: "32px" }}
+          m={0}
+          sx={{ width: "100%", borderRadius: 0 }}
         />
       </Box>
     )
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 93535d9..76d4a15 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -5,6 +5,7 @@ import { useParams } from "react-router-dom";
 import Banner from "../components/Banner";
 import LoadingOverlay from "../components/LoadingOverlay";
 import Link from "../components/Link";
+import MapLoadingOverlay from "../components/map/MapLoadingOverlay";
 
 import AuthModal from "../modals/AuthModal";
 
@@ -142,6 +143,7 @@ function Game() {
       </Banner>
       <AuthModal isOpen={authenticationStatus === "unauthenticated"} />
       {authenticationStatus === "unknown" && !offline && <LoadingOverlay />}
+      <MapLoadingOverlay />
     </MapStageProvider>
   );
 }