From 014cd553d18a2f5b323c06e94ddb63b8c8351cde Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 15 Apr 2021 21:39:39 +1000
Subject: [PATCH] Add background colours to loading overlays to make it more
 readable

---
 src/modals/ImportExportModal.js | 12 +++++++-----
 src/modals/SelectDataModal.js   |  2 +-
 src/modals/SettingsModal.js     |  2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/modals/ImportExportModal.js b/src/modals/ImportExportModal.js
index cb134d2..b6e083c 100644
--- a/src/modals/ImportExportModal.js
+++ b/src/modals/ImportExportModal.js
@@ -263,11 +263,13 @@ function ImportExportModal({ isOpen, onRequestClose }) {
               left: 0,
             }}
           >
-            <LoadingOverlay />
-            <LoadingBar
-              isLoading={isLoading}
-              loadingProgressRef={loadingProgressRef}
-            />
+            <LoadingOverlay bg="overlay" />
+            <Box sx={{ zIndex: 3, position: "absolute", width: "100%" }}>
+              <LoadingBar
+                isLoading={isLoading}
+                loadingProgressRef={loadingProgressRef}
+              />
+            </Box>
           </Box>
         )}
         <ErrorBanner error={error} onRequestClose={() => setError()} />
diff --git a/src/modals/SelectDataModal.js b/src/modals/SelectDataModal.js
index e716eb8..5cd94ff 100644
--- a/src/modals/SelectDataModal.js
+++ b/src/modals/SelectDataModal.js
@@ -276,7 +276,7 @@ function SelectDataModal({
             {confirmText}
           </Button>
         </Flex>
-        {isLoading && <LoadingOverlay />}
+        {isLoading && <LoadingOverlay bg="overlay" />}
       </Box>
     </Modal>
   );
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js
index 4572b12..1cc3db8 100644
--- a/src/modals/SettingsModal.js
+++ b/src/modals/SettingsModal.js
@@ -198,7 +198,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
               </Text>
             </Flex>
           )}
-          {isLoading && <LoadingOverlay />}
+          {isLoading && <LoadingOverlay bg="overlay" />}
         </Flex>
       </Modal>
       <ConfirmModal