From a1dc72e5b0b17593090d4a6683532ef41f4129d1 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Wed, 3 Apr 2024 10:35:59 +0100
Subject: [PATCH] added modal footer class to edit job modal

---
 src/components/AddJob/AddJob.jsx             | 486 +++++++++----------
 src/components/jobPopout/DeleteJobPopout.jsx |  43 +-
 src/components/jobPopout/EditJobPopout.jsx   | 462 +++++++++---------
 src/index.css                                |   2 +-
 4 files changed, 496 insertions(+), 497 deletions(-)

diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx
index 0547169..23aaced 100644
--- a/src/components/AddJob/AddJob.jsx
+++ b/src/components/AddJob/AddJob.jsx
@@ -73,8 +73,7 @@ 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
+    <Formik
         initialValues={IV}
         validationSchema={validationSchema}
         onSubmit={handleAddJob}
@@ -82,281 +81,282 @@ function AddJob({ popUpHandler, categories }) {
         {(props) => {
           return (
             <Form>
-              <div className="flex flex-col-reverse sm:flex-row">
-                <div className="fields w-full">
-                  {/* inputs starts here */}
-                  <div className="xl:flex xl:space-x-7 mb-[5px]">
-                    <div className="field w-full mb-6 xl:mb-0">
-                      <label
-                        htmlFor="country"
-                        className="job-label job-label-flex"
-                      >
-                        <span>Currency</span>
-                        {props.errors.country && props.touched.country && (
-                          <span className="text-[12px] text-red-500">
-                            {props.errors.country}
-                          </span>
-                        )}
-                      </label>
-                      <select
-                        id="country"
-                        name="country"
-                        value={props.values.country}
-                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                      >
-                        {walletDetails?.loading ? (
-                          <option className="text-slate-500 text-lg" value="">
-                            Loading...
-                          </option>
-                        ) : walletDetails.data.length ? (
-                          <>
+              <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 */}
+                    <div className="xl:flex xl:space-x-7 mb-[5px]">
+                      <div className="field w-full mb-6 xl:mb-0">
+                        <label
+                          htmlFor="country"
+                          className="job-label job-label-flex"
+                        >
+                          <span>Currency</span>
+                          {props.errors.country && props.touched.country && (
+                            <span className="text-[12px] text-red-500">
+                              {props.errors.country}
+                            </span>
+                          )}
+                        </label>
+                        <select
+                          id="country"
+                          name="country"
+                          value={props.values.country}
+                          className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
+                          onChange={props.handleChange}
+                          onBlur={props.handleBlur}
+                        >
+                          {walletDetails?.loading ? (
                             <option className="text-slate-500 text-lg" value="">
-                              Select a currency
+                              Loading...
                             </option>
-                            {walletDetails.data?.map((item, index) => (
-                              <option
-                                key={index}
-                                className="text-slate-500 text-lg"
-                                value={item?.country}
-                              >
-                                {item?.description}
+                          ) : walletDetails.data.length ? (
+                            <>
+                              <option className="text-slate-500 text-lg" value="">
+                                Select a currency
                               </option>
-                            ))}
-                          </>
-                        ) : (
-                          <option className="text-slate-500 text-lg" value="">
-                            No Options Found! Try Again
-                          </option>
-                        )}
-                      </select>
+                              {walletDetails.data?.map((item, index) => (
+                                <option
+                                  key={index}
+                                  className="text-slate-500 text-lg"
+                                  value={item?.country}
+                                >
+                                  {item?.description}
+                                </option>
+                              ))}
+                            </>
+                          ) : (
+                            <option className="text-slate-500 text-lg" value="">
+                              No Options Found! Try Again
+                            </option>
+                          )}
+                        </select>
+                      </div>
+
+                      {/* Price */}
+                      <div className="field w-full">
+                        <InputCom
+                          fieldClass="px-6 text-right flex"
+                          label="Price"
+                          labelClass=""
+                          type="number"
+                          name="price"
+                          placeholder="0"
+                          value={props.values.price}
+                          inputHandler={props.handleChange}
+                          blurHandler={props.handleBlur}
+                          error={
+                            props.errors.price &&
+                            props.touched.price &&
+                            props.errors.price
+                          }
+                        />
+                      </div>
                     </div>
 
-                    {/* Price */}
-                    <div className="field w-full">
+                    {/* Title  */}
+                    <div className="field w-full mb-[5px]">
                       <InputCom
-                        fieldClass="px-6 text-right flex"
-                        label="Price"
+                        fieldClass="px-6"
+                        label="Title"
                         labelClass=""
-                        type="number"
-                        name="price"
-                        placeholder="0"
-                        value={props.values.price}
+                        type="text"
+                        name="title"
+                        value={props.values.title}
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}
                         error={
-                          props.errors.price &&
-                          props.touched.price &&
-                          props.errors.price
+                          props.errors.title &&
+                          props.touched.title &&
+                          props.errors.title
                         }
                       />
                     </div>
-                  </div>
 
-                  {/* Title  */}
-                  <div className="field w-full mb-[5px]">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Title"
-                      labelClass=""
-                      type="text"
-                      name="title"
-                      value={props.values.title}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                      error={
-                        props.errors.title &&
-                        props.touched.title &&
-                        props.errors.title
-                      }
-                    />
-                  </div>
-
-                  {/* Description  */}
-                  <div className="field w-full mb-[5px]">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Description"
-                      labelClass=""
-                      type="text"
-                      name="description"
-                      value={props.values.description}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                      error={
-                        props.errors.description &&
-                        props.touched.description &&
-                        props.errors.description
-                      }
-                    />
-                  </div>
-
-                  {/* Details */}
-                  <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
-                    <div className="sm:w-[60%] w-full">
-                      <label
-                        htmlFor="Job Delivery Details"
-                        className="job-label job-label-flex"
-                      >
-                        Job Delivery Details
-                        {props.errors.job_detail &&
-                          props.touched.job_detail && (
-                            <span className="text-[12px] text-red-500">
-                              {props.errors.job_detail}
-                            </span>
-                          )}
-                      </label>
-                      <textarea
-                        id="Job Delivery Details"
-                        rows="5"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
-                        style={{ resize: "none" }}
-                        name="job_detail"
-                        value={props.values.job_detail}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
+                    {/* Description  */}
+                    <div className="field w-full mb-[5px]">
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Description"
+                        labelClass=""
+                        type="text"
+                        name="description"
+                        value={props.values.description}
+                        inputHandler={props.handleChange}
+                        blurHandler={props.handleBlur}
+                        error={
+                          props.errors.description &&
+                          props.touched.description &&
+                          props.errors.description
+                        }
                       />
                     </div>
 
-                    <div className="sm:w-[35%] w-full">
-                      <label
-                        htmlFor="Job Categories"
-                        className='job-label'
-                        id="checked-group"
-                      >
-                        Categories
-                      </label>
-                      <div
-                        className="sm:flex-col flex flex-wrap px-3 mt-3"
-                        role="group"
-                        aria-labelledby="checked-group"
-                      >
-                        {categories ? (
-                          <>
-                            {Object?.entries(categories).map(([key, value]) => (
-                              <label
-                                key={key}
-                                className="flex gap-1 w-full items-center"
-                              >
-                                <Field
-                                  type="checkbox"
-                                  name="category"
-                                  value={key}
-                                />
-                                <span className="text-[13.975px]">{value}</span>
-                              </label>
-                            ))}
-                          </>
-                        ) : (
-                          <label className="flex gap-1 w-full items-center">
-                            <Field type="checkbox" name="category" />
-                            <span className="text-[13.975px]">null</span>
-                          </label>
-                        )}
-                        <span className="h-5 text-sm italic text-[#cf3917]">
-                          {props.errors.category &&
-                            props.touched.category &&
-                            "please select a category"}
-                        </span>
+                    {/* Details */}
+                    <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+                      <div className="sm:w-[60%] w-full">
+                        <label
+                          htmlFor="Job Delivery Details"
+                          className="job-label job-label-flex"
+                        >
+                          Job Delivery Details
+                          {props.errors.job_detail &&
+                            props.touched.job_detail && (
+                              <span className="text-[12px] text-red-500">
+                                {props.errors.job_detail}
+                              </span>
+                            )}
+                        </label>
+                        <textarea
+                          id="Job Delivery Details"
+                          rows="5"
+                          className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
+                          style={{ resize: "none" }}
+                          name="job_detail"
+                          value={props.values.job_detail}
+                          onChange={props.handleChange}
+                          onBlur={props.handleBlur}
+                        />
+                      </div>
+
+                      <div className="sm:w-[35%] w-full">
+                        <label
+                          htmlFor="Job Categories"
+                          className='job-label'
+                          id="checked-group"
+                        >
+                          Categories
+                        </label>
+                        <div
+                          className="sm:flex-col flex flex-wrap px-3 mt-3"
+                          role="group"
+                          aria-labelledby="checked-group"
+                        >
+                          {categories ? (
+                            <>
+                              {Object?.entries(categories).map(([key, value]) => (
+                                <label
+                                  key={key}
+                                  className="flex gap-1 w-full items-center"
+                                >
+                                  <Field
+                                    type="checkbox"
+                                    name="category"
+                                    value={key}
+                                  />
+                                  <span className="text-[13.975px]">{value}</span>
+                                </label>
+                              ))}
+                            </>
+                          ) : (
+                            <label className="flex gap-1 w-full items-center">
+                              <Field type="checkbox" name="category" />
+                              <span className="text-[13.975px]">null</span>
+                            </label>
+                          )}
+                          <span className="h-5 text-sm italic text-[#cf3917]">
+                            {props.errors.category &&
+                              props.touched.category &&
+                              "please select a category"}
+                          </span>
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className="field w-full mb-[5px]">
-                    <div className={`flex items-center justify-between mb-2.5`}>
-                      <label
-                        className="job-label"
-                        htmlFor="timeline_days"
-                      >
-                        Timeline
-                        <span className="text-green-700 text-sm tracking-wide">
-                          - Expected duration of this task
-                        </span>
-                      </label>
-                    </div>
-
-                    <Field
-                      component="select"
-                      name="timeline_days"
-                      className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
-                        props.errors.timeline_days &&
-                        props.touched.timeline_days
-                          ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                          : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                      }`}
-                      value={props.values.timeline_days}
-                    >
-                      <option value="">Select Duration</option>
-                      {publicArray.map(({ name, duration }, idx) => (
-                        <option
-                          key={idx}
-                          className="text-slate-500 text-lg"
-                          value={duration}
+                    <div className="field w-full mb-[5px]">
+                      <div className={`flex items-center justify-between mb-2.5`}>
+                        <label
+                          className="job-label"
+                          htmlFor="timeline_days"
                         >
-                          {name}
-                        </option>
-                      ))}
-                    </Field>
-                  </div>
-                  {/* inputs ends here */}
-                </div>
-              </div>
+                          Timeline
+                          <span className="text-green-700 text-sm tracking-wide">
+                            - Expected duration of this task
+                          </span>
+                        </label>
+                      </div>
 
-              {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-              <div className="content-footer w-full">
-                {/* error or success display */}
-                {requestStatus.message != "" &&
-                  (!requestStatus.status ? (
-                    <div
-                      className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                    >
-                      {requestStatus.message}
+                      <Field
+                        component="select"
+                        name="timeline_days"
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
+                          props.errors.timeline_days &&
+                          props.touched.timeline_days
+                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                        }`}
+                        value={props.values.timeline_days}
+                      >
+                        <option value="">Select Duration</option>
+                        {publicArray.map(({ name, duration }, idx) => (
+                          <option
+                            key={idx}
+                            className="text-slate-500 text-lg"
+                            value={duration}
+                          >
+                            {name}
+                          </option>
+                        ))}
+                      </Field>
                     </div>
