fix method signature from merge. eslint fixes

website/src/components/CallToAction.tsx

@@ -1,5 +1,6 @@
-import { useId } from "react";
 import { useColorMode } from "@chakra-ui/react";
+import { useId } from "react";
+
 import { Container } from "./Container";
 
 function CircleBackground({ width = 558, height = 558, ...props }) {

website/src/components/Footer.tsx

@@ -1,6 +1,6 @@
+import { useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
-import { useColorMode } from "@chakra-ui/react";
 
 export function Footer() {
   const { colorMode } = useColorMode();

website/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { Button, Box } from "@chakra-ui/react";
+import { Box, Button } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
@@ -6,9 +6,9 @@ import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { FaUser } from "react-icons/fa";
 
+import { ColorModeIconToggle } from "../UI/ColorModeIconToggle";
 import { NavLinks } from "./NavLinks";
 import { UserMenu } from "./UserMenu";
-import { ColorModeIconToggle } from "../UI/ColorModeIconToggle";
 
 function MenuIcon(props) {
   return (

website/src/components/Header/NavLinks.tsx

@@ -1,9 +1,8 @@
+import { useColorMode } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Link from "next/link";
 import { useState } from "react";
 
-import { useColorMode } from "@chakra-ui/react";
-
 export function NavLinks(): JSX.Element {
   const [hoveredIndex, setHoveredIndex] = useState(null);
   const { colorMode } = useColorMode();

website/src/components/Header/UserMenu.tsx

@@ -1,10 +1,10 @@
+import { Box, useColorModeValue } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import { signOut, useSession } from "next-auth/react";
 import React from "react";
 import { FaCog, FaSignOutAlt } from "react-icons/fa";
-import { Box, useColorModeValue } from "@chakra-ui/react";
 
 export function UserMenu() {
   const { data: session } = useSession();

website/src/components/Hero.tsx

@@ -1,6 +1,7 @@
-import Image from "next/image";
 import { useColorMode } from "@chakra-ui/react";
+import Image from "next/image";
 import { useId } from "react";
+
 import { Container } from "./Container";
 
 function BackgroundIllustration(props) {

website/src/components/Messages.tsx

@@ -1,7 +1,8 @@
 import { Grid } from "@chakra-ui/react";
-import { FlaggableElement } from "./FlaggableElement";
 import { useColorMode } from "@chakra-ui/react";
 
+import { FlaggableElement } from "./FlaggableElement";
+
 export interface Message {
   text: string;
   is_assistant: boolean;
@@ -21,7 +22,10 @@ export const Messages = ({ messages, post_id }: { messages: Message[]; post_id:
   const items = messages.map(({ text, is_assistant }: Message, i: number) => {
     return (
       <FlaggableElement text={text} post_id={post_id} key={i + text}>
-        <div key={i + text} className={`${getBgColor(is_assistant)} p-4 rounded-md text-white whitespace-pre-wrap`}>
+        <div
+          key={i + text}
+          className={`${getBgColor(is_assistant, colorMode)} p-4 rounded-md text-white whitespace-pre-wrap`}
+        >
           {text}
         </div>
       </FlaggableElement>

website/src/components/Sortable/Sortable.tsx

@@ -2,9 +2,9 @@ import { Flex } from "@chakra-ui/react";
 import {
   closestCenter,
   DndContext,
+  KeyboardSensor,
   PointerSensor,
   TouchSensor,
-  KeyboardSensor,
   useSensor,
   useSensors,
 } from "@dnd-kit/core";

website/src/components/Sortable/SortableItem.tsx

@@ -1,9 +1,9 @@
 import { Button } from "@chakra-ui/react";
+import { useColorMode } 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";
+import { RxDragHandleDots2 } from "react-icons/rx";
 
 export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });

website/src/components/Survey/TaskControls.tsx

@@ -1,8 +1,8 @@
 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";
+import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
 
 interface TaskControlsProps {
   // we need a task type

website/src/components/TaskSelection/TaskSelection.tsx

@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
-import React from "react";
 import { useColorMode } from "@chakra-ui/react";
+import React from "react";
 
 import { TaskOption } from "./TaskOption";
 import { TaskOptions } from "./TaskOptions";

website/src/components/UI/ColorModeIconToggle.tsx

@@ -1,5 +1,4 @@
 import { useColorMode } from "@chakra-ui/react";
-
 import { CiDark } from "react-icons/ci";
 import { CiLight } from "react-icons/ci";
 

website/src/pages/_app.tsx

@@ -1,10 +1,10 @@
-import { SessionProvider } from "next-auth/react";
-import type { AppProps } from "next/app";
-
-import { NextPageWithLayout, getDefaultLayout } from "src/components/Layout";
-
 import "../styles/globals.css";
 import "focus-visible";
+
+import type { AppProps } from "next/app";
+import { SessionProvider } from "next-auth/react";
+import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout";
+
 import { Chakra, getServerSideProps } from "../styles/Chakra";
 
 type AppPropsWithLayout = AppProps & {

website/src/pages/auth/signin.tsx

@@ -1,13 +1,13 @@
 import { Button, Input, Stack } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
-import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
+import Link from "next/link";
 import { getCsrfToken, getProviders, signIn } from "next-auth/react";
 import React, { useRef } from "react";
-import Link from "next/link";
-import { Header } from "src/components/Header";
-import { Footer } from "src/components/Footer";
+import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa";
 import { AuthLayout } from "src/components/AuthLayout";
-import { useColorMode } from "@chakra-ui/react";
+import { Footer } from "src/components/Footer";
+import { Header } from "src/components/Header";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function Signin({ csrfToken, providers }) {

website/src/pages/create/assistant_reply.tsx

@@ -1,16 +1,15 @@
 import { Container, Textarea } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
+import { TaskControls } from "src/components/Survey/TaskControls";
 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([]);
 

website/src/pages/create/summarize_story.tsx

@@ -1,13 +1,13 @@
 import { Textarea } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { TaskControls } from "src/components/Survey/TaskControls";
 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

website/src/pages/create/user_reply.tsx

@@ -1,14 +1,14 @@
 import { Textarea } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import { useRef, useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Messages } from "src/components/Messages";
+import { TaskControls } from "src/components/Survey/TaskControls";
 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([]);

website/src/pages/evaluate/rank_assistant_replies.tsx

@@ -1,14 +1,14 @@
+import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Sortable } from "src/components/Sortable/Sortable";
+import { SurveyCard } from "src/components/Survey/SurveyCard";
+import { TaskControls } from "src/components/Survey/TaskControls";
 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([]);

website/src/pages/evaluate/rank_initial_prompts.tsx

@@ -1,14 +1,14 @@
+import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Sortable } from "src/components/Sortable/Sortable";
+import { SurveyCard } from "src/components/Survey/SurveyCard";
+import { TaskControls } from "src/components/Survey/TaskControls";
 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([]);

website/src/pages/evaluate/rank_user_replies.tsx

@@ -1,14 +1,14 @@
+import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import { Sortable } from "src/components/Sortable/Sortable";
+import { SurveyCard } from "src/components/Survey/SurveyCard";
+import { TaskControls } from "src/components/Survey/TaskControls";
 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([]);

website/src/pages/evaluate/rate_summary.tsx

@@ -1,18 +1,17 @@
 import { Textarea } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import Head from "next/head";
 import { useState } from "react";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
 import RatingRadioGroup from "src/components/RatingRadioGroup";
+import { TaskControls } from "src/components/Survey/TaskControls";
 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.

website/src/styles/Chakra.tsx

@@ -1,4 +1,5 @@
 import { ChakraProvider, cookieStorageManagerSSR, localStorageManager } from "@chakra-ui/react";
+
 import { theme } from "./Theme";
 
 export function Chakra({ cookies, children }) {

website/src/styles/Theme/index.ts

@@ -1,7 +1,8 @@
 import { type ThemeConfig, extendTheme } from "@chakra-ui/react";
-import { containerTheme } from "./components/Container";
 import { Styles } from "@chakra-ui/theme-tools";
+
 import { colors } from "./colors";
+import { containerTheme } from "./components/Container";
 
 const config: ThemeConfig = {
   initialColorMode: "light",