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/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/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 */