Merge branch 'main' into BUG/Misalignment-Footer-1

Vin205 · Oct 22, 2024 · 95d17cb · 95d17cb
2 parents a2fa574 + ee0360d
commit 95d17cb
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 19 deletions.
diff --git a/.gitattributes b/.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

diff --git a/frontend/src/components/GoogleButton/GoogleButton.js b/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" />

diff --git a/frontend/src/components/Login/Login.js b/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";
 
 
@@ -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>
 
     </div>
+    </>
   );
 }
 

diff --git a/frontend/src/components/Navbar/Navbar.css b/frontend/src/components/Navbar/Navbar.css
@@ -15,6 +15,8 @@
   height: 60px;
   width: 100%;
   padding: 0;
+/*   for responsiveness */
+  flex-wrap: nowrap;
 }
 
 .logo {

diff --git a/frontend/src/components/Signup/Signup.js b/frontend/src/components/Signup/Signup.js
@@ -101,23 +101,62 @@ 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>
-      <div className="container mt-5 justify-content-center" style={{ height: "auto" }}>
+      <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 signup-card">
@@ -226,8 +265,12 @@ function Signup() {
             </div>
           </div>
         </div>
+
 
+
+
       </div>
+      <Footer />
     </>
   );
 }

diff --git a/frontend/src/pages/Contact/Contact.css b/frontend/src/pages/Contact/Contact.css
@@ -113,4 +113,7 @@ form input {
         height: fit-content;
         margin-block: 20px;
     }
+   .btn{
+        width:20vw;
+    }
 }