Darkmode for survey pages. Fixes for eslint.

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">
-                  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>

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") ? 
-    "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 (
     <>

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 }) => (
-  <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>
+  );
+};

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 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"

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 { 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>
-  )
+  );
 }

website/src/components/UI/ColorModeSwitch.tsx

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