added modal footer class to edit job modal

src/components/AddJob/AddJob.jsx

@@ -73,7 +73,6 @@ function AddJob({ popUpHandler, categories }) {
   };
 
   return (
-    <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
     <Formik
         initialValues={IV}
         validationSchema={validationSchema}
@@ -82,6 +81,7 @@ function AddJob({ popUpHandler, categories }) {
         {(props) => {
           return (
             <Form>
+              <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
                 <div className="flex flex-col-reverse sm:flex-row">
                   <div className="fields w-full">
                     {/* inputs starts here */}
@@ -324,11 +324,13 @@ function AddJob({ popUpHandler, categories }) {
                     ))}
                   {/* End of error or success display */}
 
-                <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                </div>
-                  <div className="flex items-center space-x-4 mr-9">
+              </div>
+              <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+                <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
                   <button
                     type="button"
-                      className="text-18 tracking-wide h-11 flex justify-center items-center border border-light-red text-base rounded-full text-light-red cursor-pointer"
+                    className="custom-btn border border-light-red text-light-red"
                   >
                     <span
                       className="px-2"
@@ -344,19 +346,17 @@ function AddJob({ popUpHandler, categories }) {
                   ) : (
                     <button
                       type="submit"
-                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      className="custom-btn btn-gradient text-white"
                     >
                       Add Job
                     </button>
                   )}
                 </div>
               </div>
-              </div>
             </Form>
           );
         }}
       </Formik>
-    </div>
   );
 }
 

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -105,7 +105,7 @@ function ConfirmNairaWithdraw({
 
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="logout-modal-wrapper w-[90%] md:w-[768px] 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="w-full">
           <div className="modal-header-con">
             <h2 className="modal-title">

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 w-[90%] md:w-[768px] 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="modal-header-con">
           <h1 className="modal-title">
             {confirmCredit?.show?.acceptConfirm?.loader

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -290,7 +290,7 @@ function NairaWithdraw({
 
   return (
     <ModalCom action={action} situation={situation}>
-      <div className="logout-modal-wrapper w-[90%] md:w-[768px] 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="w-full">
           <div className="modal-header-con">
             <h1 className="modal-title">

src/components/jobPopout/DeleteJobPopout.jsx

@@ -125,27 +125,6 @@ function DeleteJobPopout({ details, onClose, situation }) {
               <span className="job-label">Duration: </span>{details.timeline_days} day(s)
             </p>
           </div>
-          <div className="flex space-x-2.5">
-            <button
-              onClick={onClose}
-              type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-            >
-              <span className="text-gradient">Cancel</span>
-            </button>
-            {requestStatus.laoding ? (
-              <LoadingSpinner size="8" color="sky-blue" />
-            ) : (
-              <button
-                onClick={() => deleteJob(details)}
-                type="button"
-                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
-              >
-                Confirm Delete
-              </button>
-            )}
-          </div>
-
           {/* ERROR DISPLAY AND SUBMIT BUTTON */}
           {requestStatus.message != "" &&
             (!requestStatus.status ? (
@@ -165,6 +144,28 @@ function DeleteJobPopout({ details, onClose, situation }) {
             ))}
           {/* End of error or success display */}
         </div>
+        <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
+          <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
+            <button
+              onClick={onClose}
+              type="button"
+              className="custom-btn border-gradient"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteJob(details)}
+                type="button"
+                className="custom-btn text-white primary-gradient"
+              >
+                Confirm Delete
+              </button>
+            )}
+            </div>
+        </div>
       </div>
     </ModalCom>
   );

src/components/jobPopout/EditJobPopout.jsx

@@ -242,7 +242,6 @@ const EditJobPopOut = ({
             </svg>
           </button>
         </div>
-        <div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
           <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
@@ -250,6 +249,7 @@ const EditJobPopOut = ({
           >
             {(props) => (
               <Form className="w-full">
+                <div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
                   <div className="flex flex-col-reverse sm:flex-row">
                     <div className="fields w-full">
                       <div className="xl:flex xl:space-x-7 mb-[0.5rem]">
@@ -498,8 +498,9 @@ const EditJobPopOut = ({
                       )}
                     </div>
 
-                  <div className="w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                  </div>
-                    <div className="flex items-center space-x-4 mr-2 mt-2">
+                </div>
+                <div className="modal-footer-wrapper justify-end">
                     {requestStatus.loading ? (
                       <LoadingSpinner size="6" color="sky-blue" />
                     ) : (
@@ -515,13 +516,10 @@ const EditJobPopOut = ({
                       </button>
                     )}
                 </div>
-                  </div>
-                </div>
               </Form>
             )}
           </Formik>
       </div>
-      </div>
     </ModalCom>
   );
 };

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -226,19 +226,11 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
               {requestStatus.loading && requestStatus.trigger == "offer" ? (
                 <LoadingSpinner size={8} color="sky-blue" />
               ) : (
-                // <button
-                //   name="accept"
-                //   onClick={handleOffer}
-                //   disabled={requestStatus.loading}
-                //   className="px-2 py-2 w-20 flex justify-center items-center border-2 border-green-900 bg-green-500 text-base rounded-2xl text-white"
-                // >
-                //   I am ready to start
-                // </button>
                 <button
                   name="accept"
                   onClick={handleOffer}
                   disabled={requestStatus.loading}
-                  className="btn-gradient text-white px-2 py-2 w-40 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
+                  className="px-2 py-2 w-20 flex justify-center items-center border-2 border-green-900 bg-green-500 text-base rounded-2xl text-white"
                 >
                   I am ready to start
                 </button>

src/index.css

@@ -174,7 +174,7 @@
 
   /* modal footer */
   .modal-footer-wrapper{
-    @apply py-2 px-4 border-t-2 flex justify-between items-center
+    @apply p-4 border-t-2 flex justify-between items-center
   }
   /* END OF STYLES FOR MODAL BOX */