Add background colours to loading overlays to make it more readable

2021-04-15 21:39:39 +10:00
parent 33f34fb54f
commit 014cd553d1
3 changed files with 9 additions and 7 deletions
--- 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()} />