Darkmode for survey pages. Fixes for eslint.

website/src/components/Loading/LoadingScreen.jsx

@@ -1,12 +1,18 @@
-import { Container, Progress } from "@chakra-ui/react";
+import { Progress } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 
-export const LoadingScreen = ({ text }) => (
-  <Container>
-    <Progress size="xs" isIndeterminate />
-    {text && (
-      <Container className="flex h-full">
-        <div className="text-xl font-bold text-gray-800  mx-auto my-auto">{text}</div>
-      </Container>
-    )}
-  </Container>
-);
+export const LoadingScreen = ({ text }) => {
+  const { colorMode } = useColorMode();
+  const mainClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
+
+  return (
+    <div className={`h-full ${mainClasses}`}>
+      <Progress size="sm" isIndeterminate />
+      {text && (
+        <div className="flex h-full">
+          <div className="text-xl font-bold  mx-auto my-auto">{text}</div>
+        </div>
+      )}
+    </div>
+  );
+};