Darkmode for survey pages. Fixes for eslint.

website/next.config.js

@@ -3,7 +3,10 @@ const nextConfig = {
   output: "standalone",
   reactStrictMode: true,
   experimental: {
-    scrollRestoration: true,
+    /* Disabling this for now only because it causes a warning in the console that cannot be silenced for eslint
+       If this can be resolved, we should re-enable this.
+    */
+    // scrollRestoration: true,
   },
 };
 

website/package.json

@@ -22,6 +22,7 @@
     "@dnd-kit/core": "^6.0.6",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.1",
+    "@dnd-kit/utilities": "^3.2.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@headlessui/react": "^1.7.7",
@@ -39,9 +40,11 @@
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "focus-visible": "^5.2.0",
     "framer-motion": "^6.5.1",
+    "install": "^0.13.0",
     "next": "13.0.6",
     "next-auth": "^4.18.6",
     "nodemailer": "^6.8.0",
+    "npm": "^9.2.0",
     "postcss-focus-visible": "^7.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

website/src/components/AuthLayout.tsx

@@ -1,5 +1,3 @@
-
-
 export function AuthLayout({ children }) {
   return (
     <div className="flex items-center justify-center sm:py-4 subpixel-antialiased">

website/src/components/CallToAction.tsx

@@ -2,7 +2,6 @@ import { useId } from "react";
 import { useColorMode } from "@chakra-ui/react";
 import { Container } from "./Container";
 
-
 function CircleBackground({ width = 558, height = 558, ...props }) {
   const id = useId();
 
@@ -28,14 +27,11 @@ function CircleBackground({ width = 558, height = 558, ...props }) {
   );
 }
 
-
 export function CallToAction() {
-
   const { colorMode } = useColorMode();
   const bgColorClass = colorMode === "light" ? "bg-gray-900" : "bg-gray-50";
   const headingColorClass = colorMode === "light" ? "text-white" : "text-black";
   const textColorClass = colorMode === "light" ? "text-gray-300" : "text-black";
-  const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
 
   return (
     <section id="join-us" className={`relative overflow-hidden py-20 sm:py-28 ${bgColorClass} ${textColorClass}`}>

website/src/components/Faq.tsx

@@ -27,11 +27,7 @@ const faqs = [
 ];
 
 export function Faq() {
-
   const { colorMode } = useColorMode();
-  const bgColorClass = colorMode === "light" ? "bg-gray-900" : "bg-gray-50";
-  
-  const gradStopColor = colorMode === "light" ? "#06b6d4" : "#00f2ff";
 
   const headingColorClass = colorMode === "light" ? "text-gray-900" : "text-white";
   const textColorClass = colorMode === "light" ? "text-gray-700" : "text-gray-100";

website/src/components/Footer.tsx

@@ -21,62 +21,58 @@ export function Footer() {
           </div>
         </div>
 
+        <nav className="flex justify-center gap-20">
+          <div className="flex flex-col text-sm leading-7">
+            <b>Information</b>
+            <div className="flex flex-col leading-5">
+              <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
+                Our Team
+              </Link>
+              <Link href="/#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
+                Join Us
+              </Link>
+            </div>
+          </div>
           <nav className="flex justify-center gap-20">
             <div className="flex flex-col text-sm leading-7">
-              <b>Information</b>
+              <b>Legal</b>
               <div className="flex flex-col leading-5">
-                <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
+                <Link href="/privacy-policy" aria-label="Privacy Policy" className="hover:underline underline-offset-2">
-                  Our Team
+                  Privacy Policy
                 </Link>
-                <Link href="/#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
+                <Link
-                  Join Us
+                  href="/terms-of-service"
+                  aria-label="Terms of Service"
+                  className="hover:underline underline-offset-2"
+                >
+                  Terms of Service
                 </Link>
               </div>
             </div>
-            <nav className="flex justify-center gap-20">
+            <div className="flex flex-col text-sm leading-7">
-              <div className="flex flex-col text-sm leading-7">
+              <b>Connect</b>
-                <b>Legal</b>
+              <div className="flex flex-col leading-5">
-                <div className="flex flex-col leading-5">
+                <Link
-                  <Link
+                  href="https://github.com/LAION-AI/Open-Assistant"
-                    href="/privacy-policy"
+                  rel="noopener noreferrer nofollow"
-                    aria-label="Privacy Policy"
+                  target="_blank"
-                    className="hover:underline underline-offset-2"
+                  aria-label="Privacy Policy"
-                  >
+                  className="hover:underline underline-offset-2"
-                    Privacy Policy
+                >
-                  </Link>
+                  Github
-                  <Link
+                </Link>
-                    href="/terms-of-service"
+                <Link
-                    aria-label="Terms of Service"
+                  href="https://discord.gg/pXtnYk9c"
-                    className="hover:underline underline-offset-2"
+                  rel="noopener noreferrer nofollow"
-                  >
+                  target="_blank"
-                    Terms of Service
+                  aria-label="Terms of Service"
-                  </Link>
+                  className="hover:underline underline-offset-2"
-                </div>
+                >
+                  Discord
+                </Link>
               </div>
-              <div className="flex flex-col text-sm leading-7">
+            </div>
-                <b>Connect</b>
+          </nav>
-                <div className="flex flex-col leading-5">
-                  <Link
-                    href="https://github.com/LAION-AI/Open-Assistant"
-                    rel="noopener noreferrer nofollow"
-                    target="_blank"
-                    aria-label="Privacy Policy"
-                    className="hover:underline underline-offset-2"
-                  >
-                    Github
-                  </Link>
-                  <Link
-                    href="https://discord.gg/pXtnYk9c"
-                    rel="noopener noreferrer nofollow"
-                    target="_blank"
-                    aria-label="Terms of Service"
-                    className="hover:underline underline-offset-2"
-                  >
-                    Discord
-                  </Link>
-                </div>
-              </div>
-            </nav>
           {/* </div> */}
         </nav>
       </div>

website/src/components/Header/Header.stories.jsx

@@ -26,11 +26,11 @@ Default.args = {
   session: {
     data: {
       user: {
-        name: "StoryBook user"
+        name: "StoryBook user",
-      }
+      },
     },
-    status: "authenticated"
+    status: "authenticated",
   },
   transparent: false,
-  borderClass: undefined
+  borderClass: undefined,
 };

website/src/components/Header/Header.tsx

@@ -1,6 +1,5 @@
 import { Button, Box } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
-import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
@@ -115,7 +114,7 @@ export function Header(props) {
           </Popover>
           <AccountButton />
           <UserMenu />
-          <ColorModeIconToggle className="ml-5"/>
+          <ColorModeIconToggle className="ml-5" />
         </div>
       </Box>
     </nav>

website/src/components/Header/NavLinks.tsx

@@ -4,19 +4,13 @@ import { useState } from "react";
 
 import { useColorMode } from "@chakra-ui/react";
 
-
 export function NavLinks(): JSX.Element {
   const [hoveredIndex, setHoveredIndex] = useState(null);
   const { colorMode } = useColorMode();
 
+  const linkColor = colorMode === "light" ? "text-gray-700 hover:text-gray-900" : "text-gray-50 hover:text-white";
 
-  const linkColor = (colorMode === "light") ? 
+  const hoverBgColor = colorMode === "light" ? "bg-gray-100" : "bg-gray-800";
-    "text-gray-700 hover:text-gray-900" :
-    "text-gray-50 hover:text-white";
-
-  const hoverBgColor = (colorMode === "light") ? 
-  "bg-gray-100" :
-  "bg-gray-800";
 
   return (
     <>

website/src/components/Hero.tsx

@@ -57,15 +57,18 @@ function BackgroundIllustration(props) {
 export function Hero() {
   const { colorMode } = useColorMode();
   const pTextColor = colorMode === "light" ? "text-gray-600" : "text-white";
-  const fancyTextGradientClasses = colorMode === "light" ? "from-blue-600 via-sky-400 to-blue-700" : "from-blue-500 via-sky-300 to-blue-400";
+  const fancyTextGradientClasses =
-  
+    colorMode === "light" ? "from-blue-600 via-sky-400 to-blue-700" : "from-blue-500 via-sky-300 to-blue-400";
+
   return (
     <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
       <Container className="">
         <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
             <h1 className="text-5xl mb-6 font-bold tracking-tight">Open Assistant</h1>
-            <p className={`bg-gradient-to-r ${fancyTextGradientClasses} mt-8 text-3xl inline bg-clip-text font-display tracking-tight text-transparent`}>
+            <p
+              className={`bg-gradient-to-r ${fancyTextGradientClasses} mt-8 text-3xl inline bg-clip-text font-display tracking-tight text-transparent`}
+            >
               <b>Conversational AI for everyone.</b>
             </p>
             <p className={`mt-6 text-lg ${pTextColor}`}>We believe we can create a revolution.</p>

website/src/components/Loading/LoadingScreen.jsx

@@ -1,12 +1,18 @@
-import { Container, Progress } from "@chakra-ui/react";
+import { Progress } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 
-export const LoadingScreen = ({ text }) => (
+export const LoadingScreen = ({ text }) => {
-  <Container>
+  const { colorMode } = useColorMode();
-    <Progress size="xs" isIndeterminate />
+  const mainClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-    {text && (
+
-      <Container className="flex h-full">
+  return (
-        <div className="text-xl font-bold text-gray-800  mx-auto my-auto">{text}</div>
+    <div className={`h-full ${mainClasses}`}>
-      </Container>
+      <Progress size="sm" isIndeterminate />
-    )}
+      {text && (
-  </Container>
+        <div className="flex h-full">
-);
+          <div className="text-xl font-bold  mx-auto my-auto">{text}</div>
+        </div>
+      )}
+    </div>
+  );
+};

website/src/components/Messages.tsx

@@ -1,20 +1,32 @@
 import { FlaggableElement } from "./FlaggableElement";
+import { useColorMode } from "@chakra-ui/react";
 
 export interface Message {
   text: string;
   is_assistant: boolean;
 }
 
-const getColor = (isAssistant: boolean) => (isAssistant ? "bg-slate-800" : "bg-sky-900");
+const getBgColor = (isAssistant: boolean, colorMode: "light" | "dark") => {
+  if (colorMode === "light") {
+    return isAssistant ? "bg-slate-800" : "bg-sky-900";
+  } else {
+    return isAssistant ? "bg-black" : "bg-sky-900";
+  }
+};
 
 export const Messages = ({ messages, post_id }: { messages: Message[]; post_id: string }) => {
+  const { colorMode } = useColorMode();
+
   const items = messages.map(({ text, is_assistant }: Message, i: number) => {
     return (
       <div className="flex" key={i + text}>
         <FlaggableElement text={text} post_id={post_id}>
           <div
             key={i + text}
-            className={`${getColor(is_assistant)} p-4 my-1 rounded-xl text-white whitespace-pre-wrap float-left mr-3`}
+            className={`${getBgColor(
+              is_assistant,
+              colorMode
+            )} p-4 my-2 rounded-xl text-white whitespace-pre-wrap float-left mr-3`}
           >
             {text}
           </div>
@@ -22,6 +34,5 @@ export const Messages = ({ messages, post_id }: { messages: Message[]; post_id:
       </div>
     );
   });
-  // Maybe also show a legend of the colors?
   return <>{items}</>;
 };

website/src/components/Sortable/Sortable.tsx

@@ -23,6 +23,7 @@ import { SortableItem } from "./SortableItem";
 export interface SortableProps {
   items: ReactNode[];
   onChange: (newSortedIndices: number[]) => void;
+  className?: string;
 }
 
 interface SortableItems {
@@ -31,18 +32,18 @@ interface SortableItems {
   item: ReactNode;
 }
 
-export const Sortable = ({ items, onChange }: SortableProps) => {
+export const Sortable = (props: SortableProps) => {
   const [itemsWithIds, setItemsWithIds] = useState<SortableItems[]>([]);
 
   useEffect(() => {
     setItemsWithIds(
-      items.map((item, idx) => ({
+      props.items.map((item, idx) => ({
         item,
         id: idx + 1, // +1 because dndtoolkit has problem with "falsy" ids
         originalIndex: idx,
       }))
     );
-  }, [items]);
+  }, [props.items]);
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -50,6 +51,8 @@ export const Sortable = ({ items, onChange }: SortableProps) => {
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
 
+  const extraClasses = props.className || "";
+
   return (
     <DndContext
       sensors={sensors}
@@ -58,7 +61,7 @@ export const Sortable = ({ items, onChange }: SortableProps) => {
       modifiers={[restrictToVerticalAxis]}
     >
       <SortableContext items={itemsWithIds} strategy={verticalListSortingStrategy}>
-        <Flex direction="column" gap={2}>
+        <Flex direction="column" gap={2} className={extraClasses}>
           {itemsWithIds.map(({ id, item }) => (
             <SortableItem key={id} id={id}>
               {item}
@@ -78,7 +81,7 @@ export const Sortable = ({ items, onChange }: SortableProps) => {
       const oldIndex = items.findIndex((x) => x.id === active.id);
       const newIndex = items.findIndex((x) => x.id === over.id);
       const newArray = arrayMove(items, oldIndex, newIndex);
-      onChange(newArray.map((item) => item.originalIndex));
+      props.onChange(newArray.map((item) => item.originalIndex));
       return newArray;
     });
   }

website/src/components/Sortable/SortableItem.tsx

@@ -1,12 +1,9 @@
-<<<<<<< HEAD
-import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/20/solid";
-=======
->>>>>>> main
 import { Button } from "@chakra-ui/react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { RxDragHandleDots2 } from "react-icons/rx";
 import { PropsWithChildren } from "react";
+import { useColorMode } from "@chakra-ui/react";
 
 export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
@@ -17,9 +14,15 @@ export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>
     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";
+
   return (
     <li
-      className="grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2 bg-white hover:bg-slate-50"
+      className={`grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2 ${themedClasses}`}
       ref={setNodeRef}
       style={style}
     >

website/src/components/Survey/SurveyCard.tsx

@@ -0,0 +1,20 @@
+import { useColorMode } from "@chakra-ui/react";
+
+interface SurveyCardProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const SurveyCard = (props: SurveyCardProps) => {
+  const extraClases = props.className || "";
+  const { colorMode } = useColorMode();
+
+  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}`;
+
+  return <div className={cardClases}>{props.children}</div>;
+};

website/src/components/Survey/TaskControls.tsx

@@ -0,0 +1,40 @@
+import { useColorMode } from "@chakra-ui/react";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { Flex } from "@chakra-ui/react";
+import { SkipButton } from "src/components/Buttons/Skip";
+import { SubmitButton } from "src/components/Buttons/Submit";
+
+interface TaskControlsProps {
+  // we need a task type
+  // eslint-disable-next-line  @typescript-eslint/no-explicit-any
+  tasks: any[];
+  className?: string;
+  onSubmitResponse: (task: { id: string }) => void;
+  onSkip: () => void;
+}
+
+export const TaskControls = (props: TaskControlsProps) => {
+  const extraClases = props.className || "";
+  const { colorMode } = useColorMode();
+
+  const baseClasses = "flex flex-row justify-items-stretch mb-8 p-4 rounded-lg max-w-7xl mx-auto";
+  const taskControlClases =
+    colorMode === "light"
+      ? `${baseClasses} bg-white text-gray-800 shadow-lg ${extraClases}`
+      : `${baseClasses} bg-slate-800 text-slate-400 shadow-xl ring-1 ring-white/10 ring-inset ${extraClases}`;
+
+  const endTask = props.tasks[props.tasks.length - 1];
+  return (
+    <section className={taskControlClases}>
+      <TaskInfo id={props.tasks[0].id} output="Submit your answer" />
+      <Flex justify="center" ml="auto" gap={2}>
+        <SkipButton>Skip</SkipButton>
+        {endTask.task.type !== "task_done" ? (
+          <SubmitButton onClick={() => props.onSubmitResponse(props.tasks[0])}>Submit</SubmitButton>
+        ) : (
+          <SubmitButton onClick={props.onSkip}>Next Task</SubmitButton>
+        )}
+      </Flex>
+    </section>
+  );
+};

website/src/components/Survey/TwoColumnsWithCards.tsx

@@ -0,0 +1,16 @@
+import { SurveyCard } from "src/components/Survey/SurveyCard";
+
+export const TwoColumnsWithCards = ({ children }: { children: React.ReactNode[] }) => {
+  if (!Array.isArray(children) || children.length !== 2) {
+    throw new Error("TwoColumns expects 2 children");
+  }
+
+  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>
+  );
+};

website/src/components/TaskSelection/TaskSelection.tsx

@@ -6,15 +6,19 @@ import { TaskOption } from "./TaskOption";
 import { TaskOptions } from "./TaskOptions";
 
 export const TaskSelection = () => {
-
   const { colorMode } = useColorMode();
-  const bgColorClass = colorMode === "light" ? "bg-gray-50" : "bg-gray-600";
+  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
-  const buttonBgColor = colorMode === "light" ? "#2563eb" : "#2563eb";
-  const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
-
 
   return (
-    <Flex gap={10} wrap="wrap" justifyContent="space-evenly" width="full" height="full" alignItems={"center"} className={bgColorClass}>
+    <Flex
+      gap={10}
+      wrap="wrap"
+      justifyContent="space-evenly"
+      width="full"
+      height="full"
+      alignItems={"center"}
+      className={mainBgClasses}
+    >
       <TaskOptions key="create" title="Create">
         {/* <TaskOption
           alt="Summarize Stories"

website/src/components/TwoColumns.tsx

@@ -1,20 +0,0 @@
-import { Container, useColorModeValue } from "@chakra-ui/react";
-
-export const TwoColumns = ({ children }: { children: React.ReactNode[] }) => {
-  if (!Array.isArray(children) || children.length !== 2) {
-    throw new Error("TwoColumns expects 2 children");
-  }
-  const bg = useColorModeValue("white", "gray.700");
-  const [first, second] = children;
-
-  return (
-    <Container className="mb-8 lt-lg:mb-12 grid lg:gap-x-12 lg:grid-cols-2">
-      <Container bg={bg} className="rounded-lg shadow-lg h-full block p-6">
-        {first}
-      </Container>
-      <Container bg={bg} className="rounded-lg shadow-lg h-full block p-6 mt-6 lg:mt-0">
-        {second}
-      </Container>
-    </Container>
-  );
-};

website/src/components/UI/ColorModeIconToggle.tsx

@@ -1,12 +1,11 @@
 import { useColorMode } from "@chakra-ui/react";
 
-import { CiDark } from 'react-icons/ci';
+import { CiDark } from "react-icons/ci";
-import { CiLight } from 'react-icons/ci';
+import { CiLight } from "react-icons/ci";
-
 
 export function ColorModeIconToggle(props) {
   const { colorMode, toggleColorMode } = useColorMode();
-  const propsClassName = props.className ?? '';
+  const propsClassName = props.className ?? "";
 
   return (
     <button
@@ -15,12 +14,11 @@ export function ColorModeIconToggle(props) {
       aria-label="Toggle dark mode"
       onClick={toggleColorMode}
     >
-      {colorMode === 'light' ? (
+      {colorMode === "light" ? (
-          <CiDark className="h-5 w-5 stroke-zinc-900 dark:hidden"/>
+        <CiDark className="h-5 w-5 stroke-zinc-900 dark:hidden" />
-        ) : (
+      ) : (
-          <CiLight className="h-5 w-5 stroke-white" />
+        <CiLight className="h-5 w-5 stroke-white" />
-        )
+      )}
-      }
     </button>
-  )
+  );
 }

website/src/components/UI/ColorModeSwitch.tsx

@@ -13,4 +13,4 @@ const ColorModeSwitch = () => {
   );
 };
 
-export default ColorModeSwitch;
+export default ColorModeSwitch;

website/src/pages/auth/signin.tsx

@@ -27,12 +27,9 @@ function Signin({ csrfToken, providers }) {
   const { colorMode } = useColorMode();
   const bgColorClass = colorMode === "light" ? "bg-gray-50" : "bg-chakra-gray-900";
   const buttonBgColor = colorMode === "light" ? "#2563eb" : "#2563eb";
-  const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
 
   const buttonColorScheme = colorMode === "light" ? "blue" : "dark-blue-btn";
 
-
-
   return (
     <div className={bgColorClass}>
       <Head>
@@ -45,7 +42,7 @@ function Signin({ csrfToken, providers }) {
             <form onSubmit={signinWithDebugCredentials} className="border-2 border-orange-600 rounded-md p-4 relative">
               <span className={`text-orange-600 absolute -top-3 left-5 ${bgColorClass} px-1`}>For Debugging Only</span>
               <Stack>
-                <Input variant="outline" size="lg" placeholder="Username" ref={debugUsernameEl}/>
+                <Input variant="outline" size="lg" placeholder="Username" ref={debugUsernameEl} />
                 <Button size={"lg"} leftIcon={<FaBug />} colorScheme={buttonColorScheme} color="white" type="submit">
                   Continue with Debug User
                 </Button>
@@ -56,7 +53,13 @@ function Signin({ csrfToken, providers }) {
             <form onSubmit={signinWithEmail}>
               <Stack>
                 <Input variant="outline" size="lg" placeholder="Email Address" ref={emailEl} />
-                <Button size={"lg"} leftIcon={<FaEnvelope />} type="submit" colorScheme={buttonColorScheme} color="white">
+                <Button
+                  size={"lg"}
+                  leftIcon={<FaEnvelope />}
+                  type="submit"
+                  colorScheme={buttonColorScheme}
+                  color="white"
+                >
                   Continue with Email
                 </Button>
               </Stack>
@@ -117,7 +120,6 @@ function Signin({ csrfToken, providers }) {
   );
 }
 
-
 Signin.getLayout = (page) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
     <Header transparent={true} />
@@ -128,7 +130,7 @@ Signin.getLayout = (page) => (
 
 export default Signin;
 
-export async function getServerSideProps(context) {
+export async function getServerSideProps() {
   const csrfToken = await getCsrfToken();
   const providers = await getProviders();
   return {

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 { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
-import { TwoColumns } from "src/components/TwoColumns";
 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">
+    <div className={`p-12 ${mainBgClasses}`}>
-      <TwoColumns>
+      <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 ">
+      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
-        <TaskInfo id={tasks[0].id} output="Submit your answer" />
+    </div>
-
-        <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>
   );
 };
 

website/src/pages/create/summarize_story.tsx

@@ -1,15 +1,13 @@
-import { Flex, Textarea } from "@chakra-ui/react";
+import { Textarea } from "@chakra-ui/react";
-import Head from "next/head";
 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 { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
-import { TwoColumns } from "src/components/TwoColumns";
 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 SummarizeStory = () => {
   // Use an array of tasks that record the sequence of steps until a task is
@@ -20,7 +18,7 @@ const SummarizeStory = () => {
 
   // Fetch the very fist task.  We can ignore everything except isLoading
   // because the onSuccess handler will update `tasks` when ready.
-  const { isLoading } = useSWRImmutable("/api/new_task/summarize_story", fetcher, {
+  const { isLoading, mutate } = useSWRImmutable("/api/new_task/summarize_story", fetcher, {
     onSuccess: (data) => {
       setTasks([data]);
     },
@@ -50,6 +48,14 @@ const SummarizeStory = () => {
     });
   };
 
+  const fetchNextTask = () => {
+    inputRef.current.value = "";
+    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..." />;
   }
@@ -59,31 +65,20 @@ const SummarizeStory = () => {
   }
 
   return (
-    <>
+    <div className={`p-12 ${mainBgClasses}`}>
-      <Head>
-        <title>Summarize A Story</title>
-        <meta name="description" content="Summarize a story to train our model." />
-      </Head>
       <main className="p-6 h-full mx-auto bg-slate-100 text-gray-800">
-        <TwoColumns>
+        <TwoColumnsWithCards>
           <>
             <h5 className="text-lg font-semibold">Instruction</h5>
             <p className="text-lg py-1">Summarize the following story</p>
             <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">{tasks[0].task.story}</div>
           </>
           <Textarea name="summary" placeholder="Summary" ref={inputRef} />
-        </TwoColumns>
+        </TwoColumnsWithCards>
 
-        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
+        <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
-          <TaskInfo id={tasks[0].id} output="Submit your answer" />
-
-          <Flex justify="center" ml="auto" gap={2}>
-            <SkipButton>Skip</SkipButton>
-            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
-          </Flex>
-        </section>
       </main>
-    </>
+    </div>
   );
 };
 

website/src/pages/create/user_reply.tsx

@@ -1,20 +1,17 @@
-import { Flex, Textarea, useColorModeValue } from "@chakra-ui/react";
+import { Textarea } from "@chakra-ui/react";
-import { Container } from "src/components/Container";
 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 { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
-import { TwoColumns } from "src/components/TwoColumns";
 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 UserReply = () => {
   const [tasks, setTasks] = useState([]);
-  const bg = useColorModeValue("white", "gray.400");
 
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
@@ -47,19 +44,28 @@ const UserReply = () => {
     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..." />;
   }
 
   if (tasks.length == 0) {
-    return <Container className="p-6 text-gray-800">No tasks found...</Container>;
+    return (
+      <div className={`p-12 ${mainBgClasses}`}>
+        <div className="flex h-full">
+          <div className="text-xl font-bold  mx-auto my-auto">No tasks found...</div>
+        </div>
+      </div>
+    );
   }
 
   const task = tasks[0].task;
-  const endTask = tasks[tasks.length - 1];
+
   return (
-    <Container className="p-6">
+    <div className={`p-12 ${mainBgClasses}`}>
-      <TwoColumns>
+      <TwoColumnsWithCards>
         <>
           <h5 className="text-lg font-semibold">Reply as a user</h5>
           <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
@@ -67,20 +73,10 @@ const UserReply = () => {
           {task.hint && <p className="text-lg py-1">Hint: {task.hint}</p>}
         </>
         <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 ">
+      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
-        <TaskInfo id={tasks[0].id} output="Submit your answer" />
+    </div>
-        <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>
   );
 };
 

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -1,15 +1,14 @@
-import { Button, Container, Flex, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
 import { 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 { Sortable } from "src/components/Sortable/Sortable";
-import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
+import { SurveyCard } from "src/components/Survey/SurveyCard";
+import { useColorMode } from "@chakra-ui/react";
+import { TaskControls } from "src/components/Survey/TaskControls";
 
 const RankAssistantReplies = () => {
   const [tasks, setTasks] = useState([]);
@@ -18,8 +17,7 @@ const RankAssistantReplies = () => {
    * The best reply will have index 0, and the worst is the last.
    */
   const [ranking, setRanking] = useState<number[]>([]);
-  
+
-  const bg = useColorModeValue("gray.100", "gray.800");
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_assistant_replies", fetcher, {
     onSuccess: (data) => {
       setTasks([data]);
@@ -48,46 +46,42 @@ const RankAssistantReplies = () => {
     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..." />;
   }
 
   if (tasks.length == 0) {
-    return <Container className="p-6 bg-slate-100 text-gray-800">No Tasks Found...</Container>;
+    return (
+      <div className={`p-12 ${mainBgClasses}`}>
+        <div className="flex h-full">
+          <div className="text-xl font-bold  mx-auto my-auto">No tasks found...</div>
+        </div>
+      </div>
+    );
   }
 
   const replies = tasks[0].task.replies as string[];
-  const endTask = tasks[tasks.length - 1];
+
   return (
     <>
       <Head>
         <title>Rank Assistant Replies</title>
         <meta name="description" content="Rank Assistant Replies." />
       </Head>
-      <Container className="p-6 bg-slate-100 text-gray-800">
+      <div className={`p-12 ${mainBgClasses}`}>
-        <Container bg={bg} className="rounded-lg shadow-lg block  p-6 mb-8">
+        <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 replies, sort them from best to worst, best being first, worst being last.
           </p>
-          <Sortable items={replies} onChange={setRanking} />
+          <Sortable items={replies} onChange={setRanking} className="my-8" />
-        </Container>
+        </SurveyCard>
 
-        <Container bg={bg} className="mb-8 p-4 rounded-lg shadow-lg  flex flex-row justify-items-stretch">
+        <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
-          <TaskInfo id={tasks[0].id} output="Submit your answer" />
+      </div>
-
-          <Flex justify="center" ml="auto" gap={2}>
-            <SkipButton>Skip</SkipButton>
-            {endTask.task.type !== "task_done" ? (
-              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
-                Submit
-              </SubmitButton>
-            ) : (
-              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
-            )}
-          </Flex>
-        </Container>
-      </Container>
     </>
   );
 };

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -1,15 +1,14 @@
-import { Flex } from "@chakra-ui/react";
 import Head from "next/head";
 import { 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 { Sortable } from "src/components/Sortable/Sortable";
-import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
+import { SurveyCard } from "src/components/Survey/SurveyCard";
+import { useColorMode } from "@chakra-ui/react";
+import { TaskControls } from "src/components/Survey/TaskControls";
 
 const RankInitialPrompts = () => {
   const [tasks, setTasks] = useState([]);
@@ -18,7 +17,7 @@ const RankInitialPrompts = () => {
    * The best prompt will have index 0, and the worst is the last.
    */
   const [ranking, setRanking] = useState<number[]>([]);
-  const bg = useColorModeValue("gray.100", "gray.800");
+  // const bg = useColorModeValue("gray.100", "gray.800");
 
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_initial_prompts", fetcher, {
     onSuccess: (data) => {
@@ -48,45 +47,40 @@ const RankInitialPrompts = () => {
     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..." />;
   }
 
   if (tasks.length == 0) {
-    return <Container className="p-6 bg-slate-100 text-gray-800">No tasks found...</Container>;
+    return (
+      <div className={`p-12 ${mainBgClasses}`}>
+        <div className="flex h-full">
+          <div className="text-xl font-bold  mx-auto my-auto">No tasks found...</div>
+        </div>
+      </div>
+    );
   }
 
-  const endTask = tasks[tasks.length - 1];
   return (
     <>
       <Head>
         <title>Rank Initial Prompts</title>
         <meta name="description" content="Rank initial prompts." />
       </Head>
-      <Container className="p-6 text-gray-800">
+      <div className={`p-12 ${mainBgClasses}`}>
-        <Container bg={bg} className="rounded-lg shadow-lg block  p-6 mb-8">
+        <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 prompts, sort them from best to worst, best being first, worst being last.
           </p>
-          <Sortable items={tasks[0].task.prompts} onChange={setRanking} />
+          <Sortable items={tasks[0].task.prompts} onChange={setRanking} className="my-8" />
-        </Container>
+        </SurveyCard>
 
-        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch">
+        <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
-          <TaskInfo id={tasks[0].id} output="Submit your answer" />
+      </div>
-
-          <Flex justify="center" ml="auto" gap={2}>
-            <SkipButton>Skip</SkipButton>
-            {endTask.task.type !== "task_done" ? (
-              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
-                Submit
-              </SubmitButton>
-            ) : (
-              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
-            )}
-          </Flex>
-        </section>
-      </Container>
     </>
   );
 };

website/src/pages/evaluate/rank_user_replies.tsx

@@ -1,15 +1,14 @@
-import { Flex } from "@chakra-ui/react";
 import Head from "next/head";
 import { 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 { Sortable } from "src/components/Sortable/Sortable";
-import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
+import { SurveyCard } from "src/components/Survey/SurveyCard";
+import { useColorMode } from "@chakra-ui/react";
+import { TaskControls } from "src/components/Survey/TaskControls";
 
 const RankUserReplies = () => {
   const [tasks, setTasks] = useState([]);
@@ -19,7 +18,6 @@ const RankUserReplies = () => {
    */
   const [ranking, setRanking] = useState<number[]>([]);
 
-  const bg = useColorModeValue("gray.100", "gray.800");
   const { isLoading, mutate } = useSWRImmutable("/api/new_task/rank_prompter_replies", fetcher, {
     onSuccess: (data) => {
       setTasks([data]);
@@ -48,46 +46,41 @@ const RankUserReplies = () => {
     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..." />;
   }
 
   if (tasks.length == 0) {
-    return <Container className="p-6 bg-slate-100 text-gray-800">Loading...</Container>;
+    return (
+      <div className={`p-12 ${mainBgClasses}`}>
+        <div className="flex h-full">
+          <div className="text-xl font-bold  mx-auto my-auto">No tasks found...</div>
+        </div>
+      </div>
+    );
   }
   const replies = tasks[0].task.replies as string[];
 
-  const endTask = tasks[tasks.length - 1];
   return (
     <>
       <Head>
         <title>Rank User Replies</title>
         <meta name="description" content="Rank User Replies." />
       </Head>
-      <Container className="p-6 text-gray-800">
+      <div className={`p-12 ${mainBgClasses}`}>
-        <Container bg={bg} className="rounded-lg shadow-lg block bg-white p-6 mb-8">
+        <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 replies, sort them from best to worst, best being first, worst being last.
           </p>
-          <Sortable items={replies} onChange={setRanking} />
+          <Sortable items={replies} onChange={setRanking} className="my-8" />
-        </Container>
+        </SurveyCard>
 
-        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
+        <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
-          <TaskInfo id={tasks[0].id} output="Submit your answer" />
+      </div>
-
-          <Flex justify="center" ml="auto" gap={2}>
-            <SkipButton>Skip</SkipButton>
-            {endTask.task.type !== "task_done" ? (
-              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
-                Submit
-              </SubmitButton>
-            ) : (
-              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
-            )}
-          </Flex>
-        </section>
-      </Container>
     </>
   );
 };

website/src/pages/evaluate/rate_summary.tsx

@@ -1,18 +1,18 @@
-import { Flex, Textarea } from "@chakra-ui/react";
+import { Textarea } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import Head from "next/head";
 import { 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 RatingRadioGroup from "src/components/RatingRadioGroup";
-import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
-import { TwoColumns } from "src/components/TwoColumns";
 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 RateSummary = () => {
   // Use an array of tasks that record the sequence of steps until a task is
   // deemed complete.
@@ -50,15 +50,27 @@ const RateSummary = () => {
     });
   };
 
+  const fetchNextTask = () => {
+    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..." />;
   }
 
   if (tasks.length == 0) {
-    return <div className="p-6 bg-slate-100 text-gray-800">No tasks found...</div>;
+    return (
+      <div className={`p-12 ${mainBgClasses}`}>
+        <div className="flex h-full">
+          <div className="text-xl font-bold  mx-auto my-auto">No tasks found...</div>
+        </div>
+      </div>
+    );
   }
 
-  const endTask = tasks[tasks.length - 1];
   return (
     <>
       <Head>
@@ -66,7 +78,7 @@ const RateSummary = () => {
         <meta name="description" content="Rate a proposed story summary." />
       </Head>
       <main className="p-6 bg-slate-100 text-gray-800">
-        <TwoColumns>
+        <TwoColumnsWithCards>
           <>
             <h5 className="text-lg font-semibold mb-4">Instruction</h5>
             <div className="bg-slate-800 p-6 rounded-xl text-white whitespace-pre-wrap">{tasks[0].task.full_text}</div>
@@ -89,20 +101,9 @@ const RateSummary = () => {
             </ul>
             <Textarea name="notes" placeholder="Optional notes" />
           </section>
-        </TwoColumns>
+        </TwoColumnsWithCards>
 
-        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
+        <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
-          <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={mutate}>Next Task</SubmitButton>
-            )}
-          </Flex>
-        </section>
       </main>
     </>
   );

website/src/pages/index.tsx

@@ -6,7 +6,6 @@ import { Footer } from "src/components/Footer";
 import { Header } from "src/components/Header";
 import { Hero } from "src/components/Hero";
 import { TaskSelection } from "src/components/TaskSelection";
-import { Box, Container } from "@chakra-ui/react";
 
 const Home = () => {
   const { data: session } = useSession();
@@ -21,7 +20,7 @@ const Home = () => {
         />
       </Head>
       {session ? (
-          <TaskSelection />
+        <TaskSelection />
       ) : (
         <main className="oa-basic-theme">
           <Hero />

website/src/styles/Theme/colors.ts

@@ -7,8 +7,8 @@ export const colors = {
     bg: "gray.900",
     text: "white",
   },
-  'dark-blue-btn': {
+  "dark-blue-btn": {
-    200: 'rgb(29,78,216)',
+    200: "rgb(29,78,216)",
-    300: 'blue',
+    300: "blue",
-  }
+  },
-};
+};

website/src/styles/Theme/components/Container.ts

@@ -3,12 +3,12 @@ import { defineStyleConfig } from "@chakra-ui/styled-system";
 const baseStyle = {};
 
 const variants = {
-  'no-padding': {
+  "no-padding": {
     padding: 0,
-  }
+  },
-}
+};
 
 export const containerTheme = defineStyleConfig({
   baseStyle,
   variants,
-})
+});

website/src/styles/Theme/index.ts

@@ -7,7 +7,6 @@ const config: ThemeConfig = {
   initialColorMode: "light",
   useSystemColorMode: true,
   disableTransitionOnChange: false,
-  
 };
 
 const components = {
@@ -16,12 +15,12 @@ const components = {
 
 const styles: Styles = {
   global: (props) => ({
-    '*': {
+    "*": {
       transition: "background-color 200ms cubic-bezier(0.4, 0, 1, 1)",
       // bg: props.colorMode === "light" ? colors.light.bg : colors.dark.bg,
       // color: props.colorMode === "light" ? colors.light.text : colors.dark.text,
     },
-    '.oa-basic-theme': {
+    ".oa-basic-theme": {
       bg: props.colorMode === "light" ? colors.light.bg : colors.dark.bg,
       color: props.colorMode === "light" ? colors.light.text : colors.dark.text,
     },

website/tailwind.config.js

@@ -73,8 +73,8 @@ module.exports = {
       },
 
       colors: {
-        'chakra-gray-900': '#171923',
+        "chakra-gray-900": "#171923",
-      }
+      },
     },
   },
   plugins: [require("@tailwindcss/forms")],