Merging with main

website/src/components/Dashboard/LeaderboardTable.tsx

@@ -54,7 +54,7 @@ export function LeaderboardTable() {
       <div className="flex flex-col gap-4">
         <div className="flex items-end justify-between">
           <Text className="text-2xl font-bold">Top 5 Contributors</Text>
-          <Link href="#" _hover={{ textDecoration: "none" }}>
+          <Link href="/leaderboard" _hover={{ textDecoration: "none" }}>
             <Text color="blue.400" className="text-sm font-bold">
               View All -&gt;
             </Text>

website/src/components/Dashboard/TaskOption.tsx

@@ -7,11 +7,11 @@ export const TaskOption = ({ displayTaskCategories }) => {
   const backgroundColor = useColorModeValue("white", "gray.700");
 
   return (
-    <Box className="flex flex-col gap-14" fontFamily="inter">
+    <Box className="flex flex-col gap-14">
       {displayTaskCategories.map((category, categoryIndex) => (
         <div key={categoryIndex}>
           <Text className="text-2xl font-bold pb-4">{category}</Text>
-          <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
+          <SimpleGrid columns={[1, 1, 2, 2, 3, 4]} gap={4}>
             {TaskTypes.filter((task) => task.category === category).map((item, itemIndex) => (
               <Link key={itemIndex} href={item.pathname}>
                 <GridItem
@@ -37,7 +37,7 @@ export const TaskOption = ({ displayTaskCategories }) => {
                     _hover={{ backgroundColor: "blue.600" }}
                   >
                     <Text fontWeight="bold" color="white">
-                      Go
+                      Go -&gt;
                     </Text>
                   </Box>
                 </GridItem>

website/src/components/Header/UserMenu.tsx

@@ -68,9 +68,8 @@ export function UserMenu() {
                   >
                     <Box
                       bg={backgroundColor}
-                      borderWidth="1px"
-                      borderColor={accentColor}
                       borderRadius="xl"
+                      shadow="base"
                       className="absolute right-0 mt-3 w-screen max-w-xs p-4"
                     >
                       <Box className="flex flex-col gap-1">
@@ -88,7 +87,7 @@ export function UserMenu() {
                               <item.icon className="text-blue-500" aria-hidden="true" />
                             </div>
                             <div>
-                              <Text fontFamily="inter">{item.name}</Text>
+                              <Text>{item.name}</Text>
                             </div>
                           </Link>
                         ))}
@@ -101,7 +100,7 @@ export function UserMenu() {
                             <FiLogOut className="text-blue-500" />
                           </div>
                           <div>
-                            <Text fontFamily="inter">Sign Out</Text>
+                            <Text>Sign Out</Text>
                           </div>
                         </Link>
                       </Box>

website/src/components/Layout.tsx

@@ -1,7 +1,7 @@
 // https://nextjs.org/docs/basic-features/layouts
 
 import type { NextPage } from "next";
-import { FiLayout, FiMessageSquare, FiUsers } from "react-icons/fi";
+import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers } from "react-icons/fi";
 import { Header } from "src/components/Header";
 
 import { Footer } from "./Footer";
@@ -44,6 +44,12 @@ export const getDashboardLayout = (page: React.ReactElement) => (
           desc: "Messages Dashboard",
           icon: FiMessageSquare,
         },
+        {
+          label: "Leaderboard",
+          pathname: "/leaderboard",
+          desc: "User Leaderboard",
+          icon: FiBarChart2,
+        },
       ]}
     >
       {page}

website/src/components/Loading/MessageLoading.jsx

@@ -0,0 +1,19 @@
+import { Box, Progress, useColorModeValue } from "@chakra-ui/react";
+
+export const MessageLoading = () => {
+  const loadingColor = useColorModeValue("gray.200", "gray.600");
+
+  return (
+    <Box className="w-full">
+      <Progress size="sm" isIndeterminate />
+      <Box className="flex flex-col gap-2 my-8">
+        <Box width="28" padding="4" borderRadius="md" bg={loadingColor}></Box>
+        <Box width="full" maxWidth="xl" height="16" bg={loadingColor} padding="4" borderRadius="xl"></Box>
+      </Box>
+      <Box className="flex flex-col gap-2 mb-4">
+        <Box width="28" padding="4" borderRadius="md" bg={loadingColor}></Box>
+        <Box width="full" maxWidth="lg" height="16" bg={loadingColor} padding="4" borderRadius="xl"></Box>
+      </Box>
+    </Box>
+  );
+};

website/src/components/Messages.tsx

@@ -1,5 +1,4 @@
-import { Grid } from "@chakra-ui/react";
-import { forwardRef, useColorMode } from "@chakra-ui/react";
+import { Box, forwardRef, Grid, useColorMode } from "@chakra-ui/react";
 import { useMemo } from "react";
 import { Message } from "src/types/Conversation";
 
@@ -23,16 +22,16 @@ export const MessageView = forwardRef<Message, "div">(({ is_assistant, text }: M
 
   const bgColor = useMemo(() => {
     if (colorMode === "light") {
-      return is_assistant ? "bg-slate-800" : "bg-sky-900";
+      return is_assistant ? "gray.800" : "blue.600";
     } else {
-      return is_assistant ? "bg-black" : "bg-sky-900";
+      return is_assistant ? "black" : "blue.600";
     }
   }, [colorMode, is_assistant]);
 
   return (
-    <div ref={ref} className={`${bgColor} p-4 rounded-md text-white whitespace-pre-wrap`}>
+    <Box bg={bgColor} ref={ref} className={`p-4 rounded-md text-white whitespace-pre-wrap`}>
       {text}
-    </div>
+    </Box>
   );
 });
 

website/src/components/Messages/MessageTableEntry.tsx

@@ -1,6 +1,6 @@
 import { Avatar, HStack, LinkBox, LinkOverlay, useColorModeValue } from "@chakra-ui/react";
-import Link from "next/link";
 import { boolean } from "boolean";
+import Link from "next/link";
 import { FlaggableElement } from "src/components/FlaggableElement";
 
 interface Message {
@@ -27,7 +27,7 @@ export function MessageTableEntry(props: MessageTableEntryProps) {
           />
 
           <Link href={`/messages/${item.id}`}>
-            <LinkBox bg={backgroundColor} fontFamily="Inter" className={`p-4 rounded-md whitespace-pre-wrap w-full`}>
+            <LinkBox bg={backgroundColor} className={`p-4 rounded-md whitespace-pre-wrap w-full`}>
               <LinkOverlay>{item.text}</LinkOverlay>
             </LinkBox>
           </Link>

website/src/components/RankItem.tsx

@@ -1,11 +1,57 @@
-const RankItem = ({ username, score }) => {
+import { Avatar, Box, GridItem, Text } from "@chakra-ui/react";
+
+const RankItem = () => {
+  const leaderInfo = [
+    {
+      username: "fozziethebeat",
+      rank: 1,
+      score: 530,
+      medal: "\uD83E\uDD47",
+    },
+    {
+      username: "k_nearest",
+      rank: 2,
+      score: 420,
+      medal: "\uD83E\uDD48",
+    },
+    {
+      username: "zu",
+      rank: 3,
+      score: 160,
+      medal: "\uD83E\uDD49",
+    },
+    {
+      username: "Abd",
+      rank: 4,
+      score: 140,
+      medal: "",
+    },
+  ];
+
   return (
-    <div className="flex flex-row justify-between p-6 border-2 border-slate-100 text-left font-semibold hover:bg-sky-50">
-      <div>1</div>
-      <div>{username}</div>
-      <div>{score}</div>
-      <div>gold</div>
-    </div>
+    <>
+      {leaderInfo.map((item, index) => (
+        <GridItem key={index} colSpan={4} display="grid" gridTemplateColumns="repeat(4, 1fr)" borderRadius="lg" p="2">
+          <GridItem overflow="hidden">
+            <Box display="flex" gap="2">
+              <Avatar size="xs" />
+              <Text>{item.username}</Text>
+            </Box>
+          </GridItem>
+          <GridItem>
+            <GridItem display="flex" justifyContent="center">
+              <Text>{item.rank}</Text>
+            </GridItem>
+          </GridItem>
+          <GridItem display="flex" justifyContent="center">
+            <Text>{item.score}</Text>
+          </GridItem>
+          <GridItem display="flex" justifyContent="center">
+            <Text fontSize="xl">{item.medal}</Text>
+          </GridItem>
+        </GridItem>
+      ))}
+    </>
   );
 };
 

website/src/components/SideMenuLayout.tsx

@@ -16,7 +16,7 @@ export const SideMenuLayout = (props: SideMenuLayoutProps) => {
         <Box className="p-6 sm:pr-0">
           <SideMenu buttonOptions={props.menuButtonOptions} />
         </Box>
-        <Box className="flex flex-col overflow-y-auto p-6 sm:pl-0 gap-14">{props.children}</Box>
+        <Box className="flex flex-col overflow-y-auto p-6 sm:pl-0 gap-14 w-full">{props.children}</Box>
       </Box>
     </Box>
   );

website/src/components/Sortable/SortableItem.tsx

@@ -1,35 +1,44 @@
-import { Button } from "@chakra-ui/react";
-import { useColorMode } from "@chakra-ui/react";
+import { Box, useColorModeValue } from "@chakra-ui/react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useState } from "react";
 import { RxDragHandleDots2 } from "react-icons/rx";
 
 export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => {
+  const backgroundColor = useColorModeValue("gray.700", "gray.500");
+  const textColor = useColorModeValue("white", "white");
+
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
 
   const style = {
-    transform: CSS.Transform.toString(transform),
+    transform: CSS.Translate.toString(transform),
     transition,
     touchAction: "none",
   };
 
-  const { colorMode } = useColorMode();
-  const themedClasses =
-    colorMode === "light"
-      ? "bg-slate-600 hover:bg-slate-500 text-white"
-      : "bg-black hover:bg-slate-900 text-white ring-1 ring-white/30 ring-inset hover:ring-slate-200/50";
+  const [grabbing, setGrabbing] = useState(false);
 
   return (
-    <li
-      className={`grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2 ${themedClasses}`}
+    <Box
+      display="flex"
+      alignItems="center"
+      bg={backgroundColor}
+      borderRadius="lg"
+      p="4"
+      color={textColor}
+      cursor={grabbing ? "grabbing" : "grab"}
+      onMouseDown={() => setGrabbing(true)}
+      onMouseUp={() => setGrabbing(false)}
+      {...attributes}
+      {...listeners}
       ref={setNodeRef}
       style={style}
+      shadow="base"
     >
-      <Button justifyContent="center" variant="ghost" {...attributes} {...listeners}>
-        <RxDragHandleDots2 />
-      </Button>
+      <Box pr="4">
+        <RxDragHandleDots2 size="20px" />
+      </Box>
       {children}
-    </li>
+    </Box>
   );
 };

website/src/components/Survey/SurveyCard.tsx

@@ -1,4 +1,4 @@
-import { useColorMode } from "@chakra-ui/react";
+import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react";
 
 interface SurveyCardProps {
   className?: string;
@@ -6,15 +6,18 @@ interface SurveyCardProps {
 }
 
 export const SurveyCard = (props: SurveyCardProps) => {
-  const extraClases = props.className || "";
-  const { colorMode } = useColorMode();
+  const backgroundColor = useColorModeValue("white", "gray.800");
 
-  const baseCardClasses = "rounded-lg h-full block p-6";
-  const cardClases =
-    colorMode === "light"
-      ? `${baseCardClasses} bg-slate-50 text-gray-800 shadow-lg ${extraClases}`
-      : // `${baseCardClasses} bg-slate-800 text-white shadow-xl${extraClases}`;
-        `${baseCardClasses} bg-slate-800 text-slate-400 shadow-xl ring-1 ring-white/10 ring-inset ${extraClases}`;
+  const BoxClasses: BoxProps = {
+    p: "6",
+    gap: "2",
+    borderRadius: "xl",
+    shadow: "base",
+  };
 
-  return <div className={cardClases}>{props.children}</div>;
+  return (
+    <Box bg={backgroundColor} {...BoxClasses}>
+      {props.children}
+    </Box>
+  );
 };

website/src/components/Survey/TaskControls.tsx

@@ -1,6 +1,4 @@
-import { useColorMode } from "@chakra-ui/react";
-import { Flex } from "@chakra-ui/react";
-import clsx from "clsx";
+import { Box, Flex, useColorModeValue } from "@chakra-ui/react";
 import { SkipButton } from "src/components/Buttons/Skip";
 import { SubmitButton } from "src/components/Buttons/Submit";
 import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
@@ -18,21 +16,21 @@ export interface TaskControlsProps {
 }
 
 export const TaskControls = (props: TaskControlsProps) => {
-  const { colorMode } = useColorMode();
-  const isLightMode = colorMode === "light";
+  const backgroundColor = useColorModeValue("white", "gray.800");
+
   return (
-    <section
-      className={clsx(
-        "flex-row justify-items-stretch mb-8 p-4 rounded-lg max-w-7xl mx-auto space-y-4 sm:space-y-0 sm:flex",
-        props.className,
-        {
-          "bg-white text-gray-800 shadow-lg": isLightMode,
-          "bg-slate-800 text-slate-400 shadow-xl ring-1 ring-white/10 ring-inset": !isLightMode,
-        }
-      )}
+    <Box
+      width="full"
+      bg={backgroundColor}
+      borderRadius="xl"
+      p="6"
+      display="flex"
+      flexDirection={["column", "row"]}
+      shadow="base"
+      gap="4"
     >
       <TaskInfo id={props.task.id} output="Submit your answer" />
-      <Flex justify="center" ml="auto" gap={2}>
+      <Flex width={["full", "fit-content"]} justify="center" ml="auto" gap={2}>
         <SkipButton onSkip={props.onSkip} disabled={props.taskStatus === "SUBMITTED"} />
         {props.taskStatus !== "SUBMITTED" ? (
           <SubmitButton
@@ -49,6 +47,6 @@ export const TaskControls = (props: TaskControlsProps) => {
           </SubmitButton>
         )}
       </Flex>
-    </section>
+    </Box>
   );
 };

website/src/components/Survey/TrackedTextarea.tsx

@@ -1,4 +1,4 @@
-import { Progress, Stack, Textarea, TextareaProps } from "@chakra-ui/react";
+import { Progress, Stack, Textarea, TextareaProps, useColorModeValue } from "@chakra-ui/react";
 
 interface TrackedTextboxProps {
   text: string;
@@ -12,6 +12,8 @@ interface TrackedTextboxProps {
 }
 
 export const TrackedTextarea = (props: TrackedTextboxProps) => {
+  const backgroundColor = useColorModeValue("gray.100", "gray.900");
+
   const wordCount = (props.text.match(/\w+/g) || []).length;
 
   let progressColor: string;
@@ -28,8 +30,23 @@ export const TrackedTextarea = (props: TrackedTextboxProps) => {
 
   return (
     <Stack direction={"column"}>
-      <Textarea data-cy="reply" value={props.text} onChange={props.onTextChange} {...props.textareaProps} />
-      <Progress size={"md"} rounded={"md"} value={wordCount} colorScheme={progressColor} max={props.thresholds.goal} />
+      <Textarea
+        backgroundColor={backgroundColor}
+        border="none"
+        data-cy="reply"
+        p="4"
+        value={props.text}
+        onChange={props.onTextChange}
+        {...props.textareaProps}
+      />
+      <Progress
+        size={"md"}
+        height={"2"}
+        rounded={"md"}
+        value={wordCount}
+        colorScheme={progressColor}
+        max={props.thresholds.goal}
+      />
     </Stack>
   );
 };

website/src/components/Survey/TwoColumnsWithCards.tsx

@@ -1,3 +1,4 @@
+import { Box, Stack } from "@chakra-ui/react";
 import { SurveyCard } from "src/components/Survey/SurveyCard";
 
 export const TwoColumnsWithCards = ({ children }: { children: React.ReactNode[] }) => {
@@ -8,9 +9,11 @@ export const TwoColumnsWithCards = ({ children }: { children: React.ReactNode[]
   const [first, second] = children;
 
   return (
-    <div className="mb-8 mx-auto max-w-7xl lt-lg:mb-12 grid lg:gap-x-12 lg:grid-cols-2">
-      <SurveyCard>{first}</SurveyCard>
-      <SurveyCard className="lg:mt-0 lt-lg:mt-6">{second}</SurveyCard>
-    </div>
+    <Box mb="4">
+      <Stack spacing="4">
+        <SurveyCard>{first}</SurveyCard>
+        <SurveyCard>{second}</SurveyCard>
+      </Stack>
+    </Box>
   );
 };

website/src/components/TaskInfo/TaskInfo.tsx

@@ -1,10 +1,38 @@
+import { Box, Flex, Text, TextProps, useColorModeValue } from "@chakra-ui/react";
+
+const TitleClasses: TextProps = {
+  fontWeight: "semibold",
+  fontSize: "md",
+  cursor: "default",
+};
+
+const LabelClasses: TextProps = {
+  fontSize: "sm",
+  cursor: "default",
+  color: "gray.500",
+};
+
 export const TaskInfo = ({ id, output }: { id: string; output: string }) => {
+  const titleColor = useColorModeValue("gray.700", "gray.400");
+
   return (
-    <div className="grid grid-cols-[min-content_auto] gap-x-2">
-      <b>Prompt</b>
-      <span data-cy="task-id">{id}</span>
-      <b>Output</b>
-      <span>{output}</span>
-    </div>
+    <Box>
+      <Flex direction="column">
+        <Flex alignItems="center" gap="2">
+          <Text {...TitleClasses} color={titleColor}>
+            Prompt
+          </Text>
+          <Text {...LabelClasses} data-cy="task-id">
+            {id}
+          </Text>
+        </Flex>
+        <Flex alignItems="center" gap="2">
+          <Text {...TitleClasses} color={titleColor}>
+            Output
+          </Text>
+          <Text {...LabelClasses}>{output}</Text>
+        </Flex>
+      </Flex>
+    </Box>
   );
 };

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>) => {
@@ -17,18 +21,32 @@ export const CreateTask = ({ task, taskType, onReplyChanged }: TaskSurveyProps<{
     <div data-cy="task" data-task-type="create-task">
       <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>
     </div>

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;
@@ -28,14 +33,22 @@ export const EvaluateTask = ({ task, onReplyChanged }: TaskSurveyProps<{ ranking
 
   return (
     <div data-cy="task" data-task-type="evaluate-task">
-      <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>
     </div>
   );
 };

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,26 +30,38 @@ 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 (
     <div data-cy="task" data-task-type="label-task">
       <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

website/src/pages/create/assistant_reply.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { TaskEmptyState } from "src/components/EmptyState";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreateAssistantReply } from "src/hooks/tasks/useCreateReply";
@@ -26,4 +27,6 @@ const AssistantReply = () => {
   );
 };
 
+AssistantReply.getLayout = getDashboardLayout;
+
 export default AssistantReply;

website/src/pages/create/initial_prompt.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { TaskEmptyState } from "src/components/EmptyState";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreateInitialPrompt } from "src/hooks/tasks/useCreateReply";
@@ -26,4 +27,6 @@ const InitialPrompt = () => {
   );
 };
 
+InitialPrompt.getLayout = getDashboardLayout;
+
 export default InitialPrompt;

website/src/pages/create/user_reply.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { TaskEmptyState } from "src/components/EmptyState";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useCreatePrompterReply } from "src/hooks/tasks/useCreateReply";
@@ -26,4 +27,6 @@ const UserReply = () => {
   );
 };
 
+UserReply.getLayout = getDashboardLayout;
+
 export default UserReply;

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { TaskEmptyState } from "src/components/EmptyState";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankAssistantRepliesTask } from "src/hooks/tasks/useRankReplies";
@@ -26,4 +27,6 @@ const RankAssistantReplies = () => {
   );
 };
 
+RankAssistantReplies.getLayout = getDashboardLayout;
+
 export default RankAssistantReplies;

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { TaskEmptyState } from "src/components/EmptyState";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankInitialPromptsTask } from "src/hooks/tasks/useRankReplies";
@@ -26,4 +27,6 @@ const RankInitialPrompts = () => {
   );
 };
 
+RankInitialPrompts.getLayout = getDashboardLayout;
+
 export default RankInitialPrompts;

website/src/pages/evaluate/rank_user_replies.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { TaskEmptyState } from "src/components/EmptyState";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useRankPrompterRepliesTask } from "src/hooks/tasks/useRankReplies";
@@ -26,4 +27,6 @@ const RankUserReplies = () => {
   );
 };
 
+RankUserReplies.getLayout = getDashboardLayout;
+
 export default RankUserReplies;

website/src/pages/label/label_assistant_reply.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { TaskEmptyState } from "src/components/EmptyState";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask";
@@ -26,4 +27,6 @@ const LabelAssistantReply = () => {
   );
 };
 
+LabelAssistantReply.getLayout = getDashboardLayout;
+
 export default LabelAssistantReply;

website/src/pages/label/label_initial_prompt.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { TaskEmptyState } from "src/components/EmptyState";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask";
@@ -26,4 +27,6 @@ const LabelInitialPrompt = () => {
   );
 };
 
+LabelInitialPrompt.getLayout = getDashboardLayout;
+
 export default LabelInitialPrompt;

website/src/pages/label/label_prompter_reply.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { TaskEmptyState } from "src/components/EmptyState";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask";
@@ -26,4 +27,6 @@ const LabelPrompterReply = () => {
   );
 };
 
+LabelPrompterReply.getLayout = getDashboardLayout;
+
 export default LabelPrompterReply;

website/src/pages/leaderboard/index.tsx

@@ -0,0 +1,80 @@
+import { Box, Grid, GridItem, GridItemProps, Heading, Text, useColorModeValue } from "@chakra-ui/react";
+import Head from "next/head";
+import { FiChevronDown } from "react-icons/fi";
+import { getDashboardLayout } from "src/components/Layout";
+import RankItem from "src/components/RankItem";
+
+const Leaderboard = () => {
+  const backgroundColor = useColorModeValue("white", "gray.800");
+
+  const GridProps: GridItemProps = {
+    justifyContent: "start",
+  };
+  const filter = [
+    {
+      title: "User",
+      isActive: false,
+      GridItemProps: { ...GridProps, justifyContent: "start" },
+    },
+    {
+      title: "Rank",
+      isActive: false,
+      GridItemProps: { ...GridProps, justifyContent: "center" },
+    },
+    {
+      title: "Score",
+      isActive: false,
+      GridItemProps: { ...GridProps, justifyContent: "center" },
+    },
+    {
+      title: "Medal",
+      isActive: false,
+      GridItemProps: { ...GridProps, justifyContent: "center" },
+    },
+  ];
+
+  return (
+    <>
+      <Head>
+        <title>Leaderboard - Open Assistant</title>
+        <meta name="description" content="Leaderboard Rankings" charSet="UTF-8" />
+      </Head>
+      <Box display="flex" flexDirection="column">
+        <Heading fontSize="2xl" fontWeight="bold" pb="4">
+          Leaderboard
+        </Heading>
+        <Grid>
+          <GridItem
+            colSpan={4}
+            bg={backgroundColor}
+            display="grid"
+            gridTemplateColumns="repeat(4, 1fr)"
+            p="4"
+            borderRadius="lg"
+            mb="4"
+            shadow="base"
+          >
+            {filter.map((item, index) => (
+              <GridItem key={index} display="flex" {...item.GridItemProps}>
+                <Box display="flex" alignItems="center" gap="2" width="fit-content" borderRadius="md" cursor="pointer">
+                  <Text fontSize="sm" fontWeight="bold" textTransform="uppercase">
+                    {item.title}
+                  </Text>
+
+                  <FiChevronDown size="16" />
+                </Box>
+              </GridItem>
+            ))}
+          </GridItem>
+        </Grid>
+        <Grid templateColumns="repeat(4, 1fr)" bg={backgroundColor} borderRadius="xl" shadow="base" p="4" gap="6">
+          <RankItem />
+        </Grid>
+      </Box>
+    </>
+  );
+};
+
+Leaderboard.getLayout = getDashboardLayout;
+
+export default Leaderboard;

website/src/pages/leaderboard/score-leaderboard.tsx

@@ -1,52 +0,0 @@
-import { HiBarsArrowDown } from "react-icons/hi2";
-import RankItem from "src/components/RankItem";
-
-const LeaderBoard = () => {
-  const PlaceHolderProps = { username: "test_user", score: 10 };
-  return (
-    <div className="p-6 bg-slate-100 text-gray-800">
-      <div className="flex flex-col">
-        <div className="rounded-lg shadow-lg h-full block bg-white">
-          <div className="p-8">
-            <h5 className="text-2xl font-bold">LeaderBoard</h5>
-          </div>
-          <div className="flex flex-row justify-between px-6 py-3 font-semibold text-md">
-            <div className="flex flex-row items-center justify-center space-x-2">
-              <div>
-                <p>Rank</p>
-              </div>
-              <div className="mt-2  text-slate-400 hover:text-sky-400 hover:cursor-pointer">
-                <HiBarsArrowDown className="w-6 h-6 text-inherit"></HiBarsArrowDown>
-              </div>
-            </div>
-            <div className="flex flex-row items-center justify-center space-x-2">
-              <div>
-                <p>User</p>
-              </div>
-              <div className="mt-2 text-slate-400 hover:text-sky-400 hover:cursor-pointer">
-                <HiBarsArrowDown className="w-6 h-6 text-inherit"></HiBarsArrowDown>
-              </div>
-            </div>
-            <div className="flex flex-row items-center justify-center space-x-2">
-              <div>
-                <p>Score</p>
-              </div>
-              <div className="mt-2  text-slate-400 hover:text-sky-400 hover:cursor-pointer">
-                <HiBarsArrowDown className="w-6 h-6 text-inherit"></HiBarsArrowDown>
-              </div>
-            </div>
-            <div className="flex flex-row items-center justify-center space-x-2">
-              <div>
-                <p>Medal</p>
-              </div>
-            </div>
-          </div>
-          {/* leaderboard items */}
-          <RankItem {...PlaceHolderProps}></RankItem>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LeaderBoard;

website/src/pages/messages/[id]/index.tsx

@@ -2,7 +2,7 @@ import { Box, Text, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
 import { getDashboardLayout } from "src/components/Layout";
-import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { MessageLoading } from "src/components/Loading/MessageLoading";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
 import { MessageWithChildren } from "src/components/Messages/MessageWithChildren";
 import fetcher from "src/lib/fetcher";
@@ -10,7 +10,6 @@ import useSWR from "swr";
 
 const MessageDetail = ({ id }) => {
   const backgroundColor = useColorModeValue("white", "gray.700");
-
   const [parent, setParent] = useState(null);
 
   const { isLoading: isLoadingParent } = useSWR(id ? `/api/messages/${id}/parent` : null, fetcher, {
@@ -23,11 +22,7 @@ const MessageDetail = ({ id }) => {
   });
 
   if (isLoadingParent) {
-    return (
-      <Box className="w-full">
-        <LoadingScreen text="Loading..." />
-      </Box>
-    );
+    return <MessageLoading />;
   }
   return (
     <>

website/src/pages/tasks/random.tsx

@@ -1,5 +1,6 @@
 import Head from "next/head";
 import { TaskEmptyState } from "src/components/EmptyState";
+import { getDashboardLayout } from "src/components/Layout";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Task } from "src/components/Tasks/Task";
 import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI";
@@ -26,4 +27,6 @@ const RandomTask = () => {
   );
 };
 
+RandomTask.getLayout = getDashboardLayout;
+
 export default RandomTask;

website/src/styles/Theme/index.ts

@@ -22,6 +22,11 @@ const breakpoints = {
   "2xl": "1536px",
 };
 
+const fonts = {
+  heading: "Inter",
+  body: "Inter",
+};
+
 const styles: Styles = {
   global: (props) => ({
     "*": {
@@ -33,13 +38,7 @@ const styles: Styles = {
       bg: props.colorMode === "light" ? colors.light.bg : colors.dark.bg,
       color: props.colorMode === "light" ? colors.light.text : colors.dark.text,
     },
-    main: {
-      fontFamily: "Inter",
-    },
-    header: {
-      fontFamily: "Inter",
-    },
   }),
 };
 
-export const theme = extendTheme({ colors, config, styles, components, breakpoints });
+export const theme = extendTheme({ colors, config, fonts, styles, components, breakpoints });