From b26e8bd95621c02c421d74e040137457efbbb5da Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 3 May 2023 00:48:24 +0530
Subject: [PATCH] update: UI for google auth button and loadin toggle in signin
 screen (#991)

---
 apps/app/components/account/google-login.tsx |  2 +-
 apps/app/pages/signin.tsx                    | 55 ++++++++++----------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/apps/app/components/account/google-login.tsx b/apps/app/components/account/google-login.tsx
index 478ffc67ea7..237439def44 100644
--- a/apps/app/components/account/google-login.tsx
+++ b/apps/app/components/account/google-login.tsx
@@ -47,7 +47,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
   return (
     <>
       <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
-      <div className="h-12" id="googleSignInButton" ref={googleSignInButton} />
+      <div className="overflow-hidden rounded" id="googleSignInButton" ref={googleSignInButton} />
     </>
   );
 };
diff --git a/apps/app/pages/signin.tsx b/apps/app/pages/signin.tsx
index a42188fce5e..3dee9a9e60b 100644
--- a/apps/app/pages/signin.tsx
+++ b/apps/app/pages/signin.tsx
@@ -97,42 +97,43 @@ const SignInPage: NextPage = () => {
         title: "Plane - Sign In",
       }}
     >
-      {isLoading && (
+      {isLoading ? (
         <div className="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-y-3">
-          <h2 className="text-xl text-gray-900">Signing in. Please wait...</h2>
+          <h2 className="text-xl text-brand-base">Signing in. Please wait...</h2>
           <Spinner />
         </div>
-      )}
-      <div className="flex h-screen w-full items-center justify-center overflow-auto">
-        <div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8">
-          <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
-            <div className="flex flex-col items-center justify-center gap-10">
-              <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
-              <h2 className="text-center text-xl font-medium text-brand-base">
-                Sign In to your Plane Account
-              </h2>
-            </div>
+      ) : (
+        <div className="flex h-screen w-full items-center justify-center overflow-auto">
+          <div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8">
+            <div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
+              <div className="flex flex-col items-center justify-center gap-10">
+                <Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
+                <h2 className="text-center text-xl font-medium text-brand-base">
+                  Sign In to your Plane Account
+                </h2>
+              </div>
 
-            <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
-              {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
-                <>
-                  <EmailSignInForm handleSuccess={onSignInSuccess} />
+              <div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
+                {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
+                  <>
+                    <EmailSignInForm handleSuccess={onSignInSuccess} />
 
-                  <div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5 ">
-                    <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
+                    <div className="flex flex-col items-center justify-center gap-3 border-t border-brand-base py-5 px-5 ">
+                      <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
 
-                    <GithubLoginButton handleSignIn={handleGithubSignIn} />
-                  </div>
-                </>
-              ) : (
-                <>
-                  <EmailPasswordForm onSuccess={onSignInSuccess} />
-                </>
-              )}
+                      <GithubLoginButton handleSignIn={handleGithubSignIn} />
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <EmailPasswordForm onSuccess={onSignInSuccess} />
+                  </>
+                )}
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      )}
     </DefaultLayout>
   );
 };