Dashboard Integration

website/src/components/Tasks/CreateTask.tsx

@@ -1,3 +1,4 @@
+import { Box, Stack, Text, useColorModeValue } from "@chakra-ui/react";
 import { useState } from "react";
 import { Messages } from "src/components/Messages";
 import { TrackedTextarea } from "src/components/Survey/TrackedTextarea";
@@ -5,6 +6,9 @@ import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 
 export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{ text: string }>) => {
+  const titleColor = useColorModeValue("gray.800", "gray.300");
+  const labelColor = useColorModeValue("gray.600", "gray.400");
+
   const [inputText, setInputText] = useState("");
 
   const textChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -16,18 +20,32 @@ export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{
   return (
     <TwoColumnsWithCards>
       <>
-        <h5 className="text-lg font-semibold">{taskType.label}</h5>
-        <p className="text-lg py-1">{taskType.overview}</p>
-        {task.conversation ? <Messages messages={task.conversation.messages} post_id={task.id} /> : null}
+        <Stack spacing="1">
+          <Text fontSize="xl" fontWeight="bold" color={titleColor}>
+            {taskType.label}
+          </Text>
+          <Text fontSize="md" color={labelColor}>
+            {taskType.overview}
+          </Text>
+        </Stack>
+        {task.conversation ? (
+          <Box mt="4">
+            <Messages messages={task.conversation.messages} post_id={task.id} />
+          </Box>
+        ) : null}
       </>
       <>
-        <h5 className="text-lg font-semibold">{taskType.instruction}</h5>
-        <TrackedTextarea
-          text={inputText}
-          onTextChange={textChangeHandler}
-          thresholds={{ low: 20, medium: 40, goal: 50 }}
-          textareaProps={{ placeholder: "Reply..." }}
-        />
+        <Stack spacing="4">
+          <Text fontSize="xl" fontWeight="bold" color={titleColor}>
+            {taskType.instruction}
+          </Text>
+          <TrackedTextarea
+            text={inputText}
+            onTextChange={textChangeHandler}
+            thresholds={{ low: 20, medium: 40, goal: 50 }}
+            textareaProps={{ placeholder: "Write your prompt here..." }}
+          />
+        </Stack>
       </>
     </TwoColumnsWithCards>
   );

website/src/components/Tasks/EvaluateTask.tsx

@@ -1,3 +1,4 @@
+import { Box, Stack, Text, useColorModeValue } from "@chakra-ui/react";
 import { useEffect } from "react";
 import { MessageTable } from "src/components/Messages/MessageTable";
 import { Sortable } from "src/components/Sortable/Sortable";
@@ -5,6 +6,10 @@ import { SurveyCard } from "src/components/Survey/SurveyCard";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 
 export const EvaluateTask = ({ task, onReplyChanged }: TaskSurveyProps<{ ranking: number[] }>) => {
+  const cardColor = useColorModeValue("gray.100", "gray.700");
+  const titleColor = useColorModeValue("gray.800", "gray.300");
+  const labelColor = useColorModeValue("gray.600", "gray.400");
+
   let messages = [];
   if (task.conversation) {
     messages = task.conversation.messages;
@@ -27,13 +32,21 @@ export const EvaluateTask = ({ task, onReplyChanged }: TaskSurveyProps<{ ranking
   const sortables = task.replies ? "replies" : "prompts";
 
   return (
-    <SurveyCard className="max-w-7xl mx-auto h-fit mb-24">
-      <h5 className="text-lg font-semibold mb-4">Instructions</h5>
-      <p className="text-lg py-1">
-        Given the following {sortables}, sort them from best to worst, best being first, worst being last.
-      </p>
-      <MessageTable messages={messages} />
-      <Sortable items={task[sortables]} onChange={onRank} className="my-8" />
-    </SurveyCard>
+    <Box mb="4">
+      <SurveyCard>
+        <Stack spacing="1">
+          <Text fontSize="xl" fontWeight="bold" color={titleColor}>
+            Instructions
+          </Text>
+          <Text fontSize="md" color={labelColor}>
+            Given the following {sortables}, sort them from best to worst, best being first, worst being last.
+          </Text>
+        </Stack>
+        <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
+          <MessageTable messages={messages} />
+        </Box>
+        <Sortable items={task[sortables]} onChange={onRank} className="my-8" />
+      </SurveyCard>
+    </Box>
   );
 };

website/src/components/Tasks/LabelTask.tsx

@@ -1,5 +1,5 @@
-import { Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from "@chakra-ui/react";
-import { useColorMode } from "@chakra-ui/react";
+import { Box, Grid, Slider, SliderFilledTrack, SliderThumb, SliderTrack } from "@chakra-ui/react";
+import { Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
 import { useEffect, useId, useState } from "react";
 import { MessageView } from "src/components/Messages";
 import { MessageTable } from "src/components/Messages/MessageTable";
@@ -30,25 +30,37 @@ export const LabelTask = ({
     setSliderValues(values);
   };
 
+  const cardColor = useColorModeValue("gray.100", "gray.700");
+  const titleColor = useColorModeValue("gray.800", "gray.300");
+  const labelColor = useColorModeValue("gray.600", "gray.400");
+
   return (
     <TwoColumnsWithCards>
       <>
-        <h5 className="text-lg font-semibold">{taskType.label}</h5>
-        <p className="text-lg py-1">{taskType.overview}</p>
+        <Text fontSize="xl" fontWeight="bold" color={titleColor}>
+          {taskType.label}
+        </Text>
+        <Text fontSize="md" color={labelColor}>
+          {taskType.overview}
+        </Text>
 
         {task.conversation ? (
-          <MessageTable
-            messages={[
-              ...(task.conversation ? task.conversation.messages : []),
-              {
-                text: task.reply,
-                is_assistant: task.type === TaskType.label_assistant_reply,
-                message_id: task.message_id,
-              },
-            ]}
-          />
+          <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
+            <MessageTable
+              messages={[
+                ...(task.conversation ? task.conversation.messages : []),
+                {
+                  text: task.reply,
+                  is_assistant: task.type === TaskType.label_assistant_reply,
+                  message_id: task.message_id,
+                },
+              ]}
+            />
+          </Box>
         ) : (
-          <MessageView text={task.prompt} is_assistant={false} message_id={task.message_id} />
+          <Box mt="4">
+            <MessageView text={task.prompt} is_assistant={false} message_id={task.message_id} />
+          </Box>
         )}
       </>
       <LabelSliderGroup labelIDs={task.valid_labels} onChange={onSliderChange} />

website/src/components/Tasks/Task.tsx

@@ -1,4 +1,3 @@
-import { useColorMode } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import { TaskControls } from "src/components/Survey/TaskControls";
 import { CreateTask } from "src/components/Tasks/CreateTask";
@@ -28,9 +27,6 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
 
   const taskType = TaskTypes.find((taskType) => taskType.type === task.type);
 
-  const { colorMode } = useColorMode();
-  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-900" : "bg-slate-900 text-white";
-
   const { trigger: sendRejection } = useSWRMutation("/api/reject_task", poster, {
     onSuccess: async () => {
       mutate();
@@ -90,7 +86,7 @@ export const Task = ({ frontendId, task, trigger, mutate }) => {
   }
 
   return (
-    <div className={`p-12 ${mainBgClasses}`}>
+    <div>
       {taskTypeComponent()}
       <TaskControls
         task={task}

website/src/components/Tasks/TaskTypes.tsx

@@ -21,8 +21,8 @@ export interface TaskInfo {
 export const TaskTypes: TaskInfo[] = [
   // general/random
   {
-    label: "Grab a task",
-    desc: "Help us improve Open Assistant by grabbing a task ...",
+    label: "Start a Task",
+    desc: "Help us improve Open Assistant by starting a random task.",
     category: TaskCategory.Tasks,
     pathname: "/tasks/random",
     type: "random",
@@ -46,7 +46,7 @@ export const TaskTypes: TaskInfo[] = [
     pathname: "/create/user_reply",
     type: "prompter_reply",
     overview: "Given the following conversation, provide an adequate reply",
-    instruction: "Provide the user`s reply",
+    instruction: "Provide the user's reply",
     update_type: "text_reply_to_message",
   },
   {
@@ -56,7 +56,7 @@ export const TaskTypes: TaskInfo[] = [
     pathname: "/create/assistant_reply",
     type: "assistant_reply",
     overview: "Given the following conversation, provide an adequate reply",
-    instruction: "Provide the assistant`s reply",
+    instruction: "Provide the assistant's reply",
     update_type: "text_reply_to_message",
   },
   // evaluate