From 107375d1eb428c8b7e3e9c145208de04eab1a741 Mon Sep 17 00:00:00 2001
From: Dani <git@danny.works>
Date: Thu, 29 Dec 2022 12:41:44 -0800
Subject: [PATCH] add swc and fix up nav

---
 components/Nav.tsx    |  8 +++----
 lib/providers.tsx     | 19 ++++++++++-----
 next.config.js        |  1 +
 pages/auth/signin.tsx | 55 +++++++++++++++++++++++++++++++++++++++++++
 pages/login.tsx       | 55 -------------------------------------------
 5 files changed, 73 insertions(+), 65 deletions(-)
 create mode 100644 pages/auth/signin.tsx
 delete mode 100644 pages/login.tsx

diff --git a/components/Nav.tsx b/components/Nav.tsx
index fc2f66e..9d0b850 100644
--- a/components/Nav.tsx
+++ b/components/Nav.tsx
@@ -41,13 +41,13 @@ const Nav: React.FC<Props> = (props) => {
                 </div>
                 <div className="flex flex-row items-center text-right">
                     {!user && (
-                        <Link className="text-lg font-medium text-gray-800 dark:text-gray-300 hover:text-gray-600 hover:dark:text-gray-200" href="/login">Login</Link>
+                        <Link className="text-lg font-medium text-gray-800 dark:text-gray-300 hover:text-gray-600 hover:dark:text-gray-200" href="/auth/signin">Sign in</Link>
                     )}
                     {user && (
                         <span className="flex flex-row items-center gap-x-4 text-lg font-medium text-gray-800 dark:text-gray-300 hover:text-gray-600 hover:dark:text-gray-200">
                             Hello, {user?.user_metadata?.full_name}
                             <button onClick={toggleUserInfo}>
-                                <img className="rounded-xl w-12" alt="Avatar name" src={user?.user_metadata?.avatar_url} />
+                                <img referrerPolicy="no-referrer" className="rounded-xl w-12" alt="Avatar name" src={user?.user_metadata?.avatar_url} />
                             </button>
                         </span>
                     )}
@@ -55,7 +55,7 @@ const Nav: React.FC<Props> = (props) => {
             </nav>
             <div className={`${userInfoOpened ? "flex" : "hidden"} items- flex-col gap-y-4 absolute right-0 bg-gray-300 dark:bg-nav-bg transition ease-in-out rounded-bl-xl z-[40]`}>
                 <div className="flex items-center flex-col gap-y-4 px-16 pt-8 pb-2">
-                    <img className="rounded-xl w-24" alt="Avatar name" src={user?.user_metadata?.avatar_url} />
+                    <img referrerPolicy="no-referrer" className="rounded-xl w-24" alt="Avatar name" src={user?.user_metadata?.avatar_url} />
                     <div>
                         <h1 className="text-xl font-bold text-gray-800 dark:text-gray-200 text-center">
                             {user?.user_metadata?.full_name}
@@ -89,7 +89,7 @@ const Nav: React.FC<Props> = (props) => {
                     } finally {
                         setLoading(false)
                         setUserInfoOpened(false) // we need this to make it so if they logout it closes the user info page <3
-                        router.reload()
+                        router.push("/")
                     }
                 }} variant="outlined" startIcon={<Logout />} className="mx-12 dark:text-gray-300 text-gray-800 border-gray-800 hover:border-gray-700 dark:border-gray-300 hover:dark:border-gray-200 font-sans font-bold normal-case">
                     Sign out
diff --git a/lib/providers.tsx b/lib/providers.tsx
index fa65fa0..bc786a7 100644
--- a/lib/providers.tsx
+++ b/lib/providers.tsx
@@ -1,25 +1,32 @@
 import { Google, GitHub, Twitter } from "@mui/icons-material";
