removed overkilling stuff

src/pages/Login.tsx

@@ -2,14 +2,7 @@ import axios from "axios";
 import { useState, useContext, useEffect, FormEvent } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { AuthContext } from "../context/auth";
-import {
+import { Box, Typography, TextField, Button, CircularProgress, Grid } from "@mui/material";
-  Box,
-  Typography,
-  TextField,
-  Button,
-  CircularProgress,
-  Grid,
-} from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
 
@@ -57,36 +50,35 @@ const Login = () => {
   };
 
   return (
-    <Grid container sx={{ height: "calc(100vh - 60px)" }}>
+    <Box
-      {/* Left Side: Login Form */}
-      <Grid
-        item
-        xs={12}
-        md={6}
       sx={{
         display: "flex",
-          alignItems: "center",
         justifyContent: "center",
-          backgroundColor: "#ffffff", // Light background color
+        alignItems: "center",
+        maxHeight: "100vh",
+        mt: 6,
+        padding: 4,
       }}
     >
+    
         <Box
           component="form"
           onSubmit={submitForm}
           sx={{
             textAlign: "center",
-            maxWidth: 400,
+            backgroundColor: "#ffffff",
-            width: "100%",
-            backgroundColor: "#f9f9f9",
             padding: 4,
             borderRadius: 4,
-            boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.1)",
+            boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
-            border: "2px solid #ff00c3",
             display: "flex",
             flexDirection: "column",
+            alignItems: "center",
+            maxWidth: 400,
+            width: "100%",
           }}
         >
-          <Typography variant="h4" gutterBottom color="#ff00c3">
+          <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
+          <Typography variant="h4" gutterBottom>
             Welcome Back!
           </Typography>
           <TextField
@@ -101,26 +93,16 @@ const Login = () => {
             sx={{
               "& .MuiOutlinedInput-root": {
                 backgroundColor: email ? "#ffe6f9" : "#ffffff",
-                "& fieldset": {
+                "& fieldset": { borderColor: "#ff33cc" },
-                  borderColor: "#ff33cc",
+                "&:hover fieldset": { borderColor: "#ff33cc" },
-                },
+                "&.Mui-focused fieldset": { borderColor: "#ff33cc" },
-                "&:hover fieldset": {
-                  borderColor: "#ff33cc",
-                },
-                "&.Mui-focused fieldset": {
-                  borderColor: "#ff33cc",
-                },
               },
               "& input:-webkit-autofill": {
                 WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset",
                 WebkitTextFillColor: "#000",
               },
-              "& .MuiInputLabel-root": {
+              "& .MuiInputLabel-root": { color: email ? "#ff33cc" : "#000000" },
-                color: email ? "#ff33cc" : "#000000",
+              "& .MuiInputLabel-root.Mui-focused": { color: "#ff33cc" },
-              },
-              "& .MuiInputLabel-root.Mui-focused": {
-                color: "#ff33cc",
-              },
             }}
           />
           <TextField
@@ -136,29 +118,18 @@ const Login = () => {
             sx={{
               "& .MuiOutlinedInput-root": {
                 backgroundColor: password ? "#ffe6f9" : "#ffffff",
-                "& fieldset": {
+                "& fieldset": { borderColor: "#ff33cc" },
-                  borderColor: "#ff33cc",
+                "&:hover fieldset": { borderColor: "#ff33cc" },
-                },
+                "&.Mui-focused fieldset": { borderColor: "#ff33cc" },
-                "&:hover fieldset": {
-                  borderColor: "#ff33cc",
-                },
-                "&.Mui-focused fieldset": {
-                  borderColor: "#ff33cc",
-                },
               },
               "& input:-webkit-autofill": {
                 WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset",
                 WebkitTextFillColor: "#000",
               },
-              "& .MuiInputLabel-root": {
+              "& .MuiInputLabel-root": { color: password ? "#ff33cc" : "#000000" },
-                color: password ? "#ff33cc" : "#000000",
+              "& .MuiInputLabel-root.Mui-focused": { color: "#ff33cc" },
-              },
-              "& .MuiInputLabel-root.Mui-focused": {
-                color: "#ff33cc",
-              },
             }}
           />
-
           <Button
             type="submit"
             fullWidth
@@ -176,7 +147,6 @@ const Login = () => {
               "Login"
             )}
           </Button>
-
           <Typography variant="body2" align="center">
             Don’t have an account?{" "}
             <Link to="/register" style={{ textDecoration: "none", color: "#ff33cc" }}>
@@ -184,41 +154,8 @@ const Login = () => {
             </Link>
           </Typography>
         </Box>
-      </Grid>
-
-      {/* Right Side: Aesthetic Info Section */}
-      <Grid
-        item
-        xs={12}
-        md={6}
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#f5f5f5", // Subtle light background
-          padding: 4,
-          textAlign: "center",
-        }}
-      >
-        <Box>
-          <Typography
-            variant="h3"
-            gutterBottom
-            sx={{
-              fontWeight: "bold",
-              color: "#ff33cc",
-              textShadow: "1px 1px 5px rgba(255, 0, 195, 0.2)",
-            }}
-          >
-            Welcome to Maxun
-          </Typography>
-          <Typography variant="h6" sx={{ color: "#555" }}>
-            Maxun is a powerful visual website scraper that makes extracting data from any website as easy as a few clicks. 
-            No more complex code or time-consuming processes—Maxun does the heavy lifting for you. Start your data extraction journey with us!
-          </Typography>
         </Box>