-                  ) : (
-                    requestStatus.status && (
+                    {/* inputs ends here */}
+                  </div>
+                </div>
+
+                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                <div className="content-footer w-full">
+                  {/* error or success display */}
+                  {requestStatus.message != "" &&
+                    (!requestStatus.status ? (
                       <div
-                        className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                       >
                         {requestStatus.message}
                       </div>
-                    )
-                  ))}
-                {/* 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 className="flex items-center space-x-4 mr-9">
-                    <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"
-                    >
-                      <span
-                        className="px-2"
-                        onClick={popUpHandler}
-                      >
-                        {" "}
-                        Cancel
-                      </span>
-                    </button>
-
-                    {requestStatus?.loading ? (
-                      <LoadingSpinner size="8" color="sky-blue" />
                     ) : (
-                      <button
-                        type="submit"
-                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                      >
-                        Add Job
-                      </button>
-                    )}
-                  </div>
+                      requestStatus.status && (
+                        <div
+                          className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        >
+                          {requestStatus.message}
+                        </div>
+                      )
+                    ))}
+                  {/* End of error or success display */}
+
+                </div>
+              </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="custom-btn border border-light-red text-light-red"
+                  >
+                    <span
+                      className="px-2"
+                      onClick={popUpHandler}
+                    >
+                      {" "}
+                      Cancel
+                    </span>
+                  </button>
+
+                  {requestStatus?.loading ? (
+                    <LoadingSpinner size="8" color="sky-blue" />
+                  ) : (
+                    <button
+                      type="submit"
+                      className="custom-btn btn-gradient text-white"
+                    >
+                      Add Job
+                    </button>
+                  )}
                 </div>
               </div>
             </Form>
           );
         }}
       </Formik>
