Merge pull request #1519 from hngx-org/FIX/Google-login-logo

Fix/google login logo

modules/auth/component/AuthSocialButtons/SignUpWithGoogle.tsx

@@ -4,27 +4,25 @@ import SignUpWithSocialsButton from './SignUpWithSocialsButton';
 import googleLogo from '../../../../public/assets/Google.png';
 import LogoCarousel from '@modules/home/carousel/logos/logosCarousel';
 
-
 const SignUpWithGoogle = () => {
-
   const [isloading, setIsLoading] = useState(false);
 
   const handleLinkClick = () => {
     setIsLoading(true);
     setTimeout(() => {
-      window.location.href="https://zuri-auth.up.railway.app/api/auth/api/auth/google";
+      window.location.href = 'https://zuri-auth.up.railway.app/api/auth/api/auth/google';
     }, 5000);
   };
 
-//href="https://zuri-auth.up.railway.app/api/auth/api/auth/google"
+  //href="https://zuri-auth.up.railway.app/api/auth/api/auth/google"
   return (
     // the google logo has white space around it, so i am reducing the margin on the right so all the buttons look similar
     <SignUpWithSocialsButton
-    //  href="https://zuri-auth.up.railway.app/api/auth/api/auth"
-        onClick={handleLinkClick}
-        isLoading={isloading}
-       //onClick={handleGoogleSignIn}
-      leftIcon={<Image src={googleLogo} alt="Google Logo" className="w-5 h-5" />}
+      //  href="https://zuri-auth.up.railway.app/api/auth/api/auth"
+      onClick={handleLinkClick}
+      isLoading={isloading}
+      //onClick={handleGoogleSignIn}
+      leftIcon={<Image src={googleLogo} alt="Google Logo" className="" />}
     >
       Continue with Google
     </SignUpWithSocialsButton>

modules/auth/component/AuthSocialButtons/SignUpWithSocialsButton.tsx

@@ -20,19 +20,18 @@ const SignUpWithSocialsButton: FC<ButtonProps> = ({ children, leftIcon, ...props
   const { setCurrentPathForOAuth } = useUserSession();
 
   return (
-    <Button
-      intent={'tertiary'}
-      size={'sm'}
-      className="w-full bg-white-100 text-custom-color20 border-custom-color21 border rounded-md hover:bg-white-100 hover:border-brand-green-primary sm:text-base flex justify-center"
+    <button
+      className="w-full bg-white-100 text-custom-color20 border-custom-color21 border rounded-md hover:bg-white-100 hover:border-brand-green-primary sm:text-base flex justify-center items-center py-3 md:py-4 gap-2"
       onClick={setCurrentPathForOAuth}
       {...props}
     >
-      <div className=" w-[90%]  sm:w-[70%] md:w-[60%] lg:w-[80%] xl:w-[70%] items-center flex gap-1 justify-center">
-        {/* <div className='flex justify-center'> */}
-        <div className=" w-[10%]">{leftIcon}</div>
-        <p className=" w-[80%] sm:w-[70%] md:w-[70%] lg:w-[80%] xl:w-[70%] 2xl:w-[60%] text-center">{children}</p>
-      </div>
-    </Button>
+      {/* <div className=" w-[90%]  sm:w-[70%] md:w-[60%] lg:w-[80%] xl:w-[70%] items-center flex gap-1 justify-center"> */}
+      {/* <div className='flex justify-center'> */}
+      <div className=" w-[20px]">{leftIcon}</div>
+      {/* <p className="w-[80%] sm:w-[70%] md:w-[70%] lg:w-[80%] xl:w-[70%] 2xl:w-[60%] text-center">{children}</p> */}
+      <p className="text-center">{children}</p>
+      {/* </div> */}
+    </button>
   );
 };