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