-    </div>
   );
 }
 
diff --git a/src/components/jobPopout/DeleteJobPopout.jsx b/src/components/jobPopout/DeleteJobPopout.jsx
index f4c8a54..846dc2f 100644
--- a/src/components/jobPopout/DeleteJobPopout.jsx
+++ b/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>
   );
diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx
index fbccea9..7248814 100644
--- a/src/components/jobPopout/EditJobPopout.jsx
+++ b/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,277 +249,276 @@ const EditJobPopOut = ({
           >
             {(props) => (
               <Form className="w-full">
-                <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]">
-                      <div className="field w-full mb-6 xl:mb-0">
+                <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]">
+                        <div className="field w-full mb-6 xl:mb-0">
+                          <InputCom
+                            fieldClass="px-6 cursor-default"
+                            label="Currency"
+                            labelClass="tracking-wide"
+                            inputBg="bg-slate-100"
+                            inputClass="input-curve lg border border-light-purple"
+                            type="text"
+                            name="country"
+                            value={props.values.country}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                            disable={true}
+                          />
+                        </div>
+
+                        {/* Price */}
+                        <div className="field w-full">
+                          <InputCom
+                            fieldClass="px-6 text-right"
+                            label="Price"
+                            labelClass="tracking-wide"
+                            inputBg="bg-slate-100"
+                            inputClass="input-curve lg border border-light-purple"
+                            type="number"
+                            name="price"
+                            value={props.values.price}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                            errorBorder={
+                              props.errors.price && props.touched.price
+                            }
+                          />
+                        </div>
+                      </div>
+                      {/* Title  */}
+                      <div className="field w-full mb-[0.5rem]">
                         <InputCom
-                          fieldClass="px-6 cursor-default"
-                          label="Currency"
+                          fieldClass="px-6"
+                          label="Title"
                           labelClass="tracking-wide"
                           inputBg="bg-slate-100"
-                          inputClass="input-curve lg border border-light-purple"
+                          inputClass=" input-curve lg border border-light-purple"
                           type="text"
-                          name="country"
-                          value={props.values.country}
+                          name="title"
+                          value={props.values.title}
                           inputHandler={props.handleChange}
                           blurHandler={props.handleBlur}
-                          disable={true}
+                          errorBorder={props.errors.title && props.touched.title}
                         />
                       </div>
 
-                      {/* Price */}
-                      <div className="field w-full">
+                      {/* Description  */}
+                      <div className="field w-full mb-[0.5rem]">
                         <InputCom
-                          fieldClass="px-6 text-right"
-                          label="Price"
+                          fieldClass="px-6"
+                          label="Description"
                           labelClass="tracking-wide"
                           inputBg="bg-slate-100"
-                          inputClass="input-curve lg border border-light-purple"
-                          type="number"
-                          name="price"
-                          value={props.values.price}
+                          inputClass=" input-curve lg border border-light-purple"
+                          type="text"
+                          name="description"
+                          value={props.values.description}
                           inputHandler={props.handleChange}
                           blurHandler={props.handleBlur}
                           errorBorder={
-                            props.errors.price && props.touched.price
+                            props.errors.description && props.touched.description
                           }
                         />
                       </div>
-                    </div>
-                    {/* Title  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Title"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass=" input-curve lg border border-light-purple"
-                        type="text"
-                        name="title"
-                        value={props.values.title}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                        errorBorder={props.errors.title && props.touched.title}
-                      />
-                    </div>
 
-                    {/* Description  */}
-                    <div className="field w-full mb-[0.5rem]">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Description"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass=" input-curve lg border border-light-purple"
-                        type="text"
-                        name="description"
-                        value={props.values.description}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                        errorBorder={
-                          props.errors.description && props.touched.description
-                        }
-                      />
-                    </div>
-
-                    {/* Details */}
-                    <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
-                      <div className="sm:w-[60%] w-full">
-                        <label
-                          htmlFor="job-label"
-                          className='job-label'
-                        >
-                          Job Delivery Details
-                        </label>
-                        <textarea
-                          id="Job Delivery Details"
-                          rows="5"
-                          className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
-                            props.errors.job_detail && props.touched.job_detail
-                              ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                              : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                          } rounded-[10px]`}
-                          style={{ resize: "none" }}
-                          name="job_detail"
-                          value={props.values.job_detail}
-                          onChange={props.handleChange}
-                          onBlur={props.handleBlur}
-                        />
-                      </div>
-
-                      <div className="sm:w-[35%] w-full">
-                        <div
-                          htmlFor="Job Categories"
-                          className='job-label'
-                          id="checked-group"
-                        >
-                          Categories
+                      {/* Details */}
+                      <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+                        <div className="sm:w-[60%] w-full">
+                          <label
+                            htmlFor="job-label"
+                            className='job-label'
+                          >
+                            Job Delivery Details
+                          </label>
+                          <textarea
+                            id="Job Delivery Details"
+                            rows="5"
+                            className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
+                              props.errors.job_detail && props.touched.job_detail
+                                ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                            } rounded-[10px]`}
+                            style={{ resize: "none" }}
+                            name="job_detail"
+                            value={props.values.job_detail}
+                            onChange={props.handleChange}
+                            onBlur={props.handleBlur}
+                          />
                         </div>
