From 9a00e938bd8f886f747dcd4c2470a116f471ee5b Mon Sep 17 00:00:00 2001
From: klotske <ilya@mokhov.vg>
Date: Wed, 11 Jan 2023 23:35:28 +0300
Subject: [PATCH 1/3] Add empty state component

---
 website/src/components/EmptyState.tsx | 32 +++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 website/src/components/EmptyState.tsx

diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx
new file mode 100644
index 00000000..aa50bd9f
--- /dev/null
+++ b/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} />;
+};

From 0eed9b5126282901934fbc0e0350428bd83a0e1d Mon Sep 17 00:00:00 2001
From: klotske <ilya@mokhov.vg>
Date: Wed, 11 Jan 2023 23:39:55 +0300
Subject: [PATCH 2/3] Implement new TaskEmptyState component

---
 website/src/pages/create/assistant_reply.tsx          | 4 ++--
 website/src/pages/create/initial_prompt.tsx           | 4 ++--
 website/src/pages/create/user_reply.tsx               | 4 ++--
 website/src/pages/evaluate/rank_assistant_replies.tsx | 4 ++--
 website/src/pages/evaluate/rank_initial_prompts.tsx   | 4 ++--
 website/src/pages/evaluate/rank_user_replies.tsx      | 4 ++--
 website/src/pages/label/label_assistant_reply.tsx     | 4 ++--
 website/src/pages/label/label_initial_prompt.tsx      | 4 ++--
 website/src/pages/label/label_prompter_reply.tsx      | 4 ++--
 website/src/pages/tasks/random.tsx                    | 4 ++--
 10 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx
index f596de86..7b4cf688 100644
--- a/website/src/pages/create/assistant_reply.tsx
+++ b/website/src/pages/create/assistant_reply.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreateAssistantReply } from "src/hooks/tasks/useCreateReply";
@@ -12,7 +12,7 @@ const AssistantReply = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/create/initial_prompt.tsx b/website/src/pages/create/initial_prompt.tsx
index 4eb1dd94..c8bf7317 100644
--- a/website/src/pages/create/initial_prompt.tsx
+++ b/website/src/pages/create/initial_prompt.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreateInitialPrompt } from "src/hooks/tasks/useCreateReply";
@@ -12,7 +12,7 @@ const InitialPrompt = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx
index 9e34a31d..b1425ff9 100644
--- a/website/src/pages/create/user_reply.tsx
+++ b/website/src/pages/create/user_reply.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { Container } from "src/components/Container";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreatePrompterReply } from "src/hooks/tasks/useCreateReply";
@@ -12,7 +12,7 @@ const UserReply = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx
index bcf23b7a..8cb30db8 100644
--- a/website/src/pages/evaluate/rank_assistant_replies.tsx
+++ b/website/src/pages/evaluate/rank_assistant_replies.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { Container } from "src/components/Container";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankAssistantRepliesTask } from "src/hooks/tasks/useRankReplies";
@@ -12,7 +12,7 @@ const RankAssistantReplies = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx
index bc26b062..74b7a075 100644
--- a/website/src/pages/evaluate/rank_initial_prompts.tsx
+++ b/website/src/pages/evaluate/rank_initial_prompts.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { Container } from "src/components/Container";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankInitialPromptsTask } from "src/hooks/tasks/useRankReplies";
@@ -12,7 +12,7 @@ const RankInitialPrompts = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx
index 854b75ba..0b2785e4 100644
--- a/website/src/pages/evaluate/rank_user_replies.tsx
+++ b/website/src/pages/evaluate/rank_user_replies.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { Container } from "src/components/Container";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankPrompterRepliesTask } from "src/hooks/tasks/useRankReplies";
@@ -12,7 +12,7 @@ const RankUserReplies = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/label/label_assistant_reply.tsx b/website/src/pages/label/label_assistant_reply.tsx
index 36ac6dd6..2a4c56da 100644
--- a/website/src/pages/label/label_assistant_reply.tsx
+++ b/website/src/pages/label/label_assistant_reply.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
@@ -12,7 +12,7 @@ const LabelAssistantReply = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/label/label_initial_prompt.tsx b/website/src/pages/label/label_initial_prompt.tsx
index d2839e86..1434d2a2 100644
--- a/website/src/pages/label/label_initial_prompt.tsx
+++ b/website/src/pages/label/label_initial_prompt.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
@@ -12,7 +12,7 @@ const LabelInitialPrompt = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/label/label_prompter_reply.tsx b/website/src/pages/label/label_prompter_reply.tsx
index 03b4f19d..a3b5162c 100644
--- a/website/src/pages/label/label_prompter_reply.tsx
+++ b/website/src/pages/label/label_prompter_reply.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
@@ -12,7 +12,7 @@ const LabelPrompterReply = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (
diff --git a/website/src/pages/tasks/random.tsx b/website/src/pages/tasks/random.tsx
index 330b7b48..5da43b83 100644
--- a/website/src/pages/tasks/random.tsx
+++ b/website/src/pages/tasks/random.tsx
@@ -1,5 +1,5 @@
-import { Container } from "@chakra-ui/react";
 import Head from "next/head";
+import { TaskEmptyState } from "src/components/EmptyState";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI";
@@ -12,7 +12,7 @@ const RandomTask = () => {
   }
 
   if (tasks.length === 0) {
-    return <Container className="p-6 text-center text-gray-800">No tasks found...</Container>;
+    return <TaskEmptyState />;
   }
 
   return (

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 3/3] 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>
   );