+import { SiMicrosoft, SiSpotify, SiGitlab } from "react-icons/si";
+
+let standardClasses = "text-xl"
+
 const pages = {
     "google": {
         displayName: "Google",
-        icon: <Google />
+        icon: <Google className={standardClasses} />
     },
     "spotify": {
-        displayName: "Spotify"
+        displayName: "Spotify",
+        icon: <SiSpotify className={standardClasses} />
     },
     "azure": {
-        displayName: "Microsoft"
+        displayName: "Microsoft",
+        icon: <SiMicrosoft className={standardClasses} />
     },
     "twitter": {
         displayName: "Twitter",
-        icon: <Twitter />
+        icon: <Twitter className={standardClasses} />
     },
     "github": {
         displayName: "Github",
-        icon: <GitHub />
+        icon: <GitHub className={standardClasses} />
     },
     "gitlab": {
-        displayName: "Gitlab"
+        displayName: "Gitlab",
+        icon: <SiGitlab className={standardClasses} />
     }
 }
 
diff --git a/next.config.js b/next.config.js
index a843cbe..e674786 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  swcMinify: true
 }
 
 module.exports = nextConfig
diff --git a/pages/auth/signin.tsx b/pages/auth/signin.tsx
new file mode 100644
index 0000000..fae6ade
--- /dev/null
+++ b/pages/auth/signin.tsx
@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react"
+import type { NextPage } from "next"
+import providers from "../../lib/providers"
+import { Tooltip, Button, Badge } from "@mui/material"
+import { Logout, Menu, Notifications, Settings } from "@mui/icons-material"
+import { supabase } from "../../lib/supabase"
+import useUser from "../../hooks/useUser"
+import { useRouter } from "next/router"
+
+const Login: NextPage = () => {
+    const router = useRouter()
+    const { user } = useUser()
+
+    const [loading, setLoading] = useState(false)
+    const [email, setEmail] = useState("")
+
+    useEffect(() => {
+        if (user) router.push("/")
+    })
+
+    async function handleLogin(provider) {
+        setLoading(true)
+        try {
+            await supabase.auth.signIn({
+                provider
+            })
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <>
+        <div className="flex flex-col justify-center gap-y-2 items-center">
+                <h2 className="text-3xl dark:text-gray-300 text-gray-800 text-center">Sign in to Flame</h2>
+                <div className="flex flex-row items-center gap-x-2">
+                    {
+                        Object.keys(providers).map((provider, index) => (
+                            <Button key={provider} onClick={
+                                async (e) => {
+                                    handleLogin(provider)
+                                }
+                            }
+                            variant="outlined" className="dark:text-gray-300 text-gray-800 border-gray-800 hover:border-gray-700 dark:border-gray-300 hover:dark:border-gray-200 font-sans font-bold normal-case">
+                                {providers[provider].icon || <></>}
+                            </Button>
+                        ))
+                    }
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Login
\ No newline at end of file
diff --git a/pages/login.tsx b/pages/login.tsx
deleted file mode 100644
index 9e28e5d..0000000
--- a/pages/login.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useState, useEffect } from "react"
-import type { NextPage } from "next"
-import providers from "../lib/providers"
-import { Tooltip, Button, Badge } from "@mui/material"
-import { Logout, Menu, Notifications, Settings } from "@mui/icons-material"
-import { supabase } from "../lib/supabase"
-import useUser from "../hooks/useUser"
-import { useRouter } from "next/router"
-
-const Login: NextPage = () => {
-    const router = useRouter()
-    const { user } = useUser()
-
-    const [loading, setLoading] = useState(false)
-    const [email, setEmail] = useState("")
-
-    useEffect(() => {
-        if (user) router.push("/")
-    })
-
-    async function handleLogin(provider) {
-        setLoading(true)
-        try {
-            await supabase.auth.signIn({
-                provider
-            })
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    return (
-        <>
-        <div className="flex flex-col justify-center gap-y-2 px-96">
-                <h2 className="dark:text-gray-300 text-gray-800 text-center">Login to Flame</h2>
-
-                {
-                    Object.keys(providers).map((provider, index) => (
-                        <Button key={provider} onClick={
-                            async (e) => {
-                                handleLogin(provider)
-                            }
-                        }
-
-                            variant="outlined" startIcon={providers[provider].icon || <></>} className="mx-12 dark:text-gray-300 text-gray-800 border-gray-800 hover:border-gray-700 dark:border-gray-300 hover:dark:border-gray-200 font-sans font-bold normal-case">
-                            Continue With {providers[provider].displayName}
-                        </Button>
-                    ))
-                }
-            </div>
-        </>
-    )
-}
-
-export default Login
\ No newline at end of file