-                        <div
-                          className="sm:flex-col flex flex-wrap px-3 mt-3"
-                          role="group"
-                          aria-labelledby="checked-group"
-                        >
-                          {categories &&
-                            Object.entries(categories)?.map(([key, value]) => (
-                              <label
-                                key={key}
-                                className="flex gap-1 w-full items-center dark:text-white"
-                              >
-                                <Field
-                                  type="checkbox"
-                                  name="category"
-                                  value={key}
-                                />
-                                <span className="text-[13.975px]">{value}</span>
-                              </label>
-                            ))}
-                          <span className="h-5 text-sm italic text-[#cf3917]">
-                            {props.errors.category &&
-                              props.touched.category &&
-                              "please select a category"}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-                    <div className="w-full flex items-center gap-2 mb-2">
-                      {/* FOR TASK IMAGE */}
-                      <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
-                        <input
-                          id="task_image"
-                          className="hidden"
-                          type="file"
-                          accept="image/*"
-                          onChange={taskImgChangeHandler}
-                        />
-                        {taskImage ? (
-                          <div className="w-full absolute -top-5">
-                            <img
-                              src={taskImage}
-                              className="max-h-[150px] min-h-[150px] w-full object-cover"
-                              alt="uploaded task"
-                            />
-                            <span
-                              onClick={() => setTaskImage("")}
-                              className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
-                            >
-                              Remove Image
+
+                        <div className="sm:w-[35%] w-full">
+                          <div
+                            htmlFor="Job Categories"
+                            className='job-label'
+                            id="checked-group"
+                          >
+                            Categories
+                          </div>
+                          <div
+                            className="sm:flex-col flex flex-wrap px-3 mt-3"
+                            role="group"
+                            aria-labelledby="checked-group"
+                          >
+                            {categories &&
+                              Object.entries(categories)?.map(([key, value]) => (
+                                <label
+                                  key={key}
+                                  className="flex gap-1 w-full items-center dark:text-white"
+                                >
+                                  <Field
+                                    type="checkbox"
+                                    name="category"
+                                    value={key}
+                                  />
+                                  <span className="text-[13.975px]">{value}</span>
+                                </label>
+                              ))}
+                            <span className="h-5 text-sm italic text-[#cf3917]">
+                              {props.errors.category &&
+                                props.touched.category &&
+                                "please select a category"}
                             </span>
                           </div>
-                        ) : (
-                          <label
-                            className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
-                            htmlFor="task_image"
-                          >
-                            Select Task Image
-                          </label>
-                        )}
-                      </div>
-                      {/* END OF TASK IMAGE */}
-
-                      <div className="field w-1/2">
-                        <div className={`flex items-center justify-between`}>
-                          <label
-                            className="job-label flex flex-col"
-                            htmlFor="timeline_days"
-                          >
-                            Timeline -
-                            <span className="w-full text-center text-green-700 text-sm tracking-wide">
-                              Expected duration of this task
-                            </span>
-                          </label>
                         </div>
