Color-mode specific styling for LoadingScreen

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>
   );