Merge branch 'LAION-AI:main' into messageNavigation

website/src/components/Dashboard/index.ts

@@ -1,3 +1,2 @@
 export { LeaderboardTable } from "./LeaderboardTable";
-export { SideMenu } from "./SideMenu";
 export { TaskOption } from "./TaskOption";

website/src/components/FlaggableElement.tsx

@@ -17,12 +17,15 @@ import {
   Spacer,
   Tooltip,
   useBoolean,
+  useColorMode,
+  useColorModeValue,
   useId,
 } from "@chakra-ui/react";
 import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { useState } from "react";
 import poster from "src/lib/poster";
 import useSWRMutation from "swr/mutation";
+import { colors } from "styles/Theme/colors";
 
 export const FlaggableElement = (props) => {
   const [isEditing, setIsEditing] = useBoolean();
@@ -102,7 +105,10 @@ export const FlaggableElement = (props) => {
             <Button
               isDisabled={!checkboxValues.some(Boolean)}
               onClick={submitResponse}
-              className="bg-indigo-600 text-black hover:bg-indigo-700"
+              className={`bg-indigo-600 text-${useColorModeValue(
+                colors.light.text,
+                colors.dark.text
+              )} hover:bg-indigo-700`}
             >
               Report
             </Button>
@@ -133,6 +139,12 @@ function FlagCheckbox(props: {
   }
 
   const id = useId();
+  const { colorMode } = useColorMode();
+
+  const labelTextClass =
+    colorMode === "light"
+      ? `text-${colors.light.text} hover:text-blue-700 float-left`
+      : `text-${colors.dark.text} hover:text-blue-400 float-left`;
 
   return (
     <Flex gap={1}>
@@ -143,7 +155,7 @@ function FlagCheckbox(props: {
         }}
       />
       <label className="text-sm form-check-label" htmlFor={id}>
-        <span className="text-gray-800 hover:text-blue-700 float-left">{props.option.labelText}</span>
+        <span className={labelTextClass}>{props.option.labelText}</span>
         {AdditionalExplanation}
       </label>
       <Spacer />

website/src/components/Layout.tsx

@@ -1,9 +1,11 @@
 // https://nextjs.org/docs/basic-features/layouts
 
 import type { NextPage } from "next";
+import { FiLayout, FiMessageSquare } from "react-icons/fi";
 import { Header } from "src/components/Header";
 
 import { Footer } from "./Footer";
+import { SideMenuLayout } from "./SideMenuLayout";
 
 export type NextPageWithLayout<P = unknown, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: React.ReactElement) => React.ReactNode;
@@ -28,7 +30,24 @@ export const getTransparentHeaderLayout = (page: React.ReactElement) => (
 export const getDashboardLayout = (page: React.ReactElement) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
     <Header transparent={true} />
-    {page}
+    <SideMenuLayout
+      menuButtonOptions={[
+        {
+          label: "Dashboard",
+          pathname: "/dashboard",
+          desc: "Dashboard Home",
+          icon: FiLayout,
+        },
+        {
+          label: "Messages",
+          pathname: "/messages",
+          desc: "Messages Dashboard",
+          icon: FiMessageSquare,
+        },
+      ]}
+    >
+      {page}
+    </SideMenuLayout>
   </div>
 );
 

website/src/components/SideMenu.tsx

@@ -1,37 +1,23 @@
 import { Box, Button, Link, Text, Tooltip, useColorMode } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { FiLayout, FiSun, FiMessageSquare } from "react-icons/fi";
+import { FiSun } from "react-icons/fi";
+import { IconType } from "react-icons/lib";
 import { colors } from "styles/Theme/colors";
 
-export function SideMenu() {
+export interface MenuButtonOption {
+  label: string;
+  pathname: string;
+  desc: string;
+  icon: IconType;
+}
+
+export interface SideMenuProps {
+  buttonOptions: MenuButtonOption[];
+}
+
+export function SideMenu(props: SideMenuProps) {
   const router = useRouter();
   const { colorMode, toggleColorMode } = useColorMode();
-  const buttonOptions = [
-    {
-      label: "Dashboard",
-      pathname: "/dashboard",
-      desc: "Dashboard Home",
-      icon: FiLayout,
-    },
-    {
-      label: "Messages",
-      pathname: "/messages",
-      desc: "Messages Dashboard",
-      icon: FiMessageSquare,
-    },
-    // {
-    //   label: "Leaderboard",
-    //   pathname: "#",
-    //   desc: "Public Leaderboard",
-    //   icon: FiAward,
-    // },
-    // {
-    //   label: "Stats",
-    //   pathname: "#",
-    //   desc: "User Statistics",
-    //   icon: FiBarChart2,
-    // },
-  ];
 
   return (
     <main className="sticky top-0 sm:h-full">
@@ -43,7 +29,7 @@ export function SideMenu() {
         className="grid grid-cols-4 gap-2 sm:flex sm:flex-col sm:justify-between p-4 h-full"
       >
         <nav className="grid grid-cols-3 col-span-3 sm:flex sm:flex-col gap-2">
-          {buttonOptions.map((item, itemIndex) => (
+          {props.buttonOptions.map((item, itemIndex) => (
             <Tooltip
               key={itemIndex}
               fontFamily="inter"

website/src/components/SideMenuLayout.tsx

@@ -0,0 +1,23 @@
+import { Box, useColorMode } from "@chakra-ui/react";
+import { colors } from "styles/Theme/colors";
+import { SideMenu, MenuButtonOption } from "src/components/SideMenu";
+
+interface SideMenuLayoutProps {
+  menuButtonOptions: MenuButtonOption[];
+  children: React.ReactNode;
+}
+
+export const SideMenuLayout = (props: SideMenuLayoutProps) => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <Box backgroundColor={colorMode === "light" ? colors.light.bg : colors.dark.bg} className="sm:overflow-hidden">
+      <Box className="sm:flex h-full gap-6">
+        <Box className="p-6 sm:pr-0">
+          <SideMenu buttonOptions={props.menuButtonOptions} />
+        </Box>
+        <Box className="flex flex-col overflow-auto p-6 sm:pl-0 gap-14">{props.children}</Box>
+      </Box>
+    </Box>
+  );
+};

website/src/components/Survey/TrackedTextarea.tsx

@@ -0,0 +1,35 @@
+import { Progress, Stack, Textarea, TextareaProps } from "@chakra-ui/react";
+
+interface TrackedTextboxProps {
+  text: string;
+  thresholds: {
+    low: number;
+    medium: number;
+    goal: number;
+  };
+  textareaProps?: TextareaProps;
+  onTextChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+export const TrackedTextarea = (props: TrackedTextboxProps) => {
+  const wordCount = props.text.split(" ").length - 1;
+
+  let progressColor: string;
+  switch (true) {
+    case wordCount < props.thresholds.low:
+      progressColor = "red";
+      break;
+    case wordCount < props.thresholds.medium:
+      progressColor = "yellow";
+      break;
+    default:
+      progressColor = "green";
+  }
+
+  return (
+    <Stack direction={"column"}>
+      <Textarea data-cy="reply" value={props.text} onChange={props.onTextChange} {...props.textareaProps} onCapture />
+      <Progress size={"md"} rounded={"md"} value={wordCount} colorScheme={progressColor} max={props.thresholds.goal} />
+    </Stack>
+  );
+};