Merge branch 'main' of github.com:LAION-AI/Open-Chat-GPT

website/package.json

@@ -16,6 +16,7 @@
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.13",
     "@next-auth/prisma-adapter": "^1.0.5",
+    "@next/font": "^13.1.0",
     "@prisma/client": "^4.7.1",
     "@tailwindcss/forms": "^0.5.3",
     "autoprefixer": "^10.4.13",

website/src/components/AuthLayout.tsx

@@ -1,33 +1,14 @@
 import Link from "next/link";
+import Image from "next/image";
 
-function BackgroundIllustration(props) {
+export function AuthLayout({ children }) {
   return (
-    <svg viewBox="0 0 1090 1090" aria-hidden="true" fill="none" preserveAspectRatio="none" {...props}>
-      <circle cx={545} cy={545} r="544.5" />
-      <circle cx={545} cy={545} r="480.5" />
-      <circle cx={545} cy={545} r="416.5" />
-      <circle cx={545} cy={545} r="352.5" />
-    </svg>
-  );
-}
-
-export function AuthLayout({ title, subtitle, children }) {
-  return (
-    <main className="flex min-h-full overflow-hidden pt-16 sm:py-28">
-      <div className="mx-auto flex w-full max-w-2xl flex-col px-4 sm:px-6">
-        <Link href="/" aria-label="Home">
-          {/* logo */}
+    <main className="flex items-center justify-center min-h-full overflow-hidden pt-16 sm:py-28 subpixel-antialiased">
+      <div className="flex items-center w-full max-w-2xl flex-col px-4 sm:px-6">
+        <Link href="/" aria-label="Home" className="flex items-center text-3xl font-bold text-black">
+          <Image src="/images/logos/logo.svg" width="100" height="100" alt="Open Assistant Logo" /> Open Assistant
         </Link>
-        <div className="relative mt-12 sm:mt-16">
-          <BackgroundIllustration
-            width="1090"
-            height="1090"
-            className="absolute -top-7 left-1/2 -z-10 h-[788px] -translate-x-1/2 stroke-gray-300/30 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:-top-9 sm:h-auto"
-          />
-          <h1 className="text-center text-2xl font-medium tracking-tight text-gray-900">{title}</h1>
-          {subtitle && <p className="mt-3 text-center text-lg text-gray-600">{subtitle}</p>}
-        </div>
-        <div className="-mx-4 mt-10 flex-auto bg-white py-10 px-4 shadow-2xl shadow-gray-900/10 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-24">
+        <div className="flex-auto items-center justify-center w-full py-10 px-4 sm:mx-0 sm:flex-none sm:rounded-2xl sm:p-20">
           {children}
         </div>
       </div>

website/src/components/Avatar.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { signOut, useSession } from "next-auth/react";
+import Image from "next/image";
+import { Popover } from "@headlessui/react";
+import { AnimatePresence, motion } from "framer-motion";
+import { FaCog, FaSignOutAlt, FaGithub } from "react-icons/fa";
+
+export function Avatar() {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return <></>;
+  }
+  if (session && session.user) {
+    const email = session.user.email;
+    const accountOptions = [
+      {
+        name: "Account Settings",
+        href: "#",
+        desc: "Account Settings",
+        icon: FaCog,
+        //For future use
+      },
+    ];
+    return (
+      <Popover className="relative">
+        {({ open }) => (
+          <>
+            <Popover.Button aria-label="Toggle Account Options" className="flex">
+              <div className="flex items-center gap-4 p-1 lg:pr-6 rounded-full bg-white border border-slate-300/70 hover:bg-gray-200/50 transition-colors duration-300">
+                <Image
+                  src="/images/temp-avatars/av1.jpg"
+                  alt="Profile Picture"
+                  width="40"
+                  height="40"
+                  className="rounded-full"
+                ></Image>
+                <p className="hidden lg:flex">{email}</p>
+                {/* Will be changed to username once it is implemented */}
+              </div>
+            </Popover.Button>
+            <AnimatePresence initial={false}>
+              {open && (
+                <>
+                  <Popover.Panel
+                    static
+                    as={motion.div}
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{
+                      opacity: 0,
+                      y: -10,
+                      transition: { duration: 0.2 },
+                    }}
+                    className="absolute right-0 mt-3 w-screen max-w-xs p-4 rounded-md bg-white border border-slate-300/70"
+                  >
+                    <div className="flex flex-col gap-1">
+                      {accountOptions.map((item) => (
+                        <a
+                          key={item.name}
+                          href={item.href}
+                          aria-label={item.desc}
+                          className="flex items-center rounded-md hover:bg-gray-200/50"
+                        >
+                          <div className="p-4">
+                            <item.icon aria-hidden="true" />
+                          </div>
+                          <div>
+                            <p>{item.name}</p>
+                          </div>
+                        </a>
+                      ))}
+                      <a
+                        className="flex items-center rounded-md hover:bg-gray-100 cursor-pointer"
+                        onClick={() => signOut()}
+                      >
+                        <div className="p-4">
+                          <FaSignOutAlt />
+                        </div>
+                        <div>
+                          <p>Sign Out</p>
+                        </div>
+                      </a>
+                    </div>
+                  </Popover.Panel>
+                </>
+              )}
+            </AnimatePresence>
+          </>
+        )}
+      </Popover>
+    );
+  }
+}
+
+export default Avatar;

website/src/components/CallToAction.tsx

@@ -12,7 +12,7 @@ export function CallToAction() {
           <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">Join Us</h2>
           <p className="mt-4 text-lg text-gray-300">
             All open source projects begin with people like you. Open source is the belief that if we collaborate we can
-            together gift our knoweledge and technology to the world for the benefit of humanity. Are you in? Find us
+            together gift our knowledge and technology to the world for the benefit of humanity. Are you in? Find us
             here:
           </p>
           <div className="mt-8 flex justify-center">
@@ -27,7 +27,7 @@ export function CallToAction() {
                     d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
                   />
                 </svg>
-                <span className="text-lg ml-3">DISCORD</span>
+                <span className="text-lg ml-3">Discord</span>
               </button>
             </a>