goggle-login-button

MonalikaPatnaik · Mar 19, 2024 · df6f5eb · df6f5eb
1 parent 72b58be
commit df6f5eb
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -52,3 +52,22 @@
   transition: all 0.2s ease-in-out;
   cursor: pointer;
 }
+.google-login-container{
+  display: flex;
+  width: 80%;
+  margin-top: 2.5rem;
+  position: relative;
+}
+.login-button{
+  cursor: pointer;
+  width: 100%;
+  border-radius: 0.75rem;
+  border-width: 2px;
+  font-weight: 600;
+  padding-bottom: 0.75rem;
+    padding-top: 0.75rem ;
+    --tw-border-opacity: 1;
+    border-color: rgb(0 0 0 / var(--tw-border-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(0 0 0 / var(--tw-text-opacity));
+}
diff --git a/frontend/src/Components/Signin/index.js b/frontend/src/Components/Signin/index.js
@@ -190,9 +190,9 @@ const SignIn = () => {
               SignUp
             </NavLink>
           </SignInForm>
-          <div className='flex relative mt-10 w-[80%] md:w-[60%]' onClick={handleGoogleLogin}>
-            <button className='py-3 rounded-xl text-black font-semibold w-[100%] border-2 border-black'>Sign in with Google</button>
-            <img src={require('../../assests/googleLogo.png')} className='w-10 absolute top-1.5 left-4' alt='google' />
+          <div className='google-login-container' onClick={handleGoogleLogin}>
+            <button className='login-button'>Sign in with Google</button>
+            <img src={require('../../assests/googleLogo.png')} style={{width:'2.5rem', position: 'absolute',left: '1rem',top: '0.375rem' }} alt='google' />
           </div>
         </SignInContainer>
 

diff --git a/tailwind.config.js b/tailwind.config.js