From 802701d776fbdbd816aeca859302a97979aefdb8 Mon Sep 17 00:00:00 2001
From: klotske <ilya@mokhov.vg>
Date: Wed, 11 Jan 2023 23:42:19 +0300
Subject: [PATCH] Color-mode specific styling for LoadingScreen

---
 website/src/components/Loading/LoadingScreen.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/website/src/components/Loading/LoadingScreen.jsx b/website/src/components/Loading/LoadingScreen.jsx
index 4674acf7..3aad717f 100644
--- a/website/src/components/Loading/LoadingScreen.jsx
+++ b/website/src/components/Loading/LoadingScreen.jsx
@@ -1,13 +1,15 @@
-import { Box, Progress, Text } from "@chakra-ui/react";
+import { Box, Center, Progress, Text, useColorModeValue } from "@chakra-ui/react";
 
 export const LoadingScreen = ({ text = "Loading..." } = {}) => {
+  const mainBgClasses = useColorModeValue("bg-slate-300 text-gray-900", "bg-slate-900 text-white");
+
   return (
-    <Box width="full">
+    <Box width="full" className={mainBgClasses}>
       <Progress size="sm" isIndeterminate />
       {text && (
-        <Box width="full">
+        <Center width="full" className="p-12">
           <Text fontFamily="Inter">{text}</Text>
-        </Box>
+        </Center>
       )}
     </Box>
   );