package-lock.json

@@ -15041,6 +15041,7 @@
 		},
 		"node_modules/typescript": {
 			"version": "5.7.3",
+			"dev": true,
 			"license": "Apache-2.0",
 			"bin": {
 				"tsc": "bin/tsc",

src/App.css

@@ -1,3 +1,12 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; /* Prevents scrolling */
+}
+
+
 .App {
   text-align: center;
 }

src/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter as Router } from "react-router-dom";
 import AppRouter from "./router";
 
+
 function App() {
 	return (
 		<Router>

src/components/Loading/index.tsx

@@ -1,14 +1,24 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { CircularProgress, Box, Typography } from '@mui/material';
-
-// import styled from './Loading.style';
 
 function LoadingComponent() {
-  // const { isdarktheme } = useSelector((state) => ({
+  return (
-  //   isdarktheme: state?.authReducer?.isDarkTheme,
+    <Box
-  // }));
+      sx={{
-
+        display: 'flex',
-  return (<h1>Loading</h1>);
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        width: '100%',
+        flexDirection: 'column',
+      }}
+    >
+      <CircularProgress size={50} color="primary" />
+      <Typography variant="h6" sx={{ marginTop: 2 }}>
+        Loading...
+      </Typography>
+    </Box>
+  );
 }
 
 export default LoadingComponent;

src/pages/Auth/Login/index.tsx

@@ -11,6 +11,7 @@ import {
 	Grid,
 	IconButton,
 	Link,
+	InputAdornment 
 } from "@mui/material";
 import { useForm, Controller, SubmitHandler } from "react-hook-form";
 import { useDispatch } from "react-redux";
@@ -29,7 +30,9 @@ interface ILoginForm {
 
 export default function Login(props: { disableCustomTheme?: boolean }) {
 	const [open, setOpen] = React.useState(false);
+  const [isClicked, setIsClicked] = React.useState(false);
 	const [showPassword, setShowPassword] = React.useState(false);
+  
 	const {
 		control,
 		handleSubmit,
@@ -69,7 +72,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 						md={7}
 						sx={{
 							background: `url('/mainPageLogo.png') center/cover no-repeat`,
-							height: { xs: "0%", sm: "0%", md: "100%" },
+							// height: { xs: "0%", sm: "50%", md: "100%" },
 							backgroundSize: "cover",
 							display: { xs: "none", md: "block" }, // Hide the image on xs and sm screens
 						}}
@@ -87,9 +90,11 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
     alignItems: "center",
     flexDirection: "column",
     padding: { xs: "2rem", md: "3rem", lg: "3rem" },
-							height: "100%",
+   
+    height: "auto", // ✅ Allows the height to adjust dynamically
   }}
 >
+
 						<Typography
 							variant="h3"
 							sx={{
@@ -105,13 +110,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 							Welcome Back!
 						</Typography>
 
-						<Card
+						<Card variant="outlined" sx={{ width: { xs: "100%", sm: "300px",lg:"408px" }, padding: "24px", borderRadius: "12px", backgroundColor: "#1E1E1E", border: "1px solid #4B5255" }}>
-							variant="outlined"
+
-							sx={{
-								maxWidth: "400px",
-								width: { xs: "80%", sm: "80%", md: "100%" },
-							}}
-						>
 							<Box
 								component="form"
 								onSubmit={handleSubmit(onSubmit)}
@@ -122,38 +122,24 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									gap: 2,
 								}}
 							>
-								<Typography
+									<Typography component="h1" variant="h4" sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "24px" }}>Login</Typography>
-									component="h1"
-									variant="h4"
-									sx={{
-										textAlign: "center",
-										color: "white",
-										fontSize: { xs: "1.5rem", sm: "2rem" },
-									}}
-								>
-									Login
-								</Typography>
 									<Typography
 					component="h6"
 					variant="subtitle2"
-									sx={{
+					sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "16px" }}
-										textAlign: "center",
-										color: "white",
-										fontSize: { xs: "0.9rem", sm: "1rem" },
-									}}
 				>
 					Log in with your email and password
 				</Typography>
 
+
+{/* -------------------------------- Email Field ----------------- */}
 <FormControl sx={{ width: "100%" }}>
   <FormLabel
     htmlFor="email"
     sx={{
-											fontSize: {
+      fontSize: { xs: "0.9rem", sm: "1rem" },
-												xs: "0.9rem",
-												sm: "1rem",
-											},
       color: "white",
+      fontFamily: "Gilroy, sans-serif", // ✅ Apply Gilroy font
     }}
   >
     Email
