updated login page

src/components/auth/LoginCom.jsx

@@ -68,10 +68,6 @@ export default function LoginCom() {
     <>
       <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/login-bg.jpg')] bg-cover bg-center bg-no-repeat`}>
         <div className='p-4 sm:p-8 w-full max-w-7xl mx-auto grid gap-8 grid-cols-1 md:grid-cols-3 lg:grid-cols-2'>
-          <div className='col-span-1 md:col-span-1 lg:col-span-1 h-full flex flex-col gap-3 justify-center items-center md:items-start'>
-            {/* <DummyLogo />
-            <p className='text-4xl text-black-body font-bold'>Dummy Text Here</p> */}
-          </div>
           <div className='col-span-1 md:col-span-2 lg:col-span-1 h-full'>
             <div className='flex flex-col gap-8 w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
               <div className='w-full flex flex-col gap-1 items-center'>
@@ -99,17 +95,17 @@ export default function LoginCom() {
                 <div className='text-input flex flex-col gap-2'>
                   <InputText id='username' placeholder='Username' name='username' value={fields.username} handleChange={handleChange} />
                 </div>
-                <div className='text-input flex flex-col gap-2'>
+                <div className='text-input flex flex-col gap-2 mb-10'>
                   <InputText id='password' placeholder='Password' name='password' type='password' value={fields.password} handleChange={handleChange} />
-                  <p className='text-sm text-end font-medium text-primary'>Forget password ?</p>
+                  {/* <p className='text-sm text-end font-medium text-primary'>Forget password ?</p> */}
                 </div>
-                <div className='h-10'>
+                <div className='h-10 mb-10'>
                   {/* <button onClick={()=>{login.mutate(fields)}} disabled={login.isPending} className='px-3 py-2 bg-purple-800 text-white font-bold rounded'>{login.isPending ? 'loading...' : 'Login'}</button> */}
                   <button onClick={handleLogin} className='w-full h-full bg-primary text-white font-bold rounded-md'>{loading ? 'Loading...' : 'Sign In'}</button>
                 </div>
               </div>
 
-              <p className='text-sm text-center font-medium text-slate-500'>Not yet a member? <span className='text-primary'>Sign Up</span></p>
+              {/* <p className='text-sm text-center font-medium text-slate-500'>Not yet a member? <span className='text-primary'>Sign Up</span></p> */}
 
               <div className='flex justify-end gap-4 mt-6 text-[13px] font-medium'>
                 <Link className='text-primary' to=''>Terms</Link>
@@ -127,6 +123,10 @@ export default function LoginCom() {
               } */}
             </div>
           </div>
+          <div className='col-span-1 md:col-span-1 lg:col-span-1 h-full flex flex-col gap-3 justify-center items-center md:items-start'>
+            {/* <DummyLogo />
+            <p className='text-4xl text-black-body font-bold'>Dummy Text Here</p> */}
+          </div>
         </div>
       </div>
     </>

src/components/layouts/LogoutModal.jsx

@@ -21,7 +21,7 @@ export default function LogoutModal({close}) {
   return (
     <ModalWrapper
     >
-        <div className="relative bg-white rounded-lg shadow-round_black dark:shadow-round_white dark:bg-gray-700 dark:text-white">
+        <div className="relative bg-white-body rounded-lg shadow-round_black dark:border-[1px] dark:border-[#1E2027] dark:bg-black-box dark:text-white">
             {/* <!-- Modal header --> */}
             <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                 <h3 className="text-xl font-semibold text-gray-900 dark:text-white">

src/components/modals/ModalWrapper.jsx

@@ -1,7 +1,7 @@
 
 export default function ModalWrapper({children, maxWidth}) {
   return (
-    <div className="bg-gray-900/40 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] flex flex-col justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full">
+    <div className="bg-[rgba(0,_0,_0,_0.2)] dark:bg-[rgba(0,_0,_0,_0.4)] overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] flex flex-col justify-center items-center w-full md:inset-0 h-[calc(100%)] max-h-full">
         <div className={`pop-modal relative p-4 w-full ${maxWidth ? maxWidth : 'max-w-2xl'} max-h-full`}>
             {/* <!-- Modal content --> */}
             <div className="pb-4">