Darkmode for survey pages. Fixes for eslint.

2026-06-27 16:10:30 +08:00 · 2023-01-02 18:36:54 -08:00
parent 5f3d32b875
commit 3d13c7c91c
35 changed files with 4778 additions and 330 deletions
@@ -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,
  },
 };

@@ -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",
@@ -1,5 +1,3 @@
-
-
 export function AuthLayout({ children }) {
  return (
    <div className="flex items-center justify-center sm:py-4 subpixel-antialiased">
@@ -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}`}>
@@ -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";
@@ -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">
-                  Our Team
+                <Link href="/privacy-policy" aria-label="Privacy Policy" className="hover:underline underline-offset-2">
+                  Privacy Policy
                </Link>
-                <Link href="/#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
-                  Join Us
+                <Link
+                  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">
-                <b>Legal</b>
-                <div className="flex flex-col leading-5">
-                  <Link
-                    href="/privacy-policy"
-                    aria-label="Privacy Policy"
-                    className="hover:underline underline-offset-2"
-                  >
-                    Privacy Policy
-                  </Link>
-                  <Link
-                    href="/terms-of-service"
-                    aria-label="Terms of Service"
-                    className="hover:underline underline-offset-2"
-                  >
-                    Terms of Service
-                  </Link>
-                </div>
+            <div className="flex flex-col text-sm leading-7">
+              <b>Connect</b>
+              <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 className="flex flex-col text-sm leading-7">
-                <b>Connect</b>
-                <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> */}
        </nav>
      </div>
@@ -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,
 };
@@ -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>
@@ -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") ? 
-    "text-gray-700 hover:text-gray-900" :
-    "text-gray-50 hover:text-white";
-
-  const hoverBgColor = (colorMode === "light") ? 
-  "bg-gray-100" :
-  "bg-gray-800";
+  const hoverBgColor = colorMode === "light" ? "bg-gray-100" : "bg-gray-800";

  return (
    <>
@@ -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>
@@ -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 }) => (
-  <Container>
-    <Progress size="xs" isIndeterminate />
-    {text && (
-      <Container className="flex h-full">
-        <div className="text-xl font-bold text-gray-800  mx-auto my-auto">{text}</div>
-      </Container>
-    )}
-  </Container>
-);
+export const LoadingScreen = ({ text }) => {
+  const { colorMode } = useColorMode();
+  const mainClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
+
+  return (
+    <div className={`h-full ${mainClasses}`}>
+      <Progress size="sm" isIndeterminate />
+      {text && (
+        <div className="flex h-full">
+          <div className="text-xl font-bold  mx-auto my-auto">{text}</div>
+        </div>
+      )}
+    </div>
+  );
+};
@@ -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}</>;
 };
@@ -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;
    });
  }
@@ -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}
    >
@@ -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>;
+};
@@ -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>
+  );
+};
@@ -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>
+  );
+};
@@ -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 buttonBgColor = colorMode === "light" ? "#2563eb" : "#2563eb";
-  const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
-
+  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";

  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"
@@ -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>
-  );
-};
@@ -1,12 +1,11 @@
 import { useColorMode } from "@chakra-ui/react";

-import { CiDark } from 'react-icons/ci';
-import { CiLight } from 'react-icons/ci';
-
+import { CiDark } 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' ? (
-          <CiDark className="h-5 w-5 stroke-zinc-900 dark:hidden"/>
-        ) : (
-          <CiLight className="h-5 w-5 stroke-white" />
-        )
-      }
+      {colorMode === "light" ? (
+        <CiDark className="h-5 w-5 stroke-zinc-900 dark:hidden" />
+      ) : (
+        <CiLight className="h-5 w-5 stroke-white" />
+      )}
    </button>
-  )
+  );
 }
@@ -13,4 +13,4 @@ const ColorModeSwitch = () => {
  );
 };

-export default ColorModeSwitch;
+export default ColorModeSwitch;
@@ -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 {
@@ -1,16 +1,16 @@
-import { Container, Flex, Textarea } from "@chakra-ui/react";
+import { Container, Textarea } from "@chakra-ui/react";
 import { useRef, useState } from "react";
-import { SkipButton } from "src/components/Buttons/Skip";
-import { SubmitButton } from "src/components/Buttons/Submit";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
-import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
-import { TwoColumns } from "src/components/TwoColumns";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";

+import { useColorMode } from "@chakra-ui/react";
+import { TaskControls } from "src/components/Survey/TaskControls";
+
 const AssistantReply = () => {
  const [tasks, setTasks] = useState([]);

@@ -45,6 +45,9 @@ const AssistantReply = () => {
    mutate();
  };

+  const { colorMode } = useColorMode();
+  const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-800" : "bg-slate-900 text-white";
+
  if (isLoading) {
    return <LoadingScreen text="Loading..." />;
  }
@@ -54,31 +57,20 @@ const AssistantReply = () => {
  }

  const task = tasks[0].task;
-  const endTask = tasks[tasks.length - 1];
+
  return (
-    <Container className="p-6 text-gray-800">
-      <TwoColumns>
+    <div className={`p-12 ${mainBgClasses}`}>
+      <TwoColumnsWithCards>
        <>
          <h5 className="text-lg font-semibold">Reply as the assistant</h5>
          <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
          <Messages messages={task.conversation.messages} post_id={task.id} />
        </>
        <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
-      </TwoColumns>
+      </TwoColumnsWithCards>

-      <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
-        <TaskInfo id={tasks[0].id} output="Submit your answer" />
-
-        <Flex justify="center" ml="auto" gap={2}>
-          <SkipButton>Skip</SkipButton>
-          {endTask.task.type !== "task_done" ? (
-            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
-          ) : (
-            <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
-          )}
-        </Flex>
-      </section>
-    </Container>
+      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+    </div>
  );
 };

@@ -1,15 +1,13 @@
-import { Flex, Textarea } from "@chakra-ui/react";
-import Head from "next/head";
+import { 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 { TaskInfo } from "src/components/TaskInfo/TaskInfo";
-import { TwoColumns } from "src/components/TwoColumns";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
+import { useColorMode } from "@chakra-ui/react";
+import { TaskControls } from "src/components/Survey/TaskControls";

 const 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 (
-    <>
-      <Head>
-        <title>Summarize A Story</title>
-        <meta name="description" content="Summarize a story to train our model." />
-      </Head>
+    <div className={`p-12 ${mainBgClasses}`}>
      <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 ">
-          <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>
+        <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
      </main>
-    </>
+    </div>
  );
 };

@@ -1,20 +1,17 @@
-import { Flex, Textarea, useColorModeValue } from "@chakra-ui/react";
-import { Container } from "src/components/Container";
+import { Textarea } from "@chakra-ui/react";
 import { useRef, useState } from "react";
-import { SkipButton } from "src/components/Buttons/Skip";
-import { SubmitButton } from "src/components/Buttons/Submit";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
-import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
-import { TwoColumns } from "src/components/TwoColumns";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
+import { useColorMode } from "@chakra-ui/react";
+import { TaskControls } from "src/components/Survey/TaskControls";

 const 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">
-      <TwoColumns>
+    <div className={`p-12 ${mainBgClasses}`}>
+      <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 ">
-        <TaskInfo id={tasks[0].id} output="Submit your answer" />
-        <Flex justify="center" ml="auto" gap={2}>
-          <SkipButton>Skip</SkipButton>
-          {endTask.task.type !== "task_done" ? (
-            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
-          ) : (
-            <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
-          )}
-        </Flex>
-      </section>
-    </Container>
+      <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+    </div>
  );
 };

@@ -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">
-        <Container bg={bg} className="rounded-lg shadow-lg block  p-6 mb-8">
+      <div className={`p-12 ${mainBgClasses}`}>
+        <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} />
-        </Container>
+          <Sortable items={replies} onChange={setRanking} className="my-8" />
+        </SurveyCard>

-        <Container bg={bg} className="mb-8 p-4 rounded-lg shadow-lg  flex flex-row justify-items-stretch">
-          <TaskInfo id={tasks[0].id} output="Submit your answer" />
-
-          <Flex justify="center" ml="auto" gap={2}>
-            <SkipButton>Skip</SkipButton>
-            {endTask.task.type !== "task_done" ? (
-              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
-                Submit
-              </SubmitButton>
-            ) : (
-              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
-            )}
-          </Flex>
-        </Container>
-      </Container>
+        <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+      </div>
    </>
  );
 };
@@ -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">
-        <Container bg={bg} className="rounded-lg shadow-lg block  p-6 mb-8">
+      <div className={`p-12 ${mainBgClasses}`}>
+        <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} />
-        </Container>
+          <Sortable items={tasks[0].task.prompts} onChange={setRanking} className="my-8" />
+        </SurveyCard>

-        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch">
-          <TaskInfo id={tasks[0].id} output="Submit your answer" />
-
-          <Flex justify="center" ml="auto" gap={2}>
-            <SkipButton>Skip</SkipButton>
-            {endTask.task.type !== "task_done" ? (
-              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
-                Submit
-              </SubmitButton>
-            ) : (
-              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
-            )}
-          </Flex>
-        </section>
-      </Container>
+        <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+      </div>
    </>
  );
 };
@@ -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">
-        <Container bg={bg} className="rounded-lg shadow-lg block bg-white p-6 mb-8">
+      <div className={`p-12 ${mainBgClasses}`}>
+        <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} />
-        </Container>
+          <Sortable items={replies} onChange={setRanking} className="my-8" />
+        </SurveyCard>

-        <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
-          <TaskInfo id={tasks[0].id} output="Submit your answer" />
-
-          <Flex justify="center" ml="auto" gap={2}>
-            <SkipButton>Skip</SkipButton>
-            {endTask.task.type !== "task_done" ? (
-              <SubmitButton onClick={() => submitResponse(tasks[0])} disabled={ranking.length === 0}>
-                Submit
-              </SubmitButton>
-            ) : (
-              <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
-            )}
-          </Flex>
-        </section>
-      </Container>
+        <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
+      </div>
    </>
  );
 };
@@ -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 { TwoColumns } from "src/components/TwoColumns";
+import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";

+import { useColorMode } from "@chakra-ui/react";
+import { TaskControls } from "src/components/Survey/TaskControls";
+
 const 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 ">
-          <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>
+        <TaskControls tasks={tasks} onSubmitResponse={submitResponse} onSkip={fetchNextTask} />
      </main>
    </>
  );
@@ -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 />
@@ -7,8 +7,8 @@ export const colors = {
    bg: "gray.900",
    text: "white",
  },
-  'dark-blue-btn': {
-    200: 'rgb(29,78,216)',
-    300: 'blue',
-  }
-};
+  "dark-blue-btn": {
+    200: "rgb(29,78,216)",
+    300: "blue",
+  },
+};
@@ -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,
-})
+});
@@ -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,
    },
@@ -73,8 +73,8 @@ module.exports = {
      },

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