made changes to the auth layout

components/Authentication/SignInForm.js

@@ -1,12 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import Grid from "@mui/material/Grid";
+import IconButton from "@mui/material/IconButton";
 import { Typography } from "@mui/material";
 import { Box } from "@mui/system";
 import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
 import Button from "@mui/material/Button";
-import FormControlLabel from "@mui/material/FormControlLabel";
+import Visibility from "@mui/icons-material/Visibility";
-import Checkbox from "@mui/material/Checkbox";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import styles from "./signinform.module.css";
 import WrenchBoardLogo from "@/public/images/logos/wrenchboard-logo.png";
 
@@ -20,6 +22,12 @@ const SignInForm = () => {
     });
   };
 
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleTogglePassword = () => {
+    setShowPassword(!showPassword);
+  };
+
   return (
     <>
       <div className={styles.authenticationBox}>
@@ -30,6 +38,9 @@ const SignInForm = () => {
             ml: "auto",
             mr: "auto",
             padding: "50px 0 100px",
+            paddingInline: { sm: "10px", lg: "0" },
+            zIndex: "999",
+            position: "relative",
           }}
         >
           <Grid item xs={12} md={12} lg={12} xl={12}>
@@ -38,7 +49,7 @@ const SignInForm = () => {
                 display="flex"
                 alignItems="center"
                 justifyContent="center"
-                mb="60px"
+                mb="70px"
               >
                 <img
                   src="/images/logos/android-chrome-512x512.png"
@@ -46,9 +57,15 @@ const SignInForm = () => {
                   className={styles.favicon}
                 />
               </Box>
-              <Typography as="h1" fontSize="28px" fontWeight="700" mb="5px" color="#fff">
+              {/* <Typography
+                as="h1"
+                fontSize="28px"
+                fontWeight="700"
+                mb="5px"
+                color="#fff"
+              >
                 Sign In{" "}
-              </Typography>
+              </Typography> */}
 
               <Box component="form" noValidate onSubmit={handleSubmit}>
                 <Box
@@ -62,7 +79,7 @@ const SignInForm = () => {
                 >
                   <Grid container alignItems="center" spacing={2}>
                     <Grid item xs={12}>
-                      <Typography
+                      {/* <Typography
                         component="label"
                         sx={{
                           fontWeight: "500",
@@ -72,7 +89,7 @@ const SignInForm = () => {
                         }}
                       >
                         Email
-                      </Typography>
+                      </Typography> */}
 
                       <TextField
                         required
@@ -84,11 +101,12 @@ const SignInForm = () => {
                         InputProps={{
                           style: { borderRadius: 8 },
                         }}
+                        sx={textFieldStyles}
                       />
                     </Grid>
 
                     <Grid item xs={12}>
-                      <Typography
+                      {/* <Typography
                         component="label"
                         sx={{
                           fontWeight: "500",
@@ -98,37 +116,60 @@ const SignInForm = () => {
                         }}
                       >
                         Password
-                      </Typography>
+                      </Typography> */}
 
                       <TextField
                         required
                         fullWidth
                         name="password"
                         label="Password"
-                        type="password"
+                        type={showPassword ? "text" : "password"}
                         id="password"
                         autoComplete="new-password"
                         InputProps={{
                           style: { borderRadius: 8 },
+                          endAdornment: (
+                            <InputAdornment position="end">
+                              <IconButton
+                                onClick={handleTogglePassword}
+                                sx={{
+                                  color: "#4687BA",
+                                  "&:hover": {
+                                    color: "#4687BA",
+                                  },
+                                }}
+                              >
+                                {showPassword ? (
+                                  <VisibilityOff />
+                                ) : (
+                                  <Visibility />
+                                )}
+                              </IconButton>
+                            </InputAdornment>
+                          ),
                         }}
+                        sx={textFieldStyles}
                       />
                     </Grid>
                   </Grid>
                 </Box>
 
-
                 <Button
                   type="submit"
                   fullWidth
                   variant="contained"
                   sx={{
                     mt: 2,
+                    backgroundColor: "#4687BA",
                     textTransform: "capitalize",
                     borderRadius: "8px",
                     fontWeight: "500",
                     fontSize: "16px",
                     padding: "12px 10px",
                     color: "#fff !important",
+                    "&:hover": {
+                      backgroundColor: "rgba(70, 135, 186, 0.8)"
+                    },
                   }}
                 >
                   Sign In
@@ -143,3 +184,39 @@ const SignInForm = () => {
 };
 
 export default SignInForm;
+
+// Custom styles for text fields in sign up
+const textFieldStyles = {
+  "& .MuiOutlinedInput-root": {
+    "& fieldset": {
+      borderColor: "#4687BA",
+      "&:hover": {
+        borderColor: "#4687BA",
+      },
+    },
+    "&.Mui-focused fieldset": {
+      borderColor: "#4687BA",
+    },
+  },
+  "& .MuiInputAdornment-positionEnd": {
+    cursor: "pointer",
+  },
+  "& .MuiFormLabel-root": {
+    color: "#4687BA",
+  },
+  "&:hover .MuiFormLabel-root": {
+    color: "#4687BA",
+  },
+  "&.Mui-focused .MuiFormLabel-root": {
+    color: "#4687BA",
+  },
+  "& .MuiInputBase-input": {
+    color: "#4687BA",
+  },
+  "&:hover .MuiInputBase-input": {
+    color: "#4687BA",
+  },
+  "&.Mui-focused .MuiInputBase-input": {
+    color: "#4687BA",
+  },
+};

components/Authentication/SignUpForm.js

@@ -215,7 +215,7 @@ const SignUpForm = () => {
                 <Button
                   type="submit"
                   fullWidth
-                  variant="contained"
+                  // variant="contained"
                   sx={{
                     mt: 2,
                     textTransform: "capitalize",

components/Authentication/signinform.module.css

@@ -10,6 +10,8 @@
 .authenticationBox {
   width: 100%;
   min-height: 100vh;
+  position: relative;
+  padding: 1rem;
 
   /* Image */
   background-image: url("../../public//images/auth/cms_home.jpg");
@@ -18,3 +20,19 @@
   background-position: center center;
   background-attachment: fixed;
 }
+
+.authenticationBox::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+@media (min-width: 600px) {
+  .authenticationBox {
+    padding: 1rem;
+  }
+}

components/_App/Layout.js

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

styles/globals.css

@@ -13,6 +13,7 @@
   --fontSize: 15px;
   --transition: all ease .5s;
   --box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.05);
+  --mobile-auth-padding: 0;
 }
 
 html, body {
@@ -817,12 +818,17 @@ img {
   padding-right: 30px;
 }
 
+.main-wrapper-content .main-content.authBox{
+  padding: 0px !important;
+}
+
 @media only screen and (max-width: 767px) {
   .main-wrapper-content .main-content {
     padding-left: 15px !important;
     padding-right: 15px !important;
   }
 }
+
 @media only screen and (max-width: 1199px) {
   .main-wrapper-content {
     padding: 0;