design update login design fixed

src/app/(auth)/log-in/loginPage.module.scss

@@ -4,8 +4,8 @@
   background: var(--bg_white);
   .images {
     width: 100%;
-    max-width: 500px;
-    object-fit: contain;
+    object-fit: cover;
     margin-inline: auto;
+    opacity: 0.6;
   }
 }

src/app/(auth)/log-in/page.tsx

@@ -19,6 +19,7 @@ import { useRouter } from "next/navigation";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/services/store";
 import { setAuthTokens, setUserDetails } from "@/services/store/authSlice";
+import { grey } from "@mui/material/colors";
 
 const loginSchema = z.object({
   username: z.string(),
@@ -29,15 +30,20 @@ type LoginFormValues = z.infer<typeof loginSchema>;
 
 export default function LoginPage() {
   const [loader, setLoader] = useState(false);
-  const router = useRouter()
-  const { register, handleSubmit, formState: { errors }, control } = useForm<LoginFormValues>({
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    control,
+  } = useForm<LoginFormValues>({
     resolver: zodResolver(loginSchema),
   });
   const [error, setError] = useState("");
   const dispatch = useDispatch();
   const onSubmit = async (data: LoginFormValues) => {
     try {
-      setLoader(true)
+      setLoader(true);
       const response = await loginApi(data);
       localStorage.setItem("token", response.token);
       localStorage.setItem("refreshToken", response.refreshToken);
@@ -48,11 +54,11 @@ export default function LoginPage() {
         })
       );
       dispatch(setUserDetails(response));
-      setLoader(false)
-      router.push('/home');
+      setLoader(false);
+      router.push("/home");
     } catch (err) {
-      setLoader(false)
-      setError('Invalid credentials');
+      setLoader(false);
+      setError("Invalid credentials");
     }
   };
 
@@ -62,7 +68,11 @@ export default function LoginPage() {
         <Grid item display={{ xs: "none", md: "block" }} md={7}>
           <Box
             height={"100%"}
-            sx={{ background: "var(--primary)" }}
+            sx={{
+              background: grey[900],
+              overflow: "hidden",
+              height: "100vh",
+            }}
             display={"flex"}
             alignItems={"center"}
             justifyContent={"space-between"}
@@ -87,7 +97,7 @@ export default function LoginPage() {
             paddingBlock={5}
           >
             <img src={UTILITY_CONSTANT.IMAGES.AUTH.HEADER_LOG} alt="logo" />
-            <form onSubmit={handleSubmit(onSubmit)}>
+            <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
               <Typography variant="h4">Welcome to Convexsol</Typography>
               <Typography variant="h4">Sign in to your account</Typography>
               <Box
@@ -115,7 +125,10 @@ export default function LoginPage() {
                 />
               </Box>
               <Box width={"100%"} marginBlockStart={"20px"}>
-                <CustomizedButtons btnType="submit" label={!loader ? "Login" : "Login..."} />
+                <CustomizedButtons
+                  btnType="submit"
+                  label={!loader ? "Login" : "Login..."}
+                />
               </Box>
             </form>
             <Box