-      </Grid>
+     
-    </Grid>
   );
 };
 

src/pages/Register.tsx

@@ -1,15 +1,8 @@
 import axios from "axios";
-import { useState, useContext, useEffect, FormEvent } from "react";
+import { useState, useContext, useEffect } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { AuthContext } from "../context/auth";
-import {
+import { Box, Typography, TextField, Button, CircularProgress } from "@mui/material";
-  Box,
-  Typography,
-  TextField,
-  Button,
-  CircularProgress,
-  Grid,
-} from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
 
@@ -17,11 +10,10 @@ const Register = () => {
   const [form, setForm] = useState({
     email: "",
     password: "",
-    confirmPassword: "",
   });
   const [loading, setLoading] = useState(false);
   const { notify } = useGlobalInfoStore();
-  const { email, password, confirmPassword } = form;
+  const { email, password } = form;
 
   const { state, dispatch } = useContext(AuthContext);
   const { user } = state;
@@ -41,10 +33,6 @@ const Register = () => {
 
   const submitForm = async (e: any) => {
     e.preventDefault();
-    if (password !== confirmPassword) {
-      notify("error", "Passwords do not match.");
-      return;
-    }
     setLoading(true);
     try {
       const { data } = await axios.post(`${apiUrl}/auth/register`, {
@@ -52,7 +40,7 @@ const Register = () => {
         password,
       });
       dispatch({ type: "LOGIN", payload: data });
-      notify("success", "Welcome to Maxun!");
+      notify("success", "Registration Successful!");
       window.localStorage.setItem("user", JSON.stringify(data));
       navigate("/");
     } catch (err) {
@@ -62,17 +50,14 @@ const Register = () => {
   };
 
   return (
-    <Grid container sx={{ height: "calc(100vh - 60px)" }}>
+    <Box
-      {/* Left Side: Register Form */}
-      <Grid
-        item
-        xs={12}
-        md={6}
       sx={{
         display: "flex",
-          alignItems: "center",
         justifyContent: "center",
-          backgroundColor: "#ffffff", // Light background color
+        alignItems: "center",
+        maxHeight: "100vh",
+        mt: 6,
+        padding: 4,
       }}
     >
       <Box
@@ -82,16 +67,17 @@ const Register = () => {
           textAlign: "center",
           maxWidth: 400,
           width: "100%",
-            backgroundColor: "#f9f9f9",
+          backgroundColor: "#ffffff",
           padding: 4,
           borderRadius: 4,
           boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.1)",
-            border: "2px solid #ff00c3",
           display: "flex",
           flexDirection: "column",
+          alignItems: "center",
         }}
       >
-          <Typography variant="h4" gutterBottom color="#ff00c3">
+        <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
+        <Typography variant="h4" gutterBottom>
           Create an Account
         </Typography>
         <TextField
@@ -106,26 +92,16 @@ const Register = () => {
           sx={{
             "& .MuiOutlinedInput-root": {
               backgroundColor: email ? "#ffe6f9" : "#ffffff",
-                "& fieldset": {
+              "& fieldset": { borderColor: "#ff33cc" },
-                  borderColor: "#ff33cc",
+              "&:hover fieldset": { borderColor: "#ff33cc" },
-                },
+              "&.Mui-focused fieldset": { borderColor: "#ff33cc" },
-                "&:hover fieldset": {
-                  borderColor: "#ff33cc",
-                },
-                "&.Mui-focused fieldset": {
-                  borderColor: "#ff33cc",
-                },
             },
             "& input:-webkit-autofill": {
               WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset",
               WebkitTextFillColor: "#000",
             },
-              "& .MuiInputLabel-root": {
+            "& .MuiInputLabel-root": { color: email ? "#ff33cc" : "#000000" },
-                color: email ? "#ff33cc" : "#000000",
+            "& .MuiInputLabel-root.Mui-focused": { color: "#ff33cc" },
-              },
-              "& .MuiInputLabel-root.Mui-focused": {
-                color: "#ff33cc",
-              },
           }}
         />
         <TextField
@@ -141,71 +117,25 @@ const Register = () => {
           sx={{
             "& .MuiOutlinedInput-root": {
               backgroundColor: password ? "#ffe6f9" : "#ffffff",
-                "& fieldset": {
+              "& fieldset": { borderColor: "#ff33cc" },
-                  borderColor: "#ff33cc",
+              "&:hover fieldset": { borderColor: "#ff33cc" },
-                },
+              "&.Mui-focused fieldset": { borderColor: "#ff33cc" },
-                "&:hover fieldset": {
-                  borderColor: "#ff33cc",
-                },
-                "&.Mui-focused fieldset": {
-                  borderColor: "#ff33cc",
-                },
             },
             "& input:-webkit-autofill": {
               WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset",
               WebkitTextFillColor: "#000",
             },
-              "& .MuiInputLabel-root": {
+            "& .MuiInputLabel-root": { color: password ? "#ff33cc" : "#000000" },
-                color: password ? "#ff33cc" : "#000000",
+            "& .MuiInputLabel-root.Mui-focused": { color: "#ff33cc" },
-              },
-              "& .MuiInputLabel-root.Mui-focused": {
-                color: "#ff33cc",
-              },
           }}
         />
-          <TextField
-            fullWidth
-            label="Confirm Password"
-            name="confirmPassword"
-            type="password"
-            value={confirmPassword}
-            onChange={handleChange}
-            margin="normal"
-            variant="outlined"
-            required
-            sx={{
-              "& .MuiOutlinedInput-root": {
-                backgroundColor: confirmPassword ? "#ffe6f9" : "#ffffff",
-                "& fieldset": {
-                  borderColor: "#ff33cc",
-                },
-                "&:hover fieldset": {
-                  borderColor: "#ff33cc",
-                },
-                "&.Mui-focused fieldset": {
-                  borderColor: "#ff33cc",
-                },
-              },
-              "& input:-webkit-autofill": {
-                WebkitBoxShadow: "0 0 0 1000px #ffe6f9 inset",
-                WebkitTextFillColor: "#000",
-              },
-              "& .MuiInputLabel-root": {
-                color: confirmPassword ? "#ff33cc" : "#000000",
-              },
-              "& .MuiInputLabel-root.Mui-focused": {
-                color: "#ff33cc",
-              },
-            }}
-          />
-
         <Button
           type="submit"
           fullWidth
           variant="contained"
           color="primary"
           sx={{ mt: 2, mb: 2 }}
-            disabled={loading || !email || !password || !confirmPassword}
+          disabled={loading || !email || !password}
         >
           {loading ? (
             <>
@@ -216,7 +146,6 @@ const Register = () => {
             "Register"
           )}
         </Button>
-
         <Typography variant="body2" align="center">
           Already have an account?{" "}
           <Link to="/login" style={{ textDecoration: "none", color: "#ff33cc" }}>
@@ -224,41 +153,7 @@ const Register = () => {
           </Link>
         </Typography>
       </Box>
-      </Grid>
-
-      {/* Right Side: Aesthetic Info Section */}
-      <Grid
-        item
-        xs={12}
-        md={6}
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#f5f5f5", // Subtle light background
-          padding: 4,
-          textAlign: "center",
-        }}
-      >
-        <Box>
-          <Typography
-            variant="h3"
-            gutterBottom
-            sx={{
-              fontWeight: "bold",
-              color: "#ff33cc",
-              textShadow: "1px 1px 5px rgba(255, 0, 195, 0.2)",
-            }}
-          >
-            Welcome to Maxun
-          </Typography>
-          <Typography variant="h6" sx={{ color: "#555" }}>
-            Maxun is a powerful visual website scraper that makes extracting data from any website as easy as a few clicks. 
-            No more complex code or time-consuming processes—Maxun does the heavy lifting for you. Start your data extraction journey with us!
-          </Typography>
     </Box>
-      </Grid>
-    </Grid>
   );
 };