updated avatar component name, added ability to change username (only works server side for now), updated signin page, updated Footer

Still working on the account settings page but didn't want to get behind on commits.

website/src/components/Footer.tsx

@@ -1,35 +1,75 @@
 import Image from "next/image";
 import Link from "next/link";
 
+import { FaGithub, FaDiscord } from "react-icons/fa";
 import { Container } from "./Container";
-import { NavLinks } from "./NavLinks";
 
 export function Footer() {
   return (
-    <footer className="border-t border-gray-200">
-      <Container className="">
-        <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-16">
-          <div>
-            <div className="flex items-center text-gray-900">
+    <footer className="border-t border-gray-200 bg-white">
+      <main>
+        <Container className="">
+          <div className="flex flex-wrap justify-between gap-y-12 py-10 lg:items-center lg:py-16">
+            <div className="flex items-center text-black pr-8">
               <Link href="/" aria-label="Home" className="flex items-center">
-                <Image
-                  src="/images/logos/CHAT-THOUGHT-LOGO.svg"
-                  className="mx-auto object-fill"
-                  width="50"
-                  height="50"
-                  alt="logo"
-                />
+                <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="52" height="52" alt="logo" />
               </Link>
 
-              <div className="ml-4">
-                <p className="text-base font-semibold">Open Assistant</p>
-                <p className="mt-1 text-sm">Conversational AI for everyone.</p>
+              <div className="ml-2">
+                <p className="text-base font-bold">Open Assistant</p>
+                <p className="text-sm">Conversational AI for everyone.</p>
               </div>
             </div>
-            <nav className="mt-11 flex gap-8">{/* <NavLinks /> */}</nav>
+            <nav className="flex justify-center gap-20">
+              <div className="flex flex-col text-sm leading-7">
+                <b>Information</b>
+                <div className="flex flex-col leading-5">
+                  <Link href="#" aria-label="Our Team" className="hover:underline underline-offset-2">
+                    Our Team
+                  </Link>
+                  <Link href="#join-us" aria-label="Join Us" className="hover:underline underline-offset-2">
+                    Join Us
+                  </Link>
+                </div>
+              </div>
+              <div className="flex flex-col text-sm leading-7">
+                <b>Legal</b>
+                <div className="flex flex-col leading-5">
+                  <Link href="#" aria-label="Privacy Policy" className="hover:underline underline-offset-2">
+                    Privacy Policy
+                  </Link>
+                  <Link href="#" aria-label="Terms of Service" className="hover:underline underline-offset-2">
+                    Terms of Service
+                  </Link>
+                </div>
+              </div>
+              <div className="flex flex-col text-sm leading-7">
+                <b>Connect</b>
+                <div className="flex flex-col leading-5">
+                  <Link
+                    href="https://github.com/LAION-AI/Open-Assistant"
+                    rel="noopener noreferrer nofollow"
+                    target="_blank"
+                    aria-label="Privacy Policy"
+                    className="hover:underline underline-offset-2"
+                  >
+                    Github
+                  </Link>
+                  <Link
+                    href="https://discord.gg/pXtnYk9c"
+                    rel="noopener noreferrer nofollow"
+                    target="_blank"
+                    aria-label="Terms of Service"
+                    className="hover:underline underline-offset-2"
+                  >
+                    Discord
+                  </Link>
+                </div>
+              </div>
+            </nav>
           </div>
-        </div>
-      </Container>
+        </Container>
+      </main>
     </footer>
   );
 }

website/src/components/Header.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 import { signOut, useSession } from "next-auth/react";
 import { FaUser, FaSignOutAlt } from "react-icons/fa";
 
-import { Avatar } from "./Avatar";
+import { UserMenu } from "./UserMenu";
 import { Container } from "./Container";
 import { NavLinks } from "./NavLinks";
 
@@ -45,9 +45,9 @@ function AccountButton() {
     return;
   }
   return (
-    <Link href="/auth/signup" aria-label="Home" className="flex items-center">
+    <Link href="/auth/signin" aria-label="Home" className="flex items-center">
       <Button variant="outline" leftIcon={<FaUser />}>
-        Log in
+        Sign in
       </Button>
     </Link>
   );
@@ -113,7 +113,7 @@ export function Header() {
               )}
             </Popover>
             <AccountButton />
-            <Avatar />
+            <UserMenu />
           </div>
         </Container>
       </nav>

website/src/components/UserMenu.tsx

@@ -5,7 +5,7 @@ import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
 
-export function Avatar() {
+export function UserMenu() {
   const { data: session } = useSession();
 
   if (!session) {
@@ -16,7 +16,7 @@ export function Avatar() {
     const accountOptions = [
       {
         name: "Account Settings",
-        href: "#",
+        href: "/account",
         desc: "Account Settings",
         icon: FaCog,
         //For future use
@@ -35,8 +35,7 @@ export function Avatar() {
                   height="40"
                   className="rounded-full"
                 ></Image>
-                <p className="hidden lg:flex">{email}</p>
-                {/* Will be changed to username once it is implemented */}
+                <p className="hidden lg:flex">{session.user.name || session.user.email}</p>
               </div>
             </Popover.Button>
             <AnimatePresence initial={false}>
@@ -72,7 +71,7 @@ export function Avatar() {
                       ))}
                       <a
                         className="flex items-center rounded-md hover:bg-gray-100 cursor-pointer"
-                        onClick={() => signOut()}
+                        onClick={() => signOut({ callbackUrl: "/" })}
                       >
                         <div className="p-4">
                           <FaSignOutAlt />
@@ -93,4 +92,4 @@ export function Avatar() {
   }
 }
 
-export default Avatar;
+export default UserMenu;