@@ -166,17 +152,14 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
       required: "Email is required",
       pattern: {
         value: /\S+@\S+\.\S+/,
-												message:
+        message: "Please enter a valid email address.",
-													"Please enter a valid email address.",
       },
     }}
     render={({ field }) => (
       <TextField
         {...field}
         error={!!errors.email}
-												helperText={
+        helperText={errors.email?.message}
-													errors.email?.message
-												}
         id="email"
         type="email"
         placeholder="Email"
@@ -185,17 +168,32 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
         required
         fullWidth
         variant="outlined"
-												color={
+        color={errors.email ? "error" : "primary"}
-													errors.email
+        InputProps={{
-														? "error"
+          sx: {
-														: "primary"
+            height: "50px", 
-												}
+            alignItems: "center", 
-												sx={{
+            backgroundColor: "#1E1F1F", 
-													input: {
+            fontFamily: "Gilroy, sans-serif", 
-														fontSize: {
-															xs: "0.9rem",
-															sm: "1rem",
           },
+        }}
+        sx={{
+          "& .MuiOutlinedInput-root": {
+            backgroundColor: "#1E1F1F",
+            borderRadius: "4px",
+            "& fieldset": { borderColor: "#4b5255" },
+            "&:hover fieldset": { borderColor: "#4b5255" },
+            "&.Mui-focused fieldset": { borderColor: "#4b5255" },
+          },
+          "& input": {
+            color: "white",
+            fontSize: { xs: "0.9rem", sm: "1rem" },
+            fontFamily: "Gilroy, sans-serif", 
+          },
+          "& .MuiInputBase-input::placeholder": {
+            color: "white",
+            opacity: 1,
+            fontFamily: "Gilroy, sans-serif", 
           },
         }}
       />
@@ -203,15 +201,15 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
   />
 </FormControl>
 
+
+{/* -------------------------------- Password Field ----------------- */}
 <FormControl sx={{ width: "100%" }}>
   <FormLabel
     htmlFor="password"
     sx={{
-											fontSize: {
+      fontSize: { xs: "0.9rem", sm: "1rem" },
-												xs: "0.9rem",
-												sm: "1rem",
-											},
       color: "white",
+      fontFamily: "Gilroy, sans-serif", 
     }}
   >
     Password
@@ -224,81 +222,79 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
       required: "Password is required",
       minLength: {
         value: 6,
-												message:
+        message: "Password must be at least 6 characters long.",
-													"Password must be at least 6 characters long.",
       },
       pattern: {
-												value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
+        value:
+          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
         message:
           "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
       },
     }}
     render={({ field }) => (
-											<Box sx={{ position: "relative" }}>
       <TextField
         {...field}
         error={!!errors.password}
-													helperText={
+        helperText={errors.password?.message}
-														errors.password?.message
-													}
         name="password"
         placeholder="Password"
-													type={
+        type={showPassword ? "text" : "password"}
-														showPassword
-															? "text"
-															: "password"
-													}
         id="password"
         autoComplete="current-password"
-													autoFocus
         required
         fullWidth
         variant="outlined"
-													color={
+        color={errors.password ? "error" : "primary"}
-														errors.password
+        InputProps={{
-															? "error"
+          sx: {
-															: "primary"
+            height: "50px",
-													}
+            fontFamily: "Gilroy, sans-serif", // Apply Gilroy font
-													sx={{
+          },
-														paddingRight: "40px",
+          
-														height: "40px",
+          endAdornment: (
-														marginBottom: "8px",
-													}}
-												/>
             <IconButton
+              onClick={() => setShowPassword((prev) => !prev)}
+              edge="end"
               sx={{
-														position: "absolute",
+                color: "white",
-														top: "50%",
+                padding: 0,
-														right: "10px",
+                margin: 0,
-														transform:
+                backgroundColor: "transparent",
-															"translateY(-50%)",
+                border: "none",
-														background: "none",
+                boxShadow: "none",
-														borderColor:
+                "&:hover": { backgroundColor: "transparent" },
-															"transparent",
+                "&:focus": { outline: "none", border: "none" },
-														"&:hover": {
+              }}
-															backgroundColor:
+            >
-																"transparent",
+              {showPassword ? <VisibilityOff /> : <Visibility />}
-															borderColor:
+            </IconButton>
-																"transparent",
+          ),
+        }}
+        sx={{
+          "& .MuiOutlinedInput-root": {
+            backgroundColor: "#1E1F1F",
+            borderRadius: "4px",
+            "& fieldset": { borderColor: "#4b5255" },
+            "&:hover fieldset": { borderColor: "#4b5255" },
+            "&.Mui-focused fieldset": { borderColor: "#4b5255" },
+          },
+          "& input": {
+            color: "white",
+            fontSize: { xs: "0.9rem", sm: "1rem" },
+            fontFamily: "Gilroy, sans-serif", 
+          },
+          "& .MuiInputBase-input::placeholder": {
+            color: "white",
+            opacity: 1,
+            fontFamily: "Gilroy, sans-serif", 
           },
         }}
-													onClick={() =>
+      />
-														setShowPassword(
-															(prev) => !prev
-														)
-													}
-												>
-													{showPassword ? (
-														<VisibilityOff />
-													) : (
-														<Visibility />
-													)}
-												</IconButton>
-											</Box>
     )}
   />
 </FormControl>
 
+
 								<Box
 									sx={{
 										display: "flex",
@@ -312,11 +308,30 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
   control={
     <Checkbox
     value="remember"
-												color="primary"
+    sx={{
+      width: 20,
+      height: 20,
+      fontFamily: "Gilroy, sans-serif",
+      border: "2px solid #4b5255",
+      borderRadius: "4px",
+      backgroundColor: "transparent",
+      "&:hover": {
+        backgroundColor: "transparent",
+      },
+      "&.Mui-checked": {
+        backgroundColor: "transparent",
+        borderColor: "#4b5255",
+        "&:hover": {
+          backgroundColor: "transparent",
+        },
+      },
+    }}
   />
+  
   }
   label="Remember me"
 />
+
 <Link
   component="button"
   type="button"
@@ -324,11 +339,15 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
   variant="body2"
   sx={{
     alignSelf: "center",
+    fontFamily: "Gilroy, sans-serif",
     color: "#01579b",
+    textDecoration: "none", // ✅ Removes underline
+   
   }}
 >
   Forgot password?
 </Link>
+
 								</Box>
 								<ForgotPassword
 									open={open}
@@ -340,6 +359,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									disabled={!isValid}
 									sx={{
 										color: "white",
+                    fontFamily: "Gilroy, sans-serif",
 										backgroundColor: "#52ACDF",
 										"&:hover": {
 											backgroundColor: "#52ACDF",