From 22d6ec482cf2ba292ec26b7e3f08aadcbdabe50e Mon Sep 17 00:00:00 2001
From: EvanLin3141 <evan.lin.3.141@gmail.com>
Date: Tue, 11 Feb 2025 11:08:26 +0000
Subject: [PATCH] UPDATE: Google Login Responsiveness

---
 frontend/src/components/Auth/LoginForm.tsx | 23 +++++++++---------
 frontend/src/components/Auth/OAuth.tsx     | 27 +++++++++++++---------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/Auth/LoginForm.tsx b/frontend/src/components/Auth/LoginForm.tsx
index e520b80..8344472 100644
--- a/frontend/src/components/Auth/LoginForm.tsx
+++ b/frontend/src/components/Auth/LoginForm.tsx
@@ -102,11 +102,11 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
   return (
     <>
       <div className="h-[100%] flex flex-col justify-evenly items-center">
-        <h1 className="text-white text-lg"> Login </h1>
+        <h1 className="text-white text-[2.5em] font-[800]"> Login </h1>
         <form
           onSubmit={handleSubmit}
           id="login-form"
-          className="h-[100%] flex flex-col justify-evenly items-center"
+          className="h-[100%] flex flex-col items-center"
         >
           {errors.general && (
             <p className="text-red-500 text-sm text-center">{errors.general}</p>
@@ -134,18 +134,19 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
             onChange={handleInputChange}
             extraClasses={`${errors.password ? "border-red-500" : ""}`}
           />
+          <button
+            type="button"
+            className="flex items-center justify-start bg-white text-gray-600 font-semibold py-1 px-2 rounded shadow-md w-[220px] hover:bg-gray-100 active:bg-gray-200"
+            onClick={onForgotPassword}>
+            <ForgotIcon className="flex flex-row justify-content "/>
+            Forgot Password
+          </button>
 
           <Button type="submit">Login</Button>
-          
-          <Button
-            type="button"
-            extraClasses="flex flex-row items-center px-3"
-            onClick={onForgotPassword}>
-            <ForgotIcon />
-            Forgot Password
-          </Button>
-          <GoogleLogin />
         </form>
+        <div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
+          <GoogleLogin />
+          </div>
       </div>
     </>
   );
diff --git a/frontend/src/components/Auth/OAuth.tsx b/frontend/src/components/Auth/OAuth.tsx
index a3c5446..7f89aff 100644
--- a/frontend/src/components/Auth/OAuth.tsx
+++ b/frontend/src/components/Auth/OAuth.tsx
@@ -7,17 +7,22 @@ export default function GoogleLogin() {
   };
 
   return (
-    <div>
-    <button
-        onClick={handleLoginClick}
-        className="flex items-center justify-start bg-white text-gray-600 font-semibold py-1 px-2 rounded shadow-md w-[220px] hover:bg-gray-100 active:bg-gray-200">
-        <img
-        src="../../../images/icons/google-icon.png"
-        alt="Google logo"
-        className="w-8 h-8 mr-2"
-        />
-        <span className="flex-grow">Sign in with Google</span>
-    </button>
+    <div className="w-full">
+      <div className="flex flex-wrap justify-center w-full">
+        <button
+          onClick={handleLoginClick}
+          //w-full basis-[90%] (% size of original container)
+          className="flex w-full max-w-[19em] basis-[90%] flex-grow flex-shrink items-center justify-start bg-white text-gray-600 
+        font-semibold py-[0.15em] pl-[0.3em] pr-[0.6em] rounded shadow-md flex-grow flex-shrink
+        hover:bg-gray-100 active:bg-gray-200 sm:max-w-[18em] mx-[1em]">
+          <img
+            src="../../../images/icons/google-icon.png"
+            alt="Google logo"
+            className="w-[2em] h-[2em] mr-2"
+          />
+          <span className="flex-grow">Sign in with Google</span>
+        </button>
+      </div>
     </div>
   );
 }