Add background colours to loading overlays to make it more readable

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()} />

src/modals/SelectDataModal.js

@@ -276,7 +276,7 @@ function SelectDataModal({
             {confirmText}
           </Button>
         </Flex>
-        {isLoading && <LoadingOverlay />}
+        {isLoading && <LoadingOverlay bg="overlay" />}
       </Box>
     </Modal>
   );

src/modals/SettingsModal.js

@@ -198,7 +198,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
               </Text>
             </Flex>
           )}
-          {isLoading && <LoadingOverlay />}
+          {isLoading && <LoadingOverlay bg="overlay" />}
         </Flex>
       </Modal>
       <ConfirmModal