Darkmode for survey pages. Fixes for eslint.

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