Dashboard

node_modules/.package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "Open-Assistant",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}

website/src/components/Container.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
 
 export function Container({ className, ...props }) {
-  return <div className={clsx("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)} {...props} />;
+  return <div className={clsx("mx-auto max-w-7xl px-4", className)} {...props} />;
 }

website/src/components/Header/Header.tsx

@@ -1,45 +1,11 @@
-import { Box, Button, useColorMode } from "@chakra-ui/react";
+import { Box, Button, Text, useColorMode } from "@chakra-ui/react";
-import { Popover } from "@headlessui/react";
-import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { FaUser } from "react-icons/fa";
 
-import { ColorModeIconToggle } from "../UI/ColorModeIconToggle";
 import { UserMenu } from "./UserMenu";
 
-function MenuIcon(props) {
-  const { colorMode } = useColorMode();
-  const stroke = colorMode === "light" ? "black" : "white";
-  return (
-    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <path d="M5 6h14M5 18h14M5 12h14" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" stroke={stroke} />
-    </svg>
-  );
-}
-
-function ChevronUpIcon(props) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
-      <path d="M17 14l-5-5-5 5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}
-
-function MobileNavLink({ children, ...props }) {
-  return (
-    <Popover.Button
-      as={Link}
-      href={props.href}
-      className="block text-base leading-7 tracking-tight text-gray-700"
-      {...props}
-    >
-      {children}
-    </Popover.Button>
-  );
-}
-
 function AccountButton() {
   const { data: session } = useSession();
   if (session) {
@@ -61,64 +27,20 @@ export function Header(props) {
     : colorMode === "light"
     ? "border-b border-gray-400"
     : "border-b border-zinc-800";
-
   return (
     <nav className={`oa-basic-theme ${borderClass}`}>
-      <Box className="flex mx-auto max-w-7xl justify-between py-8 px-10">
+      <Box className="relative z-10 flex justify-between px-4 py-4">
-        <div className="relative z-10 flex items-center gap-16">
+        <div className="relative z-10 flex items-center gap-10">
           <Link href="/" aria-label="Home" className="flex items-center">
             <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
-            <span className="text-2xl font-bold ml-3">Open Assistant</span>
+            <Text fontFamily="inter" fontSize="2xl" fontWeight="bold" className="ml-3">
+              Open Assistant
+            </Text>
           </Link>
         </div>
         <div className="flex items-center gap-4">
-          <Popover className="lg:hidden">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className="relative z-10 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
-                  aria-label="Toggle site navigation"
-                >
-                  {({ open }) => (open ? <ChevronUpIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />)}
-                </Popover.Button>
-                <AnimatePresence initial={false}>
-                  {open && (
-                    <>
-                      <Popover.Overlay
-                        static
-                        as={motion.div}
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        className="fixed inset-0 z-1 bg-gray-300/60 backdrop-blur"
-                      />
-                      <Popover.Panel
-                        static
-                        as={motion.div}
-                        initial={{ opacity: 0, y: -32 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        exit={{
-                          opacity: 0,
-                          y: -32,
-                          transition: { duration: 0.2 },
-                        }}
-                        className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
-                      >
-                        <div className="space-y-4">
-                          <MobileNavLink href="/#join-us">Join Us</MobileNavLink>
-                          <MobileNavLink href="/#faqs">FAQs</MobileNavLink>
-                        </div>
-                        <div className="mt-8 flex flex-col gap-4"></div>
-                      </Popover.Panel>
-                    </>
-                  )}
-                </AnimatePresence>
-              </>
-            )}
-          </Popover>
           <AccountButton />
           <UserMenu />
-          <ColorModeIconToggle className="ml-5" />
         </div>
       </Box>
     </nav>

website/src/components/Header/NavLinks.tsx

@@ -1,7 +1,8 @@
-import { useColorMode } from "@chakra-ui/react";
+import { Text, useColorMode } from "@chakra-ui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Link from "next/link";
 import { useState } from "react";
+import { colors } from "styles/Theme/colors";
 
 export function NavLinks(): JSX.Element {
   const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -14,8 +15,8 @@ export function NavLinks(): JSX.Element {
   return (
     <>
       {[
-        ["Join Us", "/#join-us"],
         ["FAQ", "/#faq"],
+        ["Join Us", "/#join-us"],
       ].map(([label, href], index) => (
         <Link
           key={label}
@@ -38,7 +39,9 @@ export function NavLinks(): JSX.Element {
               />
             )}
           </AnimatePresence>
-          <span className="relative z-10">{label}</span>
+          <Text color={colorMode === "light" ? colors.light.text : colors.dark.text} className="relative z-10">
+            {label}
+          </Text>
         </Link>
       ))}
     </>

website/src/components/Header/UserMenu.tsx

@@ -1,14 +1,15 @@
-import { Box, useColorModeValue } from "@chakra-ui/react";
+import { Box, Link, Text, 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 { FiLayout, FiLogOut } from "react-icons/fi";
 
 export function UserMenu() {
   const { data: session } = useSession();
-  const backgroundColor = useColorModeValue("#FFFFFF", "#000000");
+  const backgroundColor = useColorModeValue("white", "gray.700");
+  const accentColor = useColorModeValue("gray.300", "gray.600");
 
   if (!session) {
     return <></>;
@@ -16,10 +17,10 @@ export function UserMenu() {
   if (session && session.user) {
     const accountOptions = [
       {
-        name: "Account Settings",
+        name: "Dashboard",
-        href: "/account",
+        href: "/dashboard",
-        desc: "Account Settings",
+        desc: "Dashboard",
-        icon: FaCog,
+        icon: FiLayout,
         //For future use
       },
     ];
@@ -28,18 +29,22 @@ export function UserMenu() {
         {({ open }) => (
           <>
             <Popover.Button aria-label="Toggle Account Options" className="flex">
-              <div className="flex items-center gap-4 p-1 lg:pr-6 rounded-full border border-slate-300/70 hover:bg-gray-200/50 transition-colors duration-300">
+              <Box
+                borderWidth="1px"
+                borderColor={accentColor}
+                className="flex items-center gap-4 p-1 lg:pr-6 rounded-full transition-colors duration-300"
+              >
                 <Image
-                  src="/images/temp-avatars/av1.jpg"
+                  src="/images/temp-avatars/av5.jpg"
                   alt="Profile Picture"
-                  width="40"
+                  width="36"
-                  height="40"
+                  height="36"
                   className="rounded-full"
                 ></Image>
                 <p data-cy="username" className="hidden lg:flex">
                   {session.user.name || session.user.email}
                 </p>
-              </div>
+              </Box>
             </Popover.Button>
             <AnimatePresence initial={false}>
               {open && (
@@ -54,35 +59,45 @@ export function UserMenu() {
                       y: -10,
                       transition: { duration: 0.2 },
                     }}
-                    className="absolute right-0 mt-3 w-screen bg-inherit max-w-xs p-4 rounded-md border border-slate-300/70"
                   >
-                    <Box className="flex flex-col gap-1">
+                    <Box
-                      {accountOptions.map((item) => (
+                      bg={backgroundColor}
-                        <a
+                      borderWidth="1px"
-                          key={item.name}
+                      borderColor={accentColor}
-                          href={item.href}
+                      borderRadius="xl"
-                          aria-label={item.desc}
+                      className="absolute right-0 mt-3 w-screen max-w-xs p-4"
-                          className="flex items-center rounded-md hover:bg-gray-200/50"
+                    >
+                      <Box className="flex flex-col gap-1">
+                        {accountOptions.map((item) => (
+                          <Link
+                            key={item.name}
+                            href={item.href}
+                            aria-label={item.desc}
+                            className="flex items-center"
+                            bg={backgroundColor}
+                            _hover={{ textDecoration: "none" }}
+                          >
+                            <div className="p-4">
+                              <item.icon className="text-blue-500" aria-hidden="true" />
+                            </div>
+                            <div>
+                              <Text fontFamily="inter">{item.name}</Text>
+                            </div>
+                          </Link>
+                        ))}
+                        <Link
+                          className="flex items-center rounded-md cursor-pointer"
+                          _hover={{ textDecoration: "none" }}
+                          onClick={() => signOut({ callbackUrl: "/" })}
                         >
                           <div className="p-4">
-                            <item.icon aria-hidden="true" />
+                            <FiLogOut className="text-blue-500" />
                           </div>
                           <div>
-                            <p>{item.name}</p>
+                            <Text fontFamily="inter">Sign Out</Text>
                           </div>
-                        </a>
+                        </Link>
-                      ))}
+                      </Box>
-                      <a
-                        className="flex items-center rounded-md hover:bg-gray-100 cursor-pointer"
-                        onClick={() => signOut({ callbackUrl: "/" })}
-                      >
-                        <div className="p-4">
-                          <FaSignOutAlt />
-                        </div>
-                        <div>
-                          <p>Sign Out</p>
-                        </div>
-                      </a>
                     </Box>
                   </Popover.Panel>
                 </Box>

website/src/components/Sortable/Sortable.tsx

@@ -17,8 +17,8 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { ReactNode, useEffect, useState } from "react";
-import { CollapsableText } from "../CollapsableText";
 
+import { CollapsableText } from "../CollapsableText";
 import { SortableItem } from "./SortableItem";
 
 export interface SortableProps {

website/src/components/Widgets/LeaderboardWidget.tsx

@@ -0,0 +1,94 @@
+import { Badge, Box, Image, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
+
+export function LeaderboardWidget() {
+  const backgroundColor = useColorModeValue("white", "gray.700");
+  const accentColor = useColorModeValue("gray.200", "gray.900");
+
+  //need to add streak info to chart
+
+  const leaderInfo = [
+    {
+      name: "fozziethebeat#6690",
+      image: "/images/temp-avatars/av1.jpg",
+      score: "5,208",
+      arrowDir: "increase",
+      streak: false,
+      streakCount: "5-Day Streak",
+    },
+    {
+      name: "k_nearest_neighbor#8579",
+      image: "/images/temp-avatars/av2.jpg",
+      score: "5,164",
+      arrowDir: "decrease",
+      streak: false,
+      streakCount: "",
+    },
+    {
+      name: "andreaskoepf#2266",
+      image: "/images/temp-avatars/av3.jpg",
+      score: "5,120",
+      arrowDir: "",
+      streak: false,
+      streakCount: "2-Day Streak",
+    },
+    {
+      name: "AbdBarho#1684",
+      image: "/images/temp-avatars/av4.jpg",
+      score: "4,260",
+      arrowDir: "",
+      streak: false,
+      streakCount: "",
+    },
+    {
+      name: "zu#9016",
+      image: "/images/temp-avatars/av5.jpg",
+      score: "3,608",
+      arrowDir: "",
+      streak: false,
+      streakCount: "",
+    },
+  ];
+
+  return (
+    <main className="h-fit col-span-3">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-end justify-between">
+          <Text className="text-2xl font-bold">Top 5 Contributors</Text>
+          <Link key="Leaderboard" href="#" _hover={{ textDecoration: "none" }}>
+            <Text color="blue.400" className="text-sm font-bold">
+              View All -&gt;
+            </Text>
+          </Link>
+        </div>
+        <Box
+          backgroundColor={backgroundColor}
+          boxShadow="base"
+          dropShadow={accentColor}
+          borderRadius="xl"
+          className="p-6 shadow-sm"
+        >
+          <Stack divider={<StackDivider />} spacing="4">
+            <div className="grid grid-cols-4 items-center font-bold">
+              <p>Name</p>
+              <div className="col-start-4 flex justify-center">
+                <p>Score</p>
+              </div>
+            </div>
+            {leaderInfo.map((item) => (
+              <div key="User" className="grid grid-cols-4 items-center">
+                <div className="flex items-center gap-3">
+                  <Image alt="Profile Picture" src={item.image} boxSize="7" borderRadius="full"></Image>
+                  <p>{item.name}</p>
+                  <Badge colorScheme="purple">{item.streakCount}</Badge>
+                </div>
+                <Box bg={backgroundColor} className="col-start-4 flex justify-center">
+                  <p>{item.score}</p>
+                </Box>
+              </div>
+            ))}
+          </Stack>
+        </Box>
+      </div>
+    </main>
+  );
+}

website/src/components/Widgets/SideMenu.tsx

@@ -0,0 +1,83 @@
+import { Box, Button, Link, Text, Tooltip, useColorMode } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { FiLayout, FiSun } from "react-icons/fi";
+import { colors } from "styles/Theme/colors";
+
+export function SideMenu() {
+  const router = useRouter();
+  const { colorMode, toggleColorMode } = useColorMode();
+  const buttonOptions = [
+    {
+      label: "Dashboard",
+      pathname: "/dashboard",
+      desc: "Dashboard Home",
+      icon: FiLayout,
+    },
+    // {
+    //   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">
+      <Box
+        width={["100%", "100%", "100px", "280px"]}
+        backgroundColor={colorMode === "light" ? colors.light.div : colors.dark.div}
+        boxShadow="base"
+        borderRadius="xl"
+        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) => (
+            <Tooltip
+              key="Tooltip"
+              fontFamily="inter"
+              label={item.label}
+              placement="right"
+              className="hidden lg:hidden sm:block"
+            >
+              <Link key="{item.label}" href={item.pathname} style={{ textDecoration: "none" }}>
+                <Button
+                  justifyContent={["center", "center", "center", "left"]}
+                  gap="3"
+                  size="lg"
+                  width="full"
+                  bg={router.pathname === item.pathname ? "blue.500" : null}
+                  _hover={router.pathname === item.pathname ? { bg: "blue.600" } : null}
+                >
+                  <item.icon className={router.pathname === item.pathname ? "text-blue-200" : null} />
+                  <Text
+                    fontWeight="normal"
+                    color={router.pathname === item.pathname ? "white" : null}
+                    className="hidden lg:block"
+                  >
+                    {item.label}
+                  </Text>
+                </Button>
+              </Link>
+            </Tooltip>
+          ))}
+        </nav>
+        <div>
+          <Tooltip fontFamily="inter" label="Toggle Dark Mode" placement="right" className="hidden lg:hidden sm:block">
+            <Button size="lg" width="full" justifyContent="center" onClick={toggleColorMode} gap="2">
+              <FiSun />
+              <Text fontWeight="normal" className="hidden lg:block">
+                {colorMode === "light" ? "Dark Mode" : "Light Mode"}
+              </Text>
+            </Button>
+          </Tooltip>
+        </div>
+      </Box>
+    </main>
+  );
+}

website/src/components/Widgets/TaskOption.tsx

@@ -0,0 +1,120 @@
+import { Box, Flex, GridItem, Heading, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
+import Link from "next/link";
+
+const crTasks = [
+  {
+    label: "Reply as User",
+    desc: "Chat with Open Assistant and help improve it’s responses as you interact with it.",
+    type: "create",
+    pathname: "/create/assistant_reply",
+  },
+  {
+    label: "Reply as Assistant",
+    desc: "Help Open Assistant improve its responses to conversations with other users.",
+    type: "create",
+    pathname: "/create/assistant_reply",
+  },
+];
+
+const evTasks = [
+  {
+    label: "Rank User Replies",
+    type: "eval",
+    desc: "Help Open Assistant improve its responses to conversations with other users.",
+    pathname: "/evaluate/rank_user_replies",
+  },
+
+  {
+    label: "Rank Assistant Replies",
+    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
+    type: "eval",
+    pathname: "/evaluate/rank_assistant_replies",
+  },
+  {
+    label: "Rank Initial Prompts",
+    desc: "Score prompts given by Open Assistant based on their accuracy and readability.",
+    type: "eval;",
+    pathname: "/evaluate/rank_initial_prompts",
+  },
+];
+
+export const TaskOption = () => {
+  const backgroundColor = useColorModeValue("white", "gray.700");
+
+  return (
+    <Box className="flex flex-col gap-14" fontFamily="inter">
+      <div>
+        <Text className="text-2xl font-bold pb-4">Create</Text>
+        <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
+          {crTasks.map((item) => (
+            <Link key="Create Option" href={item.pathname}>
+              <GridItem
+                bg={backgroundColor}
+                borderRadius="xl"
+                boxShadow="base"
+                className="flex flex-col justify-between h-full"
+              >
+                <Box className="p-6 pb-10">
+                  <Flex flexDir="column" gap="3">
+                    <Heading size="md" fontFamily="inter">
+                      {item.label}
+                    </Heading>
+                    <Text size="sm" opacity="80%">
+                      {item.desc}
+                    </Text>
+                  </Flex>
+                </Box>
+                <Box
+                  bg="blue.500"
+                  borderBottomRadius="xl"
+                  className="px-6 py-2 transition-colors duration-300"
+                  _hover={{ backgroundColor: "blue.600" }}
+                >
+                  <Text fontWeight="bold" color="white">
+                    Go
+                  </Text>
+                </Box>
+              </GridItem>
+            </Link>
+          ))}
+        </SimpleGrid>
+      </div>
+      <div>
+        <Text className="text-2xl font-bold pb-4">Evaluate</Text>
+        <SimpleGrid columns={[1, 2, 2, 3, 4]} gap={4}>
+          {evTasks.map((item) => (
+            <Link key="Evaluate Option" href={item.pathname}>
+              <GridItem
+                bg={backgroundColor}
+                borderRadius="xl"
+                boxShadow="base"
+                className="flex flex-col justify-between h-full"
+              >
+                <Box className="p-6 pb-10">
+                  <Flex flexDir="column" gap="3">
+                    <Heading size="md" fontFamily="inter">
+                      {item.label}
+                    </Heading>
+                    <Text size="sm" opacity="80%">
+                      {item.desc}
+                    </Text>
+                  </Flex>
+                </Box>
+                <Box
+                  bg="blue.500"
+                  borderBottomRadius="xl"
+                  className="px-6 py-2 transition-colors duration-300"
+                  _hover={{ backgroundColor: "blue.600" }}
+                >
+                  <Text fontWeight="bold" color="white">
+                    Go
+                  </Text>
+                </Box>
+              </GridItem>
+            </Link>
+          ))}
+        </SimpleGrid>
+      </div>
+    </Box>
+  );
+};

website/src/components/Widgets/index.ts

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

website/src/middleware.ts

@@ -4,5 +4,5 @@ export { default } from "next-auth/middleware";
  * Guards all pages under `/grading` and redirects them to the sign in page.
  */
 export const config = {
-  matcher: ["/create/:path*", "/evaluate/:path*", "/account/:path*"],
+  matcher: ["/create/:path*", "/evaluate/:path*", "/account/:path*", "/dashboard"],
 };

website/src/pages/account/edit.tsx

@@ -51,7 +51,6 @@ export default function Account() {
             </Button>
           </InputGroup>
         </form>
-        <p>{session.user.email}</p>
       </main>
     </>
   );

website/src/pages/auth/signin.tsx

@@ -15,13 +15,13 @@ function Signin({ csrfToken, providers }) {
   const emailEl = useRef(null);
   const signinWithEmail = (ev: React.FormEvent) => {
     ev.preventDefault();
-    signIn(email.id, { callbackUrl: "/", email: emailEl.current.value });
+    signIn(email.id, { callbackUrl: "/dashboard", email: emailEl.current.value });
   };
 
   const debugUsernameEl = useRef(null);
   function signinWithDebugCredentials(ev: React.FormEvent) {
     ev.preventDefault();
-    signIn(credentials.id, { callbackUrl: "/", username: debugUsernameEl.current.value });
+    signIn(credentials.id, { callbackUrl: "/dashboard", username: debugUsernameEl.current.value });
   }
 
   const { colorMode } = useColorMode();
@@ -98,7 +98,8 @@ function Signin({ csrfToken, providers }) {
             </Button>
           )}
         </Stack>
-        <div className="pt-10 text-center">
+        <hr className="mt-14 mb-4 h-px bg-gray-200 border-0" />
+        <div className="text-center">
           By signing up you agree to our <br></br>
           <Link href="/terms-of-service" aria-label="Terms of Service" className="hover:underline underline-offset-4">
             <b>Terms of Service</b>

website/src/pages/dashboard.tsx

@@ -0,0 +1,37 @@
+import { Box, useColorMode } from "@chakra-ui/react";
+import Head from "next/head";
+import { Header } from "src/components/Header";
+import { LeaderboardWidget, SideMenu, TaskOption } from "src/components/Widgets";
+import { colors } from "styles/Theme/colors";
+
+const Dashboard = () => {
+  const { colorMode } = useColorMode();
+  return (
+    <>
+      <Head>
+        <title>Dashboard - Open Assistant</title>
+        <meta name="description" content="Chat with Open Assistant and provide feedback." />
+      </Head>
+      <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 />
+          </Box>
+          <Box className="flex flex-col overflow-auto p-6 sm:pl-0 gap-14">
+            <TaskOption />
+            <LeaderboardWidget />
+          </Box>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+Dashboard.getLayout = (page) => (
+  <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
+    <Header transparent={true} />
+    {page}
+  </div>
+);
+
+export default Dashboard;

website/src/pages/evaluate/rank_user_replies.tsx

@@ -1,7 +1,9 @@
 import { useColorMode } from "@chakra-ui/react";
 import Head from "next/head";
 import { useState } from "react";
+import { ContextMessages } from "src/components/ContextMessages";
 import { LoadingScreen } from "src/components/Loading/LoadingScreen";
+import { Message } from "src/components/Messages";
 import { Sortable } from "src/components/Sortable/Sortable";
 import { SurveyCard } from "src/components/Survey/SurveyCard";
 import { TaskControls } from "src/components/Survey/TaskControls";
@@ -9,8 +11,6 @@ import fetcher from "src/lib/fetcher";
 import poster from "src/lib/poster";
 import useSWRImmutable from "swr/immutable";
 import useSWRMutation from "swr/mutation";
-import { Message } from "src/components/Messages";
-import { ContextMessages } from "src/components/ContextMessages";
 
 const RankUserReplies = () => {
   const [tasks, setTasks] = useState([]);

website/src/pages/index.tsx

@@ -1,16 +1,10 @@
 import Head from "next/head";
-import { useSession } from "next-auth/react";
 import { CallToAction } from "src/components/CallToAction";
 import { Faq } from "src/components/Faq";
-import { Footer } from "src/components/Footer";
-import { Header } from "src/components/Header";
 import { Hero } from "src/components/Hero";
 import { getTransparentHeaderLayout } from "src/components/Layout";
-import { TaskSelection } from "src/components/TaskSelection";
 
 const Home = () => {
-  const { data: session } = useSession();
-
   return (
     <>
       <Head>
@@ -20,15 +14,11 @@ const Home = () => {
           content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
         />
       </Head>
-      {session ? (
+      <main className="oa-basic-theme">
-        <TaskSelection />
+        <Hero />
-      ) : (
+        <CallToAction />
-        <main className="oa-basic-theme">
+        <Faq />
-          <Hero />
+      </main>
-          <CallToAction />
-          <Faq />
-        </main>
-      )}
     </>
   );
 };

website/styles/Theme/Components/Container.tsx

@@ -0,0 +1,25 @@
+import {
+  color,
+  defineStyle,
+  defineStyleConfig,
+  // transition,
+} from "@chakra-ui/styled-system";
+import { colors } from "../colors";
+
+const baseStyle = defineStyle(({ colorMode }) => ({
+  minWidth: "100%",
+  bg: colorMode === "light" ? colors.light.bg : colors.dark.bg,
+  // transition: "background-color 300ms cubic-bezier(0.4, 0, 1, 1)",
+  color: colorMode === "light" ? colors.light.text : colors.dark.text,
+}));
+
+const variants = {
+  "no-padding": {
+    padding: 0,
+  },
+};
+
+export const containerTheme = defineStyleConfig({
+  baseStyle,
+  variants,
+});

website/styles/Theme/colors.tsx

@@ -0,0 +1,14 @@
+export const colors = {
+  light: {
+    bg: "gray.100",
+    btn: "gray.50",
+    div: "white",
+    text: "black",
+  },
+  dark: {
+    bg: "gray.900",
+    btn: "gray.600",
+    div: "gray.700",
+    text: "gray.200",
+  },
+};

website/styles/Theme/index.tsx

@@ -0,0 +1,68 @@
+import {
+  type ThemeConfig,
+  extendTheme,
+  usePrefersReducedMotion,
+} from "@chakra-ui/react";
+import { containerTheme } from "./Components/Container";
+import { StyleFunctionProps, Styles } from "@chakra-ui/theme-tools";
+
+const config: ThemeConfig = {
+  initialColorMode: "system",
+  useSystemColorMode: false,
+  disableTransitionOnChange: true,
+};
+
+const components = {
+  Container: containerTheme,
+  Box: (props: StyleFunctionProps) => ({
+    backgroundColor: props.colorMode === "light" ? "white" : "gray.800",
+  }),
+  Button: {
+    baseStyle: {
+      fontWeight: "normal",
+    },
+    sizes: {
+      lg: {
+        fontSize: "md",
+        paddingY: "7",
+      },
+    },
+    variants: {
+      solid: (props: StyleFunctionProps) => ({
+        bg: props.colorMode === "light" ? "gray.100" : "gray.600",
+        _hover: {
+          bg: props.colorMode === "light" ? "gray.200" : "#3D4A60",
+        },
+        _active: {
+          bg: props.colorMode === "light" ? "gray.300" : "#374254",
+        },
+        borderRadius: "lg",
+      }),
+      // gradient: (props: StyleFunctionProps) => ({
+      //   bg: `linear-gradient(${white}, ${bgColor}) padding-box,
+      //   linear-gradient(135deg, ${lgFrom}, ${lgTo}) border-box`,
+      // }),
+    },
+  },
+};
+
+const breakpoints = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px",
+};
+
+const styles = {
+  global: (props) => ({
+    main: {
+      fontFamily: "Inter",
+    },
+    header: {
+      fontFamily: "Inter",
+    },
+  }),
+};
+
+export const theme = extendTheme({ config, styles, components, breakpoints });