-
-                        <Field
-                          component="select"
-                          name="timeline_days"
-                          className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
-                            props.errors.timeline_days &&
-                            props.touched.timeline_days
-                              ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                              : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                          }`}
-                          value={props.values.timeline_days}
-                        >
-                          <option value="">Select Duration</option>
-                          {publicArray.map(({ name, duration }, idx) => (
-                            <option
-                              key={duration}
-                              className="text-slate-500 text-lg"
-                              value={duration}
+                      </div>
+                      <div className="w-full flex items-center gap-2 mb-2">
+                        {/* FOR TASK IMAGE */}
+                        <div className="w-1/2 relative max-h-[130px] min-h-[130px]">
+                          <input
+                            id="task_image"
+                            className="hidden"
+                            type="file"
+                            accept="image/*"
+                            onChange={taskImgChangeHandler}
+                          />
+                          {taskImage ? (
+                            <div className="w-full absolute -top-5">
+                              <img
+                                src={taskImage}
+                                className="max-h-[150px] min-h-[150px] w-full object-cover"
+                                alt="uploaded task"
+                              />
+                              <span
+                                onClick={() => setTaskImage("")}
+                                className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
+                              >
+                                Remove Image
+                              </span>
+                            </div>
+                          ) : (
+                            <label
+                              className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
+                              htmlFor="task_image"
                             >
-                              {name}
-                            </option>
-                          ))}
-                        </Field>
+                              Select Task Image
+                            </label>
+                          )}
+                        </div>
+                        {/* END OF TASK IMAGE */}
+
+                        <div className="field w-1/2">
+                          <div className={`flex items-center justify-between`}>
+                            <label
+                              className="job-label flex flex-col"
+                              htmlFor="timeline_days"
+                            >
+                              Timeline -
+                              <span className="w-full text-center text-green-700 text-sm tracking-wide">
+                                Expected duration of this task
+                              </span>
+                            </label>
+                          </div>
+
+                          <Field
+                            component="select"
+                            name="timeline_days"
+                            className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                              props.errors.timeline_days &&
+                              props.touched.timeline_days
+                                ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                                : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                            }`}
+                            value={props.values.timeline_days}
+                          >
+                            <option value="">Select Duration</option>
+                            {publicArray.map(({ name, duration }, idx) => (
+                              <option
+                                key={duration}
+                                className="text-slate-500 text-lg"
+                                value={duration}
+                              >
+                                {name}
+                              </option>
+                            ))}
+                          </Field>
+                        </div>
                       </div>
+                      {/* inputs ends here */}
                     </div>
-                    {/* inputs ends here */}
                   </div>
-                </div>
-                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-                <div className="content-footer w-full">
-                  {/* error or success display */}
-                  {requestStatus.message != "" &&
-                    (!requestStatus.status ? (
-                      <div
-                        className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                      >
-                        {requestStatus.message}
-                      </div>
-                    ) : (
-                      requestStatus.status && (
+                  {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                  <div className="content-footer w-full">
+                    {/* error or success display */}
+                    {requestStatus.message != "" &&
+                      (!requestStatus.status ? (
                         <div
-                          className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                         >
                           {requestStatus.message}
                         </div>
-                      )
-                    ))}
-                  {/* End of error or success display */}
-
-                  {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
-                  <div className="w-full">
-                    {uploadStatus.message && !uploadStatus.loading && (
-                      <p
-                        className={`text-center ${
-                          uploadStatus.status
-                            ? "text-green-500"
-                            : "text-red-500"
-                        }`}
-                      >
-                        {uploadStatus.message}
-                      </p>
-                    )}
-                    {uploadStatus.loading && (
-                      <p className="text-center">{uploadStatus.message}</p>
-                    )}
-                  </div>
-
-                  <div className="w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                    <div className="flex items-center space-x-4 mr-2 mt-2">
-                      {requestStatus.loading ? (
-                        <LoadingSpinner size="6" color="sky-blue" />
                       ) : (
-                        <button
-                          type="submit"
-                          className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                          // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
-                          disabled={
-                            requestStatus.loading || uploadStatus.loading
-                          }
+                        requestStatus.status && (
+                          <div
+                            className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          >
+                            {requestStatus.message}
+                          </div>
+                        )
+                      ))}
+                    {/* End of error or success display */}
+
+                    {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
+                    <div className="w-full">
+                      {uploadStatus.message && !uploadStatus.loading && (
+                        <p
+                          className={`text-center ${
+                            uploadStatus.status
+                              ? "text-green-500"
+                              : "text-red-500"
+                          }`}
                         >
-                          Save
-                        </button>
+                          {uploadStatus.message}
+                        </p>
+                      )}
+                      {uploadStatus.loading && (
+                        <p className="text-center">{uploadStatus.message}</p>
                       )}
                     </div>
+
                   </div>
                 </div>
+                <div className="modal-footer-wrapper justify-end">
+                    {requestStatus.loading ? (
+                      <LoadingSpinner size="6" color="sky-blue" />
+                    ) : (
+                      <button
+                        type="submit"
+                        className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                        // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
+                        disabled={
+                          requestStatus.loading || uploadStatus.loading
+                        }
+                      >
+                        Save
+                      </button>
+                    )}
+                </div>
               </Form>
             )}
           </Formik>
-        </div>
       </div>
     </ModalCom>
   );
diff --git a/src/index.css b/src/index.css
index 1bb90c9..c6aa64f 100644
--- a/src/index.css
+++ b/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 */