Googlesign

src/Components/Login/Login.css

@@ -103,4 +103,9 @@ p a:hover {
 .eye:hover {
   color: #007efc;
   cursor: pointer;
-}
+}
+.google-login-wrapper {
+  width: 100%; 
+  display: flex;
+  justify-content: center;
+}

src/Components/Login/Login.jsx

@@ -67,6 +67,7 @@ const Login = ({ isDarkMode }) => {
         <div className={`login-container ${isDarkMode ? 'dark-mode' : ''}`}>
           <h2>Login</h2>
           <div className="input-container">
+            <label>Email</label>
             <input
               type="email"
               placeholder="Email"
@@ -84,6 +85,7 @@ const Login = ({ isDarkMode }) => {
             {warnings.email && <p style={{ color: "red" }} className="warningmsg">{warnings.email}</p>}
 
             <div className="input-container">
+            <label>Password</label>
               <input
                 type={isVisible ? "text" : "password"}
                 placeholder="Password"

src/Components/Signup/Signup.css

@@ -108,4 +108,12 @@ input.valid {
 input.invalid {
   border-color: red;
   /* Red border for invalid inputs */
-}
+}
+
+
+/*  style for google login button */
+.google-login-wrapper {
+  width: 100%;
+  display: flex; 
+  justify-content: center; 
+}

src/Components/Signup/Signup.jsx

@@ -100,15 +100,19 @@ const Signup = () => {
         <p>
           Already have an account? <NavLink to="/login">Login</NavLink>
         </p>
-        <GoogleLogin
-          onSuccess={(credentialResponse) => {
-            const credentialDecoded = jwtDecode(credentialResponse.credential);
-            console.log(credentialDecoded);
-          }}
-          onError={() => {
-            console.log("Sign-Up Failed");
-          }}
-        />
+        <div className="google-login-wrapper">
+          <GoogleLogin
+            onSuccess={(credentialResponse) => {
+              const credentialDecoded = jwtDecode(credentialResponse.credential);
+              console.log(credentialDecoded);
+            }}
+            onError={() => {
+              console.log("Sign-Up Failed!");
+            }}
+          />
+        </div>
+
+
       </div>
     </div>
   );