auth layout page changed

src/components/AuthPages/AuthLayout2.jsx

@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
 import { Link } from "react-router-dom";
 import { localImgLoad } from "../../lib";
+import WrenchBoard from "../../assets/images/wrenchboard-logo-text.png";
 
 import DarkModeContext from "../Contexts/DarkModeContext";
 
@@ -18,15 +19,23 @@ export default function LoginLayout({ slogan, children }) {
         backgroundImage: `url(${countryMode == "NG" ? bgImgNig : bgImgCom})`,
       }}
     >
-      
-      <div className={`w-full grid grid-cols-1 xl:grid-cols-2`}>
+      <div className="my-5">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+      <div className={`h-full w-full grid grid-cols-1 place-content-center`}>
         {/* <div 
             className={`auth-bg hidden xl:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
             style={{backgroundImage: `url(${bgImg})`}}
         >
         </div> */}
-        <div className="p-5 sm:p-7 flex place-content-center xl:col-start-2">
-          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
+        <div className="p-5 sm:p-7 flex place-content-center">
+          <div className="pt-8 pb-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
             <div className="w-full flex justify-center items-center">
               {children && children}
             </div>

src/components/AuthPages/ForgotPassword/index2.jsx

@@ -89,15 +89,6 @@ export default function ForgotPassword() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <div className="flex place-content-center">
             <div className="w-10/12">
             {msgSuccess == null ?

src/components/AuthPages/Login/LoginLanding.jsx

@@ -11,6 +11,9 @@ import AuthLayout from "../AuthLayout2";
 import { useDispatch } from "react-redux";
 // import { updateUserDetails } from "../../../store/UserDetails";
 
+import GoogleDownload from '../../../assets/images/download/andriod.jpg'
+import IOSDownload from '../../../assets/images/download/apple.jpg'
+
 
 export default function LoginLanding() {
   const queryParams = new URLSearchParams(location?.search);
@@ -27,7 +30,7 @@ export default function LoginLanding() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-5">
+          {/* <div className="mb-5">
             <Link to="#">
               <img
                 src={WrenchBoard}
@@ -35,17 +38,41 @@ export default function LoginLanding() {
                 className="h-10 mx-auto"
               />
             </Link>
-          </div>
+          </div> */}
           {/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5"> */}
           <div className="flex place-content-center">
             <div className="w-10/12">
-                <div className="title-area flex flex-col gap-5 justify-center items-center relative text-center mb-5">
+              <div className='grid grid-cols-1 sm:grid-cols-3 gap-3'>
+                {/* APP DOWNLOAD STORE */}
+                <div className="col-span-1 order-2 sm:col-span-1 sm:order-1 w-full">
+                  <div className="sm:border-r-2 border-slate-400 w-full h-full flex sm:flex-col justify-center gap-4">
+                    <div className="w-28 lg:w-32">
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={process.env.REACT_APP_APPLE_APP}
+                      >
+                        <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
+                      </a>
+                    </div>
+                    <div className="w-28 lg:w-32">
+                      <a
+                        target="_blank"
+                        rel="noreferrer"
+                        href={process.env.REACT_APP_ANDROID_APP}
+                      >
+                        <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-span-1 order-1 sm:col-span-2 sm:order-2 title-area flex flex-col gap-5 justify-center items-center relative text-center mb-5">
                   <h1 className="text-[#181c32] font-medium dark:text-white leading-6 text-2xl tracking-wide">
                     <span className='font-semibold'>Log in</span> as a:
                   </h1>
 
                   <div className='w-full flex flex-col gap-4'>
-                    <button name='full' onClick={()=>navigate('/login/parent', {state:{loginType:'full'}})} className='w-2/3 mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#e0f7eb] text-emerald-800 cursor-pointer'>
+                    <button name='full' onClick={()=>navigate('/login/parent', {state:{loginType:'full'}})} className='w-full mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#e0f7eb] text-emerald-800 cursor-pointer'>
                       <div className='flex items-center gap-4'>
                         <img className='w-12 h-auto' src={ParentIcon} alt='login key' />
                         <p className='text-lg font-semibold'>Adult or Parent</p>
@@ -54,7 +81,7 @@ export default function LoginLanding() {
                       <i className="fa-solid fa-caret-right"></i>
                     </button>
 
-                    <button name='family' onClick={()=>navigate('/login/kid', {state:{loginType:'family'}})} className='w-2/3 mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#f0eef1] text-[#a94ef3] cursor-pointer'>
+                    <button name='family' onClick={()=>navigate('/login/kid', {state:{loginType:'family'}})} className='w-full mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#f0eef1] text-[#a94ef3] cursor-pointer'>
                       <div className='flex items-center gap-4'>
                         <img className='w-12 h-auto' src={KidIcon} alt='login key' />
                         <p className='text-lg font-semibold'>Kids or Teens</p>
@@ -64,7 +91,7 @@ export default function LoginLanding() {
                     </button>
                   </div>
 
-                  <div className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  <div className="text-gray-400 font-medium text-xl leading-[24.375px]">
                     Don't have an account?{" "}
                     <Link
                       to="/signup"
@@ -74,6 +101,7 @@ export default function LoginLanding() {
                     </Link>
                   </div>
                 </div>
+              </div>
             </div>
           </div>
         </div>

src/components/AuthPages/Login/index2.jsx

@@ -259,7 +259,7 @@ export default function Login() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-5">
+          {/* <div className="mb-5">
             <Link to="#">
               <img
                 src={WrenchBoard}
@@ -267,13 +267,13 @@ export default function Login() {
                 className="h-10 mx-auto"
               />
             </Link>
-          </div>
+          </div> */}
           {/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5"> */}
           <div className="flex place-content-center">
             <div className="w-10/12">
               {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
               {sessionExpired != "true" && (
-                <div className="hidden title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <div className="hidden title-area --flex-- flex-col justify-center items-center relative text-center mb-7">
                   {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
                 </h1> */}
@@ -390,7 +390,7 @@ export default function Login() {
                         {msgError}
                       </div>
                     )}
-                    <div className="signin-area mb-3.5">
+                    <div className="signin-area">
                       <div className="flex justify-center">
                         <button
                           name="full"
@@ -524,10 +524,13 @@ export default function Login() {
                 )
                 // END of family login compoenent
               }
+              <div className='w-full text-center'>
+                <Link className='text-center block font-semibold text-lg pt-3 tracking-wide' to='/login'>Return</Link>
+              </div>
               {/* END of login component */}
 
               {/* APP DOWNLOAD STORE */}
-              <div className="w-full mt-4">
+              <div className="hidden w-full mt-4">
                 <div className="w-full flex justify-center items-center gap-4">
                   <div className="w-32 lg:w-48">
                     <a
@@ -568,7 +571,7 @@ export default function Login() {
 
               {loginType == "full" && (
                 <>
-                  <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                  <div className="hidden pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
                     This site is protected by a Captcha. <br />Our Privacy Policy and
                     Terms of Service apply.
                   </div>

src/components/AuthPages/Promo/Promo.jsx

@@ -107,15 +107,6 @@ export default function Promo() {
   return (
     <PromoPageLayout>
       <div className="w-full">
-        <div className="mb-5">
-          <Link to="#">
-            <img
-              src={WrenchBoard}
-              alt="wrenchboard"
-              className="h-10 mx-auto"
-            />
-          </Link>
-        </div>
         {requestStatus.loading ?
           <div className='flex flex-col justify-center items-center'>
             <LoadingSpinner height='h-40' size='8' />
@@ -178,47 +169,7 @@ export default function Promo() {
                     </button>
                   </div>
                 </div>
-
-              {/* APP DOWNLOAD STORE */}
-              <div className="w-full mt-4">
-                <div className="w-full flex justify-center items-center gap-4">
-                  <div className="w-32 lg:w-48">
-                    <a
-                      // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                      target="_blank"
-                      rel="noreferrer"
-                      href={process.env.REACT_APP_APPLE_APP}
-                    >
-                      {/* <i className="fa-brands fa-apple text-3xl"></i>
-                      <div className="flex flex-col">
-                        <span className="text-[11px]">Available on the</span>
-                        <span className="text-[12px] lg:text-base">
-                          App Store
-                        </span>
-                      </div> */}
-                      <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
-                    </a>
-                  </div>
-                  <div className="w-32 lg:w-48">
-                    <a
-                      // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                      target="_blank"
-                      rel="noreferrer"
-                      href={process.env.REACT_APP_ANDROID_APP}
-                    >
-                      {/* <i className="fa-brands fa-google-play text-2xl"></i>
-                      <div className="flex flex-col">
-                        <span className="text-[11px]">Available on the</span>
-                        <span className="text-[12px] lg:text-base">
-                          Google Play
-                        </span>
-                      </div> */}
-                      <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
-                    </a>
-                  </div>
-                </div>
-              </div>
-              </div>
+            </div>
           </div>
           :
           <ErrorComponent onClick={() => navigate("/login")} />

src/components/AuthPages/SignUp/index2.jsx

@@ -157,15 +157,6 @@ export default function SignUp() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-5">
-            <Link to={currentPath}>
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <div className="flex place-content-center">
             <div className="w-10/12">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
@@ -346,46 +337,6 @@ export default function SignUp() {
                     </button>
                   </div>
                 </div>
-
-                {/* APP DOWNLOAD STORE */}
-                <div className="w-full mt-4">
-                  <div className="w-full flex justify-center items-center gap-4">
-                    <div className="w-32 lg:w-48">
-                      <a
-                        // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                        target="_blank"
-                        rel="noreferrer"
-                        href={process.env.REACT_APP_APPLE_APP}
-                      >
-                        {/* <i className="fa-brands fa-apple text-3xl"></i>
-                        <div className="flex flex-col">
-                          <span className="text-[11px]">Available on the</span>
-                          <span className="text-[12px] lg:text-base">
-                            App Store
-                          </span>
-                        </div> */}
-                        <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
-                      </a>
-                    </div>
-                    <div className="w-32 lg:w-48">
-                      <a
-                        // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                        target="_blank"
-                        rel="noreferrer"
-                        href={process.env.REACT_APP_ANDROID_APP}
-                      >
-                        {/* <i className="fa-brands fa-google-play text-2xl"></i>
-                        <div className="flex flex-col">
-                          <span className="text-[11px]">Available on the</span>
-                          <span className="text-[12px] lg:text-base">
-                            Google Play
-                          </span>
-                        </div> */}
-                        <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
-                      </a>
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
           </div>

src/components/AuthPages/VerifyLink/index2.jsx

@@ -137,15 +137,6 @@ export default function VerifyLink() {
           </div>
         ) : (
           <div className="w-full">
-            <div className="mb-12">
-              <Link to="#">
-                <img
-                  src={WrenchBoard}
-                  alt="wrenchboard"
-                  className="h-10 mx-auto"
-                />
-              </Link>
-            </div>
             <div className="flex place-content-center">
               <div className="w-10/12">
                 <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">

src/components/AuthPages/VerifyPassword/index2.jsx

@@ -139,15 +139,6 @@ const VerifyPassword = () => {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <div className="flex place-content-center">
             {requestStatus.loading ? (
               <LoadingSpinner color="sky-blue" size="16" height="h-300px" />

src/components/AuthPages/VerifyYou/index2.jsx

@@ -8,15 +8,6 @@ export default function VerifyYou() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <div className="flex place-content-center">
             <div className="w-10/12">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">

src/components/Partials/Layout.jsx

@@ -11,7 +11,7 @@ import Sidebar from "./Sidebar";
 
 export default function Layout({ children }) {
   const { userDetails } = useSelector((state) => state?.userDetails); // CHECKS FOR USER Details
-
+ 
   const { drawer } = useSelector((state) => state.drawer);
   const { userJobList } = useSelector((state) => state.userJobList);
   const dispatch = useDispatch();
@@ -22,13 +22,14 @@ export default function Layout({ children }) {
   };
   const navigate = useNavigate();
   const logOut = () => {
+    let loginType = userDetails?.account_type == 'FULL' ? 'parent' : 'kid'
     sessionStorage.clear();
     localStorage.clear();
     // toast.success("Come Back Soon", {
     //   icon: `🙂`,
     // });
 
-    navigate("/login", { replace: true });
+    navigate(`/login/${loginType}`, {state:{loginType:userDetails?.account_type.toLowerCase()}, replace:true});
   };
 
   return (