Darkmode for survey pages. Fixes for eslint.

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