Merge pull request #635 from Klotske/add-empty-state

Add empty state & tweak loading screen

website/src/components/EmptyState.tsx

@@ -0,0 +1,32 @@
+import { Center, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
+import { FiFileText } from "react-icons/fi";
+import { IconType } from "react-icons/lib";
+
+type EmptyStateProps = {
+  text: string;
+  icon: IconType;
+};
+
+export const EmptyState = (props: EmptyStateProps) => {
+  const { colorMode } = useColorMode();
+  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-900" : "bg-slate-900 text-white";
+
+  const widgetClasses = useColorModeValue("border-gray-700 text-gray-700", "border-gray-300 text-gray-300");
+
+  return (
+    <div className={`p-12 ${mainBgClasses}`}>
+      <Center>
+        <div className={`block border-2 border-dotted rounded-lg p-24 text-center ${widgetClasses}`}>
+          <props.icon className="mx-auto h-16 w-16" />
+          <Text fontFamily="inter" fontSize="2xl">
+            {props.text}
+          </Text>
+        </div>
+      </Center>
+    </div>
+  );
+};
+
+export const TaskEmptyState = () => {
+  return <EmptyState text="No tasks found!" icon={FiFileText} />;
+};

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