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>
  );