Darkmode for survey pages. Fixes for eslint.

website/src/pages/create/assistant_reply.tsx

@@ -1,16 +1,16 @@
-import { Container, Flex, Textarea } from "@chakra-ui/react";
+import { Container, Textarea } from "@chakra-ui/react";
 import { useRef, useState } from "react";
-import { SkipButton } from "src/components/Buttons/Skip";
-import { SubmitButton } from "src/components/Buttons/Submit";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
-import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
-import { TwoColumns } from "src/components/TwoColumns";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
 
+import { useColorMode } from "@chakra-ui/react";
+import { TaskControls } from "src/components/Survey/TaskControls";
+
 const AssistantReply = () => {
   const [tasks, setTasks] = useState([]);
 
@@ -45,6 +45,9 @@ const AssistantReply = () => {
     mutate();
   };
 
+  const { colorMode } = useColorMode();
+  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
+
   if (isLoading) {
     return <LoadingScreen text="Loading..." />;
   }
@@ -54,31 +57,20 @@ const AssistantReply = () => {
   }
 
   const task = tasks[0].task;
-  const endTask = tasks[tasks.length - 1];
+
   return (
-    <Container className="p-6 text-gray-800">
-      <TwoColumns>
+    <div className={`p-12 ${mainBgClasses}`}>
+      <TwoColumnsWithCards>
         <>
           <h5 className="text-lg font-semibold">Reply as the assistant</h5>
           <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
           <Messages messages={task.conversation.messages} post_id={task.id} />
         </>
         <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
-      </TwoColumns>
+      </TwoColumnsWithCards>
 
-      <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
-        <TaskInfo id={tasks[0].id} output="Submit your answer" />
-
-        <Flex justify="center" ml="auto" gap={2}>
-          <SkipButton>Skip</SkipButton>
-          {endTask.task.type !== "task_done" ? (
-            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
-          ) : (
-            <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
-          )}
-        </Flex>
-      </section>
-    </Container>
+      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+    </div>
   );
 };