modal display box centered

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -172,9 +172,8 @@ const AssignTaskPopout = React.memo(
         <ModalCom
           action={action}
           situation={situation}
-          className="assign-task-popup"
         >
-          <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+          <div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
             <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                 Assign task to{" "}

src/components/FamilyAcc/FamilyTable.jsx

@@ -77,7 +77,7 @@ export default function FamilyTable({
       >
         <td className="py-4">
           <div className="flex space-x-2 items-center w-full">
-            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
+            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
               <img
                 // src={profile_picture}
                 src={image || profile_picture || localImgLoad(`images/icons/${banner}`)}

src/components/FamilyAcc/index.jsx

@@ -226,7 +226,7 @@ const FamilyForm = ({
   popUpHandler,
 }) => {
   return (
-    <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <div className="logout-modal-wrapper w-11/12 lg:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
       <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
         <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
           Add Members

src/components/Helpers/ModalCom.jsx

@@ -16,7 +16,7 @@ export default function ModalCom({ action, children, situation, isOpen, classNam
         onClick={action || isOpen}
         className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
       ></div>
-      <div className={`children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ${className}`}>
+      <div className={`fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
         {children && children}
       </div>
     </div>

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -117,8 +117,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
     .replace(/&/g, "&");
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper md:w-[650px] md:h-[580px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-11/12 md:w-[650px] md:h-[580px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px]">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {details.offer_code}

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -600,10 +600,10 @@ const PopModal = ({
   myRef,
 }) => {
   return (
-    <ModalCom action={popUpHandler} situation={popUp} className="edit-popup">
+    <ModalCom action={popUpHandler} situation={popUp}>
       <div
         ref={myRef}
-        className="message-modal-wrapper min-w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl"
+        className="message-modal-wrapper w-11/12 min-w-[350px] max-w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto"
       >
         <div className="message-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -104,8 +104,8 @@ function ConfirmNairaWithdraw({
   };
 
   return (
-    <ModalCom action={action} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <ModalCom action={action} situation={situation}>
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
           <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
             <h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -35,7 +35,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
       situation={situation}
       className="assign-task-popup"
     >
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {confirmCredit?.show?.acceptConfirm?.loader

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -289,8 +289,8 @@ function NairaWithdraw({
   console.log("Testing Wallet Country", wallet?.walletCountry[0]?.code);
 
   return (
-    <ModalCom action={action} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <ModalCom action={action} situation={situation}>
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
           <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
             <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">

src/components/Partials/Layout.jsx

@@ -87,7 +87,7 @@ export default function Layout({ children }) {
       </div>
       {logoutModal && (
         <ModalCom action={logoutModalHandler} situation={logoutModal}>
-          <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+          <div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl">
             <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                 Confirm

src/components/jobPopout/DeleteJobPopout.jsx

@@ -63,7 +63,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+      <div className="logout-modal-wrapper lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Delete Job

src/components/jobPopout/EditJobPopout.jsx

@@ -215,8 +215,8 @@ const EditJobPopOut = ({
   const isWindows = /Windows/.test(navigator.userAgent);
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Edit Job

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -105,7 +105,7 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Start Task

src/components/jobPopout/JobListPopout.jsx

@@ -23,6 +23,10 @@ const validationSchema = Yup.object().shape({
 });
 
 function JobListPopout({ details, onClose, situation }) {
+
+  const [selectedTab, setSelectedTab] = useState('public')
+  const tabs = ['public', 'individual', 'group']
+
 const dispatch = useDispatch()
 
 const [requestStatus, setRequestStatus] = useState({message:'', status:false})
@@ -170,6 +174,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
       if(status != 200 || data.internal_return < 0){
         setRequestStatus({message:'Unable to complete', status:false})
         return setTimeout(()=>{
+          setLoader({ jobFields: false });
           setRequestStatus({message:'', status:false})
         },3000)
       }
@@ -213,8 +218,8 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
 
   // console.log("Job List P >> ", details)
   return (
-    <ModalCom action={onClose} situation={situation} className="job-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation} className="">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
             {details.title}
@@ -285,14 +290,24 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
               />
               <p>{errMsg.deliveryDetail}</p>
             </div>
-
-            {requestStatus.message &&
-              <p className={`w-full text-lg ${requestStatus.status ? 'text-emerald-600' : 'text-red-600'}`}>{requestStatus.message}</p>
-            }
           </div>
 
           {/* ACTION SECTION */}
           <div className="p-4 w-full md:w-2/4 h-full">
+            <div className="grid grid-cols-3 my-4 border-b-2">
+              {tabs.map(item => (
+                <button 
+                  className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`} 
+                  value={item} 
+                  name={item}
+                  onClick={()=>setSelectedTab(item)}
+                >
+                  {item[0].toUpperCase() + item.slice(1)}
+                </button>
+              ))}
+            </div>
+
+            {selectedTab == 'family' &&
             <Formik
               initialValues={initialValues}
               validationSchema={validationSchema.fields.family}
@@ -323,7 +338,9 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 );
               }}
             </Formik>
-
+            }
+            
+            {selectedTab == 'public' &&
             <Formik
               initialValues={initialValues}
               validationSchema={validationSchema.fields.public}
@@ -354,7 +371,9 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 );
               }}
             </Formik>
+            }
 
+            {selectedTab == 'individual' &&
             <Formik
               initialValues={initialValues}
               validationSchema={validationSchema.fields.individual}
@@ -385,8 +404,10 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 );
               }}
             </Formik>
+            }
             
-            { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 &&
+            {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
+            {selectedTab == 'group' &&
             <Formik
               initialValues={initialValues}
               validationSchema={validationSchema.fields.group}
@@ -418,6 +439,10 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
               }}
             </Formik>
             }
+
+            {requestStatus.message &&
+              <p className={`mt-4 w-full text-lg ${requestStatus.status ? 'text-emerald-600' : 'text-red-600'}`}>{requestStatus.message}</p>
+            }
           </div>
           {/* END OF ACTION SECTION */}
         </div>

src/components/jobPopout/OfferJobPopout.jsx

@@ -102,7 +102,7 @@ function OfferJobPopout({ details, onClose, situation }) {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Start Task

src/components/jobPopout/PendingJobsPopout.jsx

@@ -133,8 +133,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
   };
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Manage Pending Item

src/views/AddJobPage.jsx

@@ -4,8 +4,8 @@ import ModalCom from "../components/Helpers/ModalCom";
 
 function AddJobPage({ action, situation, categories }) {
   return (
-    <ModalCom action={action} situation={situation} className="edit-popup">
-      <div className="lg:w-[600px] w-full lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
+    <ModalCom action={action} situation={situation}>
+      <div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
         <div className="heading flex justify-between items-center py-6  md:px-[30px] px-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Create New Job