components/Authentication/SignInForm.js

@@ -7,7 +7,7 @@ import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
-import styles from "@/components/Authentication/Authentication.module.css";
+import styles from "./signinform.module.css";
 import WrenchBoardLogo from "@/public/images/logos/wrenchboard-logo.png";
 
 const SignInForm = () => {
@@ -22,7 +22,7 @@ const SignInForm = () => {
 
   return (
     <>
-      <div className="authenticationBox">
+      <div className={styles.authenticationBox}>
         <Box
           component="main"
           sx={{
@@ -41,12 +41,12 @@ const SignInForm = () => {
                 mb="60px"
               >
                 <img
-                  src="/images/logos/wrenchboard-logo.png"
+                  src="/images/logos/android-chrome-512x512.png"
                   alt="logo"
                   className={styles.favicon}
                 />
               </Box>
-              <Typography as="h1" fontSize="28px" fontWeight="700" mb="5px">
+              <Typography as="h1" fontSize="28px" fontWeight="700" mb="5px" color="#fff">
                 Sign In{" "}
               </Typography>
 
@@ -116,25 +116,6 @@ const SignInForm = () => {
                   </Grid>
                 </Box>
 
-                <Grid container alignItems="center" spacing={2}>
-                  <Grid item xs={6} sm={6}>
-                    <FormControlLabel
-                      control={
-                        <Checkbox value="allowExtraEmails" color="primary" />
-                      }
-                      label="Remember me."
-                    />
-                  </Grid>
-
-                  <Grid item xs={6} sm={6} textAlign="end">
-                    <Link
-                      href="/auth/forgot-password"
-                      className="primaryColor text-decoration-none"
-                    >
-                      Forgot your password?
-                    </Link>
-                  </Grid>
-                </Grid>
 
                 <Button
                   type="submit"

components/Authentication/signinform.module.css

@@ -0,0 +1,20 @@
+.favicon {
+  position: relative;
+  top: 5px;
+  max-width: 250px;
+  max-height: 250px;
+  width: 100%;
+  height: 100%;
+}
+
+.authenticationBox {
+  width: 100%;
+  min-height: 100vh;
+
+  /* Image */
+  background-image: url("../../public//images/auth/cms_home.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-attachment: fixed;
+}

components/_App/Layout.js

@@ -44,7 +44,9 @@ const Layout = ({ children }) => {
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
 
-      <div className={`main-wrapper-content ${active ? "active" : ""}`}>
+      <div className={`main-wrapper-content ${active ? "active" : ""}`}  style={{
+            paddingLeft: isAuthenticationPage && "0",
+          }}>
         {!isAuthenticationPage && (
           <>
             <TopNavbar toggleActive={toggleActive} />
@@ -52,7 +54,14 @@ const Layout = ({ children }) => {
           </>
         )}
 
-        <div className="main-content">{children}</div>
+        <div
+          className="main-content"
+          style={{
+            paddingRight: isAuthenticationPage && "0",
+          }}
+        >
+          {children}
+        </div>
 
         {!isAuthenticationPage && <Footer />}
       </div>

middlewares/AuthRoute.js

@@ -14,7 +14,7 @@ const AuthRoute = ({ children }) => {
     const isAuthenticated = true; // In a real application, this would be determined based on the user's authentication status.
 
     if (!isAuthenticated) {
-      router.push("/auth/");
+      router.push("/auth/sign-in");
     } 
   }, [router]);