From 1457d81e6b979280cbeb7fffa444a109b21a2c73 Mon Sep 17 00:00:00 2001
From: rsandb <me@rileysandb.org>
Date: Mon, 16 Jan 2023 16:34:11 -0600
Subject: [PATCH] added SlimFooter component for dashboard, made original
 footer mobile-friendly

---
 .../src/components/Dashboard/SlimFooter.tsx   | 45 +++++++++++
 website/src/components/Footer.tsx             | 81 +++++++++++++------
 website/src/components/Layout.tsx             | 14 +++-
 website/src/components/SideMenuLayout.tsx     |  6 +-
 website/src/pages/dashboard.tsx               |  7 +-
 5 files changed, 121 insertions(+), 32 deletions(-)
 create mode 100644 website/src/components/Dashboard/SlimFooter.tsx

diff --git a/website/src/components/Dashboard/SlimFooter.tsx b/website/src/components/Dashboard/SlimFooter.tsx
new file mode 100644
index 00000000..5a7b093c
--- /dev/null
+++ b/website/src/components/Dashboard/SlimFooter.tsx
@@ -0,0 +1,45 @@
+import { Box, Divider } from "@chakra-ui/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useMemo } from "react";
+
+export function SlimFooter() {
+  return (
+    <footer>
+      <Box>
+        <Divider />
+        <Box display="flex" gap="4" flexDir="column" alignItems="center" my="8">
+          <Box display="flex" alignItems="center">
+            <Link href="/" aria-label="Home" className="flex items-center gap-1">
+              <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="48" height="48" alt="logo" />
+            </Link>
+          </Box>
+          <nav>
+            <Box display="flex" gap="5" fontSize="xs" color="blue.500">
+              <FooterLink href="/privacy-policy" label="Privacy Policy" />
+              <FooterLink href="/terms-of-service" label="Terms of Service" />
+              <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
+              <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
+            </Box>
+          </nav>
+        </Box>
+      </Box>
+    </footer>
+  );
+}
+
+const FooterLink = ({ href, label }: { href: string; label: string }) =>
+  useMemo(
+    () => (
+      <Link
+        href={href}
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+        aria-label={label}
+        className="hover:underline underline-offset-2"
+      >
+        {label}
+      </Link>
+    ),
+    [href, label]
+  );
diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx
index 39480473..b22653e9 100644
--- a/website/src/components/Footer.tsx
+++ b/website/src/components/Footer.tsx
@@ -1,26 +1,65 @@
-import { Box, Divider } from "@chakra-ui/react";
+import { Box, Divider, Flex, Text, useColorMode } from "@chakra-ui/react";
 import Image from "next/image";
 import Link from "next/link";
 import { useMemo } from "react";
 
 export function Footer() {
+  const { colorMode } = useColorMode();
+  const backgroundColor = colorMode === "light" ? "white" : "gray.800";
+  const textColor = colorMode === "light" ? "black" : "gray.300";
+
   return (
     <footer>
-      <Divider />
-      <Box display="flex" gap="4" flexDir="column" alignItems="center" my="8">
-        <Box display="flex" alignItems="center">
-          <Link href="/" aria-label="Home" className="flex items-center gap-1">
-            <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="48" height="48" alt="logo" />
-          </Link>
+      <Box bg={backgroundColor}>
+        <Divider />
+        <Box
+          display="flex"
+          flexDirection={["column", "row"]}
+          justifyContent="space-between"
+          alignItems="center"
+          gap="6"
+          p="8"
+          pb={["14", "8"]}
+          w="full"
+          mx="auto"
+          maxWidth="7xl"
+        >
+          <Flex alignItems="center">
+            <Box pr="2">
+              <Link href="/" aria-label="Home">
+                <Image src="/images/logos/logo.svg" width="52" height="52" alt="logo" />
+              </Link>
+            </Box>
+
+            <Box>
+              <Text fontSize="md" fontWeight="bold">
+                Open Assistant
+              </Text>
+              <Text fontSize="sm" color="gray.500">
+                Conversational AI for everyone.
+              </Text>
+            </Box>
+          </Flex>
+
+          <nav>
+            <Box display="flex" flexDirection={["column", "row"]} gap={["6", "14"]} alignItems="center" fontSize="sm">
+              <Flex direction="column" alignItems={["center", "start"]}>
+                <Text fontWeight="bold" color={textColor}>
+                  Legal
+                </Text>
+                <FooterLink href="/privacy-policy" label="Privacy Policy" />
+                <FooterLink href="/terms-of-service" label="Terms of Service" />
+              </Flex>
+              <Flex direction="column" alignItems={["center", "start"]}>
+                <Text fontWeight="bold" color={textColor}>
+                  Connect
+                </Text>
+                <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
+                <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
+              </Flex>
+            </Box>
+          </nav>
         </Box>
-        <nav>
-          <Box display="flex" gap="5" fontSize="xs" color="blue.500">
-            <FooterLink href="/privacy-policy" label="Privacy Policy" />
-            <FooterLink href="/terms-of-service" label="Terms of Service" />
-            <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
-            <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
-          </Box>
-        </nav>
       </Box>
     </footer>
   );
@@ -29,14 +68,10 @@ export function Footer() {
 const FooterLink = ({ href, label }: { href: string; label: string }) =>
   useMemo(
     () => (
-      <Link
-        href={href}
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-        aria-label={label}
-        className="hover:underline underline-offset-2"
-      >
-        {label}
+      <Link href={href} rel="noopener noreferrer nofollow" target="_blank" aria-label={label}>
+        <Text color="blue.500" textUnderlineOffset={2} _hover={{ textDecoration: "underline" }}>
+          {label}
+        </Text>
       </Link>
     ),
     [href, label]
diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx
index b94124a6..70a2ce2c 100644
--- a/website/src/components/Layout.tsx
+++ b/website/src/components/Layout.tsx
@@ -1,9 +1,11 @@
 // https://nextjs.org/docs/basic-features/layouts
 
+import { Box, Grid } from "@chakra-ui/react";
 import type { NextPage } from "next";
 import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers } from "react-icons/fi";
 import { Header } from "src/components/Header";
 
+import { SlimFooter } from "./Dashboard/SlimFooter";
 import { Footer } from "./Footer";
 import { SideMenuLayout } from "./SideMenuLayout";
 
@@ -28,7 +30,7 @@ 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">
+  <Grid templateRows="min-content 1fr" h="full">
     <Header transparent={true} />
     <SideMenuLayout
       menuButtonOptions={[
@@ -52,10 +54,14 @@ export const getDashboardLayout = (page: React.ReactElement) => (
         },
       ]}
     >
-      {page}
-      <Footer />
+      <Grid templateRows="1fr min-content" h="full">
+        <Box>{page}</Box>
+        <Box mt="10">
+          <SlimFooter />
+        </Box>
+      </Grid>
     </SideMenuLayout>
-  </div>
+  </Grid>
 );
 
 export const getAdminLayout = (page: React.ReactElement) => (
diff --git a/website/src/components/SideMenuLayout.tsx b/website/src/components/SideMenuLayout.tsx
index a768bc85..1e92a0c7 100644
--- a/website/src/components/SideMenuLayout.tsx
+++ b/website/src/components/SideMenuLayout.tsx
@@ -12,11 +12,11 @@ export const SideMenuLayout = (props: SideMenuLayoutProps) => {
 
   return (
     <Box backgroundColor={colorMode === "light" ? colors.light.bg : colors.dark.bg} className="sm:overflow-hidden">
-      <Box className="sm:flex h-full lg:gap-6">
-        <Box className="p-3 lg:p-6 lg:pr-0">
+      <Box display="flex" flexDirection={["column", "row"]} h="full" gap={["0", "0", "0", "6"]}>
+        <Box p={["3", "3", "3", "6"]} pr={["3", "3", "3", "0"]}>
           <SideMenu buttonOptions={props.menuButtonOptions} />
         </Box>
-        <Box className="flex flex-col overflow-y-auto p-3 lg:p-6 lg:pl-0 gap-14 w-full">{props.children}</Box>
+        <Box className="overflow-y-auto p-3 lg:p-6 lg:pl-0 w-full">{props.children}</Box>
       </Box>
     </Box>
   );
diff --git a/website/src/pages/dashboard.tsx b/website/src/pages/dashboard.tsx
index 42481f1e..3971e125 100644
--- a/website/src/pages/dashboard.tsx
+++ b/website/src/pages/dashboard.tsx
@@ -1,3 +1,4 @@
+import { Flex } from "@chakra-ui/react";
 import Head from "next/head";
 import { useSession } from "next-auth/react";
 import { LeaderboardTable, TaskOption } from "src/components/Dashboard";
@@ -16,8 +17,10 @@ const Dashboard = () => {
         <title>Dashboard - Open Assistant</title>
         <meta name="description" content="Chat with Open Assistant and provide feedback." />
       </Head>
-      <TaskOption displayTaskCategories={[TaskCategory.Tasks]} />
-      <LeaderboardTable />
+      <Flex direction="column" gap="10">
+        <TaskOption displayTaskCategories={[TaskCategory.Tasks]} />
+        <LeaderboardTable />
+      </Flex>
     </>
   );
 };