From 071778533ca6931d895954b1a43d7a43db3e2b8b Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Fri, 16 Jun 2023 21:28:44 +0400
Subject: [PATCH] fix: sign-in page

---
 app/sign-in/page.tsx        |  8 ++------
 components/header.tsx       |  7 ++++++-
 components/login-button.tsx | 20 +++++++++++++++-----
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/app/sign-in/page.tsx b/app/sign-in/page.tsx
index bb63e65..00891e7 100644
--- a/app/sign-in/page.tsx
+++ b/app/sign-in/page.tsx
@@ -1,13 +1,9 @@
-import { FooterText } from '@/components/footer'
 import { LoginButton } from '@/components/login-button'
 
 export default function SignInPage() {
   return (
-    <div className="flex flex-col items-center justify-center h-full min-h-screen">
-      <div className="space-y-4">
-        <LoginButton />
-        <FooterText />
-      </div>
+    <div className="flex h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10">
+      <LoginButton />
     </div>
   )
 }
diff --git a/components/header.tsx b/components/header.tsx
index a8ff321..469fc60 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -41,7 +41,12 @@ export async function Header() {
           {session?.user ? (
             <UserMenu user={session.user} />
           ) : (
-            <LoginButton className="-ml-2" />
+            <LoginButton
+              variant="link"
+              showGithubIcon={false}
+              text="Login"
+              className="-ml-2"
+            />
           )}
         </div>
       </div>
diff --git a/components/login-button.tsx b/components/login-button.tsx
index 3fb7be0..54207f7 100644
--- a/components/login-button.tsx
+++ b/components/login-button.tsx
@@ -5,18 +5,24 @@ import { signIn } from 'next-auth/react'
 
 import { cn } from '@/lib/utils'
 import { Button, type ButtonProps } from '@/components/ui/button'
-import { IconSpinner } from '@/components/ui/icons'
+import { IconGitHub, IconSpinner } from '@/components/ui/icons'
 
 interface LoginButtonProps extends ButtonProps {
+  showGithubIcon?: boolean
   text?: string
 }
 
-export function LoginButton({ className, ...props }: LoginButtonProps) {
+export function LoginButton({
+  text = 'Login with GitHub',
+  showGithubIcon = true,
+  className,
+  ...props
+}: LoginButtonProps) {
   const [isLoading, setIsLoading] = React.useState(false)
 
   return (
     <Button
-      variant="link"
+      variant="outline"
       onClick={() => {
         setIsLoading(true)
         signIn('github')
@@ -25,8 +31,12 @@ export function LoginButton({ className, ...props }: LoginButtonProps) {
       className={cn(className)}
       {...props}
     >
-      {isLoading && <IconSpinner className="mr-2 animate-spin" />}
-      Login
+      {isLoading ? (
+        <IconSpinner className="mr-2 animate-spin" />
+      ) : showGithubIcon ? (
+        <IconGitHub className="mr-2" />
+      ) : null}
+      {text}
     </Button>
   )
 }