Updated signup and login page uis

.gitattributes

@@ -1,4 +1,3 @@
-*.js filter=lfs diff=lfs merge=lfs -text
 *.yml filter=lfs diff=lfs merge=lfs -text
 *.jsx filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text

frontend/src/components/GoogleButton/GoogleButton.js

@@ -24,6 +24,8 @@ const GoogleButton = () => {
           borderRadius: '8px',
           padding: '8px 16px',
           fontSize: '14px',
+          width: '100%',
+          height: '50px'
         }}
       >
         <FaGoogle className="me-2" />

frontend/src/components/Login/Login.js

@@ -2,9 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useSignInWithEmailAndPassword } from "react-firebase-hooks/auth";
 import { Link, useNavigate } from "react-router-dom";
 import { auth } from "../Firebase/firebase";
-
 import GoogleButton from '../GoogleButton/GoogleButton'; // Import the GoogleButton
-
 import toast from "react-hot-toast";
 import Footer from "../Footer/Footer";
 
@@ -33,6 +31,7 @@ const LoginForm = ({ email, setEmail, password, setPassword, showPassword, setSh
     </div>
     <div className="mb-3">
       <label htmlFor="password" className="form-label">Password:</label>
+
       <input
         type={showPassword ? "text" : "password"}
         id="password"
@@ -41,21 +40,23 @@ const LoginForm = ({ email, setEmail, password, setPassword, showPassword, setSh
         value={password}
         onChange={(e) => setPassword(e.target.value)}
         required
+
       />
       <span
-        style={{ color: "black", position: "absolute", top: "49%", right: "25px", border: "none", cursor: "pointer" }}
+        style={{ color: "black", position: "absolute", top: "40.5%", right: "60px", border: "none", cursor: "pointer" }}
         className="material-symbols-outlined"
         onClick={() => setShowPassword(!showPassword)}
       >
         {showPassword ? "visibility_off" : "visibility"}
       </span>
+
     </div>
-    <button 
-      type="submit" 
-      className="btn btn-primary w-100 mb-3" 
-      style={{ fontSize: '0.8rem', padding: '0.5rem' }}
+    <button
+      type="submit"
+      className="btn btn-primary w-100 mb-3"
+      style={{ fontSize: '1.1rem', padding: '0.5rem', height: '50px' }}
       disabled={loading}>
-        {loading ? "Logging in..." : "Login"}
+      {loading ? "Logging in..." : "Login"}
     </button>
     <div className="text-center">
       <p>Or</p>
@@ -106,10 +107,32 @@ function Login() {
   }, [navigate]);
 
   return (
+    <>
+      <style>
+        {`.signin-card {
+            background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
+            border-radius: 20px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+            padding: 2rem;
+            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+          }
+          .signin-card:hover {
+            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
+            transform: translateY(-5px);
+          }
+          .signin-title {
+            font-size: 1.8rem;
+            font-weight: bold;
+            color: #333;
+            text-align: center;
+            margin-bottom: 1.5rem;
+          }
+        `}
+        </style>
     <div className="container mx-auto mt-5 flex flex-col justify-center bg-cyan-500" style={{ height: "auto" }}>
       <div className="row justify-content-center" style={{ width: "100%" }}>
         <div className="col-md-6">
-          <div className="card shadow">
+          <div className="card shadow signin-card">
             <div className="card-body">
               <LoginHeader />
               <LoginForm
@@ -130,6 +153,7 @@ function Login() {
       </div>
       <Footer />
     </div>
+    </>
   );
 }
 

frontend/src/components/Signup/Signup.js

@@ -102,19 +102,58 @@ function Signup() {
   return (
     <>
       <style>
-        {`
-          .signup-card {
-            background: linear-gradient(145deg, #f0f0f0, #e6e6e6);
+        {`.signup-card {
+            background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
             border-radius: 20px;
-            box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
-            transition: all 0.3s ease;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+            padding: 2rem;
+            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
           }
           .signup-card:hover {
-            box-shadow: 0 0 30px rgba(0, 123, 255, 0.5);
+            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
             transform: translateY(-5px);
           }
-          .card-body {
-            padding: 2rem;
+          .signup-title {
+            font-size: 1.8rem;
+            font-weight: bold;
+            color: #333;
+            text-align: center;
+            margin-bottom: 1.5rem;
+          }
+          .form-label {
+            color: #555;
+            font-weight: 500;
+          }
+          .form-control {
+            padding: 0.75rem;
+            border-radius: 10px;
+            border: 1px solid #ddd;
+            transition: border-color 0.2s ease;
+          }
+          .form-control:focus {
+            border-color: #007bff;
+            box-shadow: none;
+          }
+          .btn-primary {
+            background-color: #007bff;
+            border-color: #007bff;
+            padding: 0.75rem;
+            font-size: 1rem;
+            border-radius: 10px;
+            transition: background-color 0.3s ease;
+          }
+          .btn-primary:hover {
+            background-color: #0056b3;
+          }
+          .google-btn {
+            background-color: #db4437;
+            border-color: #db4437;
+            padding: 0.75rem;
+            border-radius: 10px;
+            transition: background-color 0.3s ease;
+          }
+          .google-btn:hover {
+            background-color: #c23321;
           }
         `}
       </style>
@@ -227,8 +266,8 @@ function Signup() {
             </div>
           </div>
         </div>
-        <Footer />
       </div>
+      <Footer />
     </>
   );
 }