Merge pull request #748 from rsandb/Footer-Styling

Footer styling

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]
+  );

website/src/components/Footer.tsx

@@ -1,40 +1,66 @@
-import { useColorMode } 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 bgColorClass = colorMode === "light" ? "bg-transparent" : "bg-gray-800";
-  const borderClass = colorMode === "light" ? "border-slate-200" : "border-transparent";
+  const backgroundColor = colorMode === "light" ? "white" : "gray.800";
+  const textColor = colorMode === "light" ? "black" : "gray.300";
 
   return (
-    <footer className={bgColorClass}>
-      <div className={`flex mx-auto max-w-7xl justify-between border-t p-10 ${borderClass}`}>
-        <div className="flex items-center pr-8">
-          <Link href="/" aria-label="Home" className="flex items-center">
-            <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
-          </Link>
+    <footer>
+      <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>
 
-          <div className="ml-2">
-            <p className="text-base font-bold">Open Assistant</p>
-            <p className="text-sm">Conversational AI for everyone.</p>
-          </div>
-        </div>
+            <Box>
+              <Text fontSize="md" fontWeight="bold">
+                Open Assistant
+              </Text>
+              <Text fontSize="sm" color="gray.500">
+                Conversational AI for everyone.
+              </Text>
+            </Box>
+          </Flex>
 
-        <nav className="grid grid-cols-2 gap-20 leading-5 text-sm">
-          <div className="flex flex-col">
-            <b className="pb-1">Legal</b>
-            <FooterLink href="/privacy-policy" label="Privacy Policy" />
-            <FooterLink href="/terms-of-service" label="Terms of Service" />
-          </div>
-          <div className="flex flex-col">
-            <b className="pb-1">Connect</b>
-            <FooterLink href="https://github.com/LAION-AI/Open-Assistant" label="Github" />
-            <FooterLink href="https://ykilcher.com/open-assistant-discord" label="Discord" />
-          </div>
-        </nav>
-      </div>
+          <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>
+      </Box>
     </footer>
   );
 }
@@ -42,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]

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}
+      <Grid templateRows="1fr min-content" h="full">
+        <Box>{page}</Box>
+        <Box mt="10">
+          <SlimFooter />
+        </Box>
+      </Grid>
     </SideMenuLayout>
-    <Footer />
-  </div>
+  </Grid>
 );
 
 export const getAdminLayout = (page: React.ReactElement) => (

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>
   );

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>
     </>
   );
 };