Fix loading screen issue dark user interface (#23)

neesjanvaneck · Sep 3, 2022 · e266ed1 · e266ed1
1 parent 8735e3d
commit e266ed1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/components/ui/LoadingScreen/index.js b/src/components/ui/LoadingScreen/index.js
@@ -69,7 +69,7 @@ const LoadingScreen = observer(() => {
   };
 
   return (
-    <div className={`${s.loadingScreen} ${uiStore.loadingScreenIsOpen ? '' : s.hidden}`}>
+    <div className={`${s.loadingScreen(uiStore.darkTheme)} ${uiStore.loadingScreenIsOpen ? '' : s.hidden}`}>
       <div className={s.progressBox}>
         {getProgressElement()}
         <Typography className={s.description} variant="caption" component="div" color="textSecondary">

diff --git a/src/components/ui/LoadingScreen/styles.js b/src/components/ui/LoadingScreen/styles.js
@@ -1,21 +1,24 @@
 import { css } from '@emotion/css';
 
-export const loadingScreen = css`
+export const hidden = css`
+  label: hidden;
+`;
+
+export const loadingScreen = (isDark) => css`
   label: loading-screen;
   visibility: visible;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: ${isDark ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)'};
   opacity: 1;
   transition: opacity 0.6s, visibility 0.6s;
-`;
 
-export const hidden = css`
-  label: hidden;
-  visibility: hidden;
-  opacity: 0;
+  &${`.${hidden}`} {
+    visibility: hidden;
+    opacity: 0;
+  }
 `;
 
 export const progressBox = css`