Darkmode for survey pages. Fixes for eslint.

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