Merge pull request #248 from AyushSharma72/responsive

Fix the responsive ness of the navbar and login page #248

Author: Anuj3553

client/src/component/Login.jsx

@@ -11,7 +11,8 @@ import {
 import "../css/Login.css";
 import toast from "react-hot-toast";
 
-const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || 'https://bitbox-uxbo.onrender.com';
+const VITE_SERVER_PORT =
+  import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com";
 
 const Login = ({ mode, showAlert,isloggedin,setloggedin  }) => {
   const [credentials, setCredentials] = useState({ email: "", password: "" });
@@ -66,48 +67,102 @@ const Login = ({ mode, showAlert,isloggedin,setloggedin  }) => {
           color: mode === "dark" ? "white" : "black",
         }}
       >
-      <form
-        onSubmit={handleSubmit}
-        className="form"
-
-      <div
-        className="wrapper h-3/4 mt-10"
-
-       
-        <h1 className="title">Login</h1>
-        <span className="title-line"></span>
-        <div className="inp">
-          <Input
-            prefix={<UserOutlined />}
-            type="email"
-            placeholder="Email"
-            name="email"
-            value={credentials.email}
-            onChange={onChange}
-            autoComplete="on"
-            required
-            className="h-10 text-xl"
+
+        <form
+          onSubmit={handleSubmit}
+          className="form"
+          style={{
+            backgroundColor: mode === "dark" ? "black" : "white",
+            color: mode === "dark" ? "white" : "black",
+          }}
+        >
+          <h1 className="title">Login</h1>
+          <span className="title-line"></span>
+          <div className="inp">
+            <Input
+              prefix={<UserOutlined />}
+              type="email"
+              placeholder="Email"
+              name="email"
+              value={credentials.email}
+              onChange={onChange}
+              autoComplete="on"
+              required
+              className="h-10 text-xl"
+              style={{
+                backgroundColor: mode === "dark" ? "black" : "white",
+                color: mode === "dark" ? "white" : "black",
+              }}
+            />
+          </div>
+
+          <div className="inp">
+            <Input.Password
+              prefix={<LockOutlined />}
+              placeholder="Password"
+              name="password"
+              value={credentials.password}
+              onChange={onChange}
+              autoComplete="on"
+              className="h-10 text-xl"
+              style={{
+                backgroundColor: mode === "dark" ? "black" : "white",
+                color: mode === "dark" ? "white" : "black",
+              }}
+              required
+              iconRender={(visible) =>
+                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
+              }
+            />
+          </div>
+
+          <Button
+            className="submit h-10 text-xl"
+            type="submit"
+            disabled={loading}
+          >
+            {loading ? <Spin size="small" /> : "Login"}
+          </Button>
+
+          <p
+            className="footer text-xl"
             style={{
               backgroundColor: mode === "dark" ? "black" : "white",
               color: mode === "dark" ? "white" : "black",
             }}
-          />
-        </div>
+          >
+            Don&apos;t have an account?
+            <Link className="link text-xl" to="/signup">
+              {" "}
+              Sign Up
+            </Link>
+          </p>
+
+          <Button
+            style={{ backgroundColor: "#6366f1", color: "#FFFFFF" }}
+            onClick={() => navigate("/forgot-password")}
+            className="mt-3 h-10 text-xl"
+          >
+            Forgot Password?
+          </Button>
+        </form>
+
+        <div className="banner">
+          <h1
+            className="wel_text"
 
-        <div className="inp">
-          <Input.Password
-            prefix={<LockOutlined />}
-            placeholder="Password"
-            name="password"
-            value={credentials.password}
-            onChange={onChange}
-            autoComplete="on"
-
-            iconRender={(visible) =>
-              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
-            }
+            style={{
+              backgroundColor: mode === "dark" ? "black" : "white",
+              color: mode === "dark" ? "white" : "black",
+            }}
 
-            className="h-10 text-xl"
+          >
+            WELCOME
+            <br />
+            BACK!
+          </h1>
+          <p
+            className="para"
 
             style={{
               backgroundColor: mode === "dark" ? "black" : "white",