reduced reference number

Merge branch 'timer-countdown' of WrenchBoard/Users-Wrench into master
payment count down timer added
2024-04-05 11:25:12 +01:00 · 2024-04-04 20:13:17 +00:00 · 2024-04-04 20:41:57 +01:00 · 2024-04-04 20:33:49 +01:00 · 2024-04-04 15:19:31 +00:00 · 2024-04-04 15:25:50 +01:00
26 changed files with 780 additions and 735 deletions
@@ -121,4 +121,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
 REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'

 # FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90
@@ -89,4 +89,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
 REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'

 # FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90
@@ -95,4 +95,7 @@ REACT_APP_SHOW_SLIDER_BANNERS=0
 REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'

 # FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
+
+# REACT APP CUSTOMTIMER
+REACT_APP_CUSTOMTIMER=90
@@ -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>
  );
 }

@@ -46,15 +46,15 @@ export default function OfferCard({
          </h1>

          <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-            <div className="grid grid-cols-2 gap-2">
-              <div className="flex flex-col justify-between items-center border-r-2">
+            <div className="grid grid-cols-1 gap-2">
+              {/* <div className="flex flex-col justify-between items-center border-r-2">
                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                  Task Code
                </p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                  {datas.contract}
                </p>
-              </div>
+              </div> */}
              <div className="flex flex-col justify-between items-center">
                <p className="text-sm text-red-500 tracking-wide">Expires</p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
@@ -256,14 +256,16 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                </p>
                <hr />
                <button
-                  className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex sm:flex-col flex-row sm:gap-0 gap-1 items-center justify-center"
+                  className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
                  name="market-interest"
                  onClick={ManageInterest}
                >
                  {" "}
-                  <span>Send</span>
-                  <span>Interest</span>
-                  <span>Request</span>
+                  <div className="w-full flex flex-col justify-between gap-2">
+                    <span>Send</span>
+                    <span>Interest</span>
+                    <span>Request</span>
+                  </div>
                </button>
                <>
                  {manageInt.loading ? (
@@ -350,7 +350,7 @@ function ActiveJobsMedia(props) {
                </div>

                {/* job details */}
-                <div className="w-full md:w-[200px]">
+                <div className="w-full md:w-[200px] flex flex-col justify-center gap-4">
                    {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
                    {passDue ? (
                        <div className="my-1">
@@ -121,7 +121,7 @@ function PastDueJobAction({jobDetails}) {
                        <button 
                            type="button" 
                            onClick={popUpHandler} 
-                            className="px-4 h-[48px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            className="custom-btn btn-gradient text-base text-white"
                        >
                            Cancel or Extend Timeline
                        </button>
@@ -133,14 +133,14 @@ function PastDueJobAction({jobDetails}) {

        {popUp && (
            <ModalCom action={popUpHandler} situation={popUp}>
-                <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-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">
+                <div className="logout-modal-wrapper lg:w-[460px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+                    <div className="modal-header-con">
+                        <h1 className="modal-title">
                        Past Due Task
                        </h1>
                        <button
                        type="button"
-                        className="text-[#374557] dark:text-red-500"
+                        className="modal-close-btn"
                        onClick={popUpHandler}
                        >
                          <svg
@@ -164,7 +164,7 @@ function PastDueJobAction({jobDetails}) {
                            </svg>
                        </button>
                    </div>
-                    <div className="job-action-modal-body w-full px-10 py-8 gap-4">
+                    <div className="relative job-action-modal-body w-full px-10 py-8 gap-4">
                        <div className="w-full flex flex-col items-center">
                            <div className="mb-5 flex justify-center items-center gap-2">
                                <input 
@@ -173,26 +173,26 @@ function PastDueJobAction({jobDetails}) {
                                    onChange={()=>{setChecked(prev => !prev)}} 
                                    className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' 
                                />
-                                <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>I am ready to cancel this task</p>
+                                <p className='job-label'>I am ready to cancel this task</p>
                            </div>

-                            <div className="mb-5 flex justify-center items-center">
+                            <div className="mb-5 w-full flex justify-end items-center">
                                {reqStatus.loading && action=='cancel'?
                                    <LoadingSpinner color='sky-blue' size='10' />
                                :
-                                    <button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white">
+                                    <button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="custom-btn border-gradient text-base text-white">
                                        <span className='text-gradient'>Cancel this task</span>
                                    </button>
                                }
                            </div>

                            {/* EXTEND TIMELINE SECTION */}
-                            <div className='w-full my-3 py-3 border-y flex flex-col items-center'>
+                            <div className='w-full my-3 py-3 border-t flex flex-col items-center'>
                                <div className='mb-5 flex items-center gap-2'>
-                                    <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>Extend the timeline by:</p>
+                                    <p className='job-label'>Extend the timeline by:</p>
                                    <select 
                                        onChange={({target})=>{setExtendedTime(target.value)}}
-                                        className='text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0'
+                                        className='text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 rounded-full'
                                    >
                                        <option className='text-slate-500 text-lg' value=''>select</option>
                                        <option className='text-slate-500 text-lg' value='2'>1 days</option>
@@ -204,25 +204,27 @@ function PastDueJobAction({jobDetails}) {
                                {reqStatus.loading && action=='extend' ?
                                    <LoadingSpinner color='sky-blue' size='10' />
                                :
-                                <button disabled={reqStatus.loading} type="button" onClick={extendTime} className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
-                                    Extend Timeline
-                                </button>
+                                <div className='w-full flex justify-end items-center'>
+                                    <button disabled={reqStatus.loading} type="button" onClick={extendTime} className="custom-btn btn-gradient text-base text-white">
+                                        Extend Timeline
+                                    </button>
+                                </div>
 }                               
                            </div>

                            {/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
-                            <div className="w-full">
+                            <div className="w-full absolute left-0 bottom-0 text-center">
                            {reqStatus.message != "" &&
                                (!reqStatus.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]`}
+                                    className={`relative p-2 mx-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                                >
                                    {reqStatus.message}
                                </div>
                                ) : (
                                reqStatus.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-2 mx-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                                    >
                                    {reqStatus.message}
                                    </div>
@@ -232,17 +234,17 @@ function PastDueJobAction({jobDetails}) {
                            {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
                        </div>
                        
-                        {/* cancel btn */}
-                        <div className='flex justify-end items-center'>
-                            <button onClick={popUpHandler} type="button" 
-                                // className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
-                                className='w-[150px] mt-2 h-[48px] rounded-full text-base bg-transparent border border-red-500 text-red-500'
-                            >
-                                Cancel
-                                {/* <span className='text-gradient'>Cancel</span> */}
-                            </button>
-                        </div>
                    </div> 
+                    {/* cancel btn */}
+                    <div className='modal-footer-wrapper flex justify-center items-center'>
+                        <button onClick={popUpHandler} type="button" 
+                            // className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
+                            className='custom-btn text-base bg-transparent border border-red-500 text-red-500'
+                        >
+                            Cancel
+                            {/* <span className='text-gradient'>Cancel</span> */}
+                        </button>
+                    </div>
                </div>
            </ModalCom>
        )}
@@ -119,7 +119,7 @@ export default function MyOffersFamilyTable({ className, familyOffers, image_ser
            </div>
          </div>
          {/* trending products */}
-          <div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
+          <div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue dark:bg-dark-white/50 transition-all duration-300">
            <SliderCom selector={trendingSlider} settings={settings}>
              {familyOffers &&
                familyOffers.length > 0 &&
@@ -260,13 +260,13 @@ function AddFundDollars(props) {
        {/* switch button */}
        <div className="flex">
          <form className="add-fund-info flex items-center gap-3 md:px-8 md:pt-4 px-4 pt-2">
-            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+            <h1 className="job-label my-1">
              {countryWallet == "US" && "Payment Method"}
            </h1>
            <div className="my-1 flex items-center gap-2">
              <label
                htmlFor="previous"
-                className="cursor-pointer flex items-center gap-1"
+                className="flex items-center gap-1"
              >
                <input
                  type="radio"
@@ -283,7 +283,7 @@ function AddFundDollars(props) {
              </label>
              <label
                htmlFor="new"
-                className={`cursor-pointer flex items-center gap-1 ${
+                className={`flex items-center gap-1 ${
                  payListCards.data.length >= MaxNoOfCards
                    ? "pointer-events-none"
                    : ""
@@ -388,7 +388,7 @@ function AddFundDollars(props) {
                              {/* Inputs */}
                              {/* Name */}
                              <div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
-                                <label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
+                                <label className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
                                  Name:
                                </label>
                                <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
@@ -423,7 +423,7 @@ function AddFundDollars(props) {
                                        className={`flex items-center justify-between mb-2.5`}
                                      >
                                        <label
-                                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
+                                          className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
                                          htmlFor="expiration"
                                        >
                                          Exp Month{" "}
@@ -131,7 +131,7 @@ function AddFundPop({
        <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
            <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
-              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+              <h1 className="job-label my-1">
                Amount({currency})
              </h1>
              <div className="field w-full max-w-[250px]">
@@ -49,7 +49,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                    </svg>
                  </div>

-                  <div className="flex items-center">
+                  <div className="w-full flex justify-center items-center">
                    <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
                      {isSuccess
                        ? "Credit was Successful!"
@@ -59,41 +59,42 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {

                  {data?.internal_return >= 0 &&
                    data?.result !== "Charge failed" && (
-                      <>
-                        <div className="flex items-center gap-8">
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      <div className="w-full md:w-[60%] mx-auto">
+                        <div className="grid grid-cols-2 gap-8 my-2">
+                          <h1 className="job-label">
                            Amount({data?.currency || ""})
                          </h1>
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                            {`${data?.symbol || ""} ${
-                              Number(data?.amount * 0.01).toLocaleString() || ""
+                              Number(data?.amount * 0.01).toFixed(2) || ""
                            }`}
                          </span>
                        </div>
                        
                        {data?.curr_balance &&
-                        <div className="flex items-center gap-8">
-                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                        <div className="grid grid-cols-2 gap-8 my-2">
+                          <h1 className="job-label">
                            Wallet Balance
                          </h1>
-                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                            {data?.curr_balance * 0.01}
+                          <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
+                            {(data?.curr_balance * 0.01).toFixed(2)}
                          </span>
                        </div>
                        }

                        {isSuccess && (
-                          <div className="flex items-center gap-8">
-                            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          <div className="grid grid-cols-2 gap-8 my-2">
+                            <h1 className="job-label">
                              Confirmation Number
                            </h1>
-                            <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                            <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                              {data?.confirmation}
                            </span>
                          </div>
                        )}
-                      </>
-                    )}
+                      </div>
+                    )
+                  }
                </div>
              </div>
            </div>
@@ -29,10 +29,10 @@ function ThePaymentText({ value, type }) {
  return (
    <div className="my-2 flex items-center gap-5">
      <div className="card-details flex items-center gap-3">
-        <h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
+        <h1 className="text-base">
          {description} Card
        </h1>
-        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
+        <p className="text-base font-normal text-dark-gray dark:text-white tracking-wide">
          Bank **************{digits}
        </p>
      </div>
@@ -46,14 +46,14 @@ function ThePaymentText({ value, type }) {
 */
 function AmountSection({ currency, amount, country }) {
  const formattedAmount = (+amount * 0.01)?.toFixed(2);
-  const gapClassName = country === "US" ? "gap-14" : "gap-4";

  return (
-    <div className={`flex items-center ${gapClassName}`}>
-      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+    <div className={`flex items-center gap-8`}>
+      {/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
+      <h1 className="min-w-[150px] job-label">
        Amount({currency})
      </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
        {formattedAmount}
      </span>
    </div>
@@ -66,14 +66,13 @@ function AmountSection({ currency, amount, country }) {
 */
 function TransactionFeeSection({ currency, fee, country }) {
  const formattedFee = (+fee).toFixed(2);
-  const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";

  return (
-    <div className={`flex items-center border-b border-gray-600 ${gapClass}`}>
-      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+    <div className={`flex items-center gap-8 border-b border-gray-600`}>
+      <h1 className="min-w-[150px] job-label">
        Transaction Fee
      </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
        {formattedFee}
      </span>
    </div>
@@ -89,14 +88,12 @@ function TotalSection({ currency, amount, fee, country }) {
  const total = Number(amount) + Number(fee);
  const formattedTotal = (total * 0.01)?.toFixed(2);

-  const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
-
  return (
-    <div className={`flex items-center ${gap}`}>
-      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+    <div className={`flex items-center gap-8`}>
+      <h1 className="min-w-[150px] job-label">
        Total
      </h1>
-      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
        {formattedTotal}
      </span>
    </div>
@@ -384,7 +381,7 @@ function ConfirmAddFund({
                      <div className="flex items-center gap-8">
                        <label
                          htmlFor="payment"
-                          className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
+                          className="min-w-[150px] job-label"
                        >
                          Payment Method
                        </label>
@@ -397,17 +394,14 @@ function ConfirmAddFund({
                      </div>
                    )}
                    <div
-                      className={`${
-                        __confirmCountry === "US"
-                          ? "gap-[3.7rem]"
-                          : "gap-[1.81rem]"
-                      } flex items-center`}
+                      className={`gap-8 flex items-center`}
                    >
-                      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      <h1 className="min-w-[150px] job-label">
                        Reference No
                      </h1>
-                      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
-                        {__confirmData?.credit_reference}
+                      <span className="text-base font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+                        {/* Displays only half of the string */}
+                        {__confirmData?.credit_reference.slice(0, (Math.floor(__confirmData?.credit_reference.length/2)))}
                      </span>
                    </div>
                  </div>
@@ -58,13 +58,12 @@ function ConfirmNairaWithdraw({
      .sendMoney(reqData)
      .then((res) => {
        if (res.data.internal_return < 0) {
-          // if (res.data?.status_message?.toLowerCase().includes("limit")) {
-          //   setRequestStatus({
-          //     message: ,
-          //     loading: false,
-          //     status: false,
-          //   });
-          // }
+          setRequestStatus({
+            message: 'Unable to complete, try again',
+            loading: false,
+            status: false,
+          });
+
          return setTimeout(() => {
            setRequestStatus({
              message: "",
@@ -79,19 +78,19 @@ function ConfirmNairaWithdraw({
          }, 5000);
        }

+        setRequestStatus({
+          message: "Withdrawal sucessful",
+          loading: false,
+          status: true,
+        });
+        setShowCompleteNairaWithdraw({
+          show: true,
+          load: false,
+          state: res.data,
+        });
        setTimeout(() => {
-          setRequestStatus({
-            message: "",
-            loading: false,
-            status: false,
-          });
-          setShowCompleteNairaWithdraw({
-            show: true,
-            load: false,
-            state: res.data,
-          });
+          dispatch(tableReload({ type: "WALLETTABLE" }));
        }, 5000);
-        dispatch(tableReload({ type: "WALLETTABLE" }));
        return;
      })
      .catch((error) => {
@@ -105,7 +104,7 @@ function ConfirmNairaWithdraw({

  return (
    <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="logout-modal-wrapper w-[90%] md:w-[768px] 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">
@@ -381,23 +380,23 @@ function ConfirmNairaWithdraw({
          {!completeNairaWithdraw.load && (
            <>
              <p
-                className={`text-base ${
-                  requestStatus.status ? "text-green-500" : "text-red-500"
-                } px-4 md:px-8 py-4 h-5`}
+                className={`text-lg text-center font-bold ${
+                  requestStatus.status ? "text-emerald-600" : "text-red-500"
+                } px-4 md:px-8 py-4`}
              >
                {requestStatus.message && requestStatus.message}
              </p>
              <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">
-                  {!completeNairaWithdraw.show && (
-                    <button
-                      type="button"
-                      onClick={action}
-                      className="custom-btn bg-[#f5a430] text-black text-base"
-                    >
-                      Cancel
-                    </button>
-                  )}
+
+                  <button
+                    type="button"
+                    onClick={action}
+                    className="custom-btn bg-[#f5a430] text-black text-base"
+                  >
+                    Cancel
+                  </button>
+

                  <button
                    onClick={
@@ -4,6 +4,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AddFundPop from "./AddFundPop";
 import CompleteConfirmCredit from "./CompleteConfirmCredit";
 import ConfirmAddFund from "./ConfirmAddFund";
+import CustomTimer from "../../countdown/CustomTimer";

 const CreditPopup = ({ details, onClose, situation, walletItem }) => {
  const [input, setInput] = useState("");
@@ -35,7 +36,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
      situation={situation}
      className="assign-task-popup"
    >
-      <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-wrapper w-[90%] md:w-[768px] 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
@@ -71,7 +72,13 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
        <div className="w-full">
          {confirmCredit?.show?.acceptConfirm?.loader ? (
            <div className="h-[32rem] flex items-center justify-center">
-              <LoadingSpinner size="12" color="sky-blue" />
+              <div className="h-[32rem] flex flex-col items-center justify-center gap-4">
+                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Processing payment</p>
+                <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Please do not refresh</p>
+                <LoadingSpinner size="6" color="sky-blue" height='h-20' />
+                {/* <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Timer countdown</p> */}
+                <CustomTimer className="text-lg text-center md:text-2xl text-emerald-600 tracking-wide font-bold" />
+              </div>
            </div>
          ) : (
            <>
@@ -290,7 +290,7 @@ function NairaWithdraw({

  return (
    <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="logout-modal-wrapper w-[90%] md:w-[768px] 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">
@@ -330,13 +330,13 @@ function NairaWithdraw({
                  <Form className="transfer-fund-info">
                    <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
                      {/* Amount Form */}
-                      <div className="flex flex-col">
+                      <div className="flex flex-col gap-2">
                        <div className="field w-full">
                          <InputCom
                            fieldClass="px-4 text-end"
-                            parentClass="flex items-center gap-1 justify-between"
-                            labelClass="flex-[0.4] mb-0"
-                            inputClass="flex-[0.6] max-w-[12rem]"
+                            parentClass="flex items-center gap-1"
+                            labelClass="flex-[0.2] mb-0"
+                            inputClass="flex-[0.8] max-w-[12rem]"
                            label="Amount:"
                            type="number"
                            name="amount"
@@ -352,10 +352,10 @@ function NairaWithdraw({

                        <div className="field w-full">
                          <InputCom
-                            fieldClass="px-4 transfer-field"
-                            parentClass="flex items-center gap-1 justify-between"
+                            fieldClass="px-4"
+                            parentClass="flex items-center gap-1"
                            labelClass="flex-[0.2] mb-0"
-                            inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                            inputClass="flex-[0.8] max-w-[12rem]"
                            label="Fee:"
                            type="text"
                            name="fee"
@@ -371,10 +371,10 @@ function NairaWithdraw({

                        <div className="field w-full">
                          <InputCom
-                            fieldClass="px-4 transfer-field"
-                            parentClass="flex items-center gap-1 justify-between"
+                            fieldClass="px-4"
+                            parentClass="flex items-center gap-1"
                            labelClass="flex-[0.2] mb-0"
-                            inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                            inputClass="flex-[0.8] max-w-[12rem]"
                            label="Total:"
                            type="text"
                            name="total"
@@ -414,7 +414,7 @@ function NairaWithdraw({
                          <label
                            onClick={() => setTab("previous")}
                            htmlFor="previous"
-                            className="cursor-pointer flex items-center gap-1"
+                            className="cursor-pointer flex items-center gap-1 text-dark-gray dark:text-white"
                          >
                            <input
                              type="radio"
@@ -431,7 +431,7 @@ function NairaWithdraw({
                          <label
                            onClick={() => setTab("new")}
                            htmlFor="new"
-                            className={`cursor-pointer flex items-center gap-1 ${
+                            className={`cursor-pointer flex items-center gap-1 text-dark-gray dark:text-white ${
                              recipients.data.length >= MaxNoOfBanks
                                ? "pointer-events-none"
                                : ""
@@ -545,7 +545,7 @@ function NairaWithdraw({
                              <LoadingSpinner size="10" color="sky-blue" />
                            </div>
                          ) : recipients.data.length < MaxNoOfBanks ? (
-                            <div className="w-full mt-3 rounded-md bg-slate-100">
+                            <div className="w-full mt-3 rounded-md bg-slate-100 dark:bg-dark-white">
                              <div className="relative fields w-full flex flex-col p-4">
                                <div className="flex flex-[2] min-h-[52px]">
                                  {/* country */}
@@ -557,7 +557,7 @@ function NairaWithdraw({
                                      Country{" "}
                                      <span className="text-red-500">*</span>
                                    </label>
-                                    <div className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
+                                    <div className="w-full text-base p-2 text-dark-gray bg-white dark:bg-[#11131F] dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
                                      <span className="text-slate-500 text-lg italic">
                                        {wallet.walletCountry[0]?.country}
                                      </span>
@@ -619,7 +619,7 @@ function NairaWithdraw({
                                      <span className="text-red-500">*</span>
                                    </label>
                                    <select
-                                      className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
+                                      className="w-full text-base p-2 bg-white dark:bg-[#11131F] text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
                                      name="newAccount.bank"
                                      value={props.values.newAccount?.bank}
                                      onChange={props.handleChange}
@@ -698,7 +698,7 @@ function NairaWithdraw({
                                      Type <span className="text-red-500">*</span>
                                    </label>
                                    <select
-                                      className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
+                                      className="w-full text-base p-2 text-dark-gray bg-white dark:bg-[#11131F] dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
                                      name="newAccount.accountType"
                                      value={props.values.newAccount?.accountType}
                                      onChange={props.handleChange}
@@ -23,14 +23,14 @@ function WalletAction({ walletItem, payment, openPopUp }) {
          }}
          className={`${
            walletItem.code != "NAIRA" && "invisible"
-          } custom-btn btn-gradient text-white`}
+          } logout-btn btn-gradient text-white`}
        >
          Spend
        </button>
      </div>
      <div className="w-1/2 flex justify-center items-center">
        <button
-          className="custom-btn btn-gradient text-white"
+          className="logout-btn btn-gradient text-white"
          onClick={() => {
            openPopUp({
              payment: payment,
@@ -81,7 +81,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
              walletItem.escrow * 0.01,
              walletItem.code,
              undefined,
-              "text-[2rem]"
+              "text-[1.5rem]"
            )}
          </span>
        </p>
@@ -54,8 +54,8 @@ export default function Layout({ children }) {

  return (
    <>
-      <div className="nft-main-wrapper-layout w-full mx-auto">
-        <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
+      <div className="nft-main-wrapper-layout container mx-auto">
+        <div className={`relative nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
          {/* sidebar */}
          <div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>
            <Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
@@ -73,7 +73,7 @@ export default function Layout({ children }) {
              <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
            </div>
            {/* container */}
-            <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
+            <div className="nft-container container mx-auto 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
              <div className="flex-[80%] w-full">
                {children && children}
              </div>
@@ -53,7 +53,7 @@ export default function MediaLayout({backpath, title, children }) {

    return (
        <>
-            <div className="nft-main-wrapper-layout media">
+            <div className="nft-main-wrapper-layout media container mx-auto">
                <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
                    {/* sidebar */}
                    {/*<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>*/}
@@ -72,7 +72,7 @@ export default function MediaLayout({backpath, title, children }) {
                            <MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
                        </div>
                        {/* container */}
-                        <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
+                        <div className="nft-container container mx-auto 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
                            <div className="nft-main-container_media flex-[100%] w-full">
                                {children && children}
                            </div>
@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react'
+
+export default function CustomTimer({className='text-emerald-500'}) {
+
+    const [time, setTime] = useState(Number(process.env.REACT_APP_CUSTOMTIMER))
+
+    useEffect(()=>{
+        const timer = setInterval(()=>{
+            setTime(prev => prev - 1)
+        },1000)
+        return ()=>{
+            clearInterval(timer)
+        }
+    },[])
+
+    let minutes = time == 0 ? 0 : Math.floor(time/60)
+    let seconds = time == 0 ? 0 :time - (minutes * 60)
+
+  return (
+    <p className={`w-full text-base text-emerald-500 ${className}`}>
+        {`${minutes > 9 ? minutes : '0'+minutes} : ${seconds > 9 ? seconds : '0'+seconds}`}
+    </p>
+  )
+}
@@ -247,101 +247,101 @@ export default function FamGames() {
        <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
            <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
            
-            <div className="mb-4 w-full h-screen max-h-[600px]">
-              <Suspense fallback={<Fallback />}>
-                <Iframe 
-                  src={process.env.REACT_APP_FAM_GAME_LINK}
-                  title='Games'
-                />
-              </Suspense>
+              <div className="mb-4 w-full h-screen max-h-[650px]">
+                <Suspense fallback={<Fallback />}>
+                  <Iframe 
+                    src={process.env.REACT_APP_FAM_GAME_LINK}
+                    title='Games'
+                  />
+                </Suspense>
+              </div>
+
+              <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
+                  <div className="w-full flex flex-col justify-between">
+                      <div className="w-full h-30">
+                        <div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
+                          {/* <p className="w-full text-base text-right text-sky-blue">
+                          {props?.details && props.details.job_to}
+                          </p>
+                          <div className="text-base tracking-wide">
+                              <p className="font-semibold text-black dark:text-white tracking-wider">
+                                  Description:{" "}
+                              </p>
+                              <p className="p-2 ml-8 border-b border-sky-blue">
+                                  {props?.details && props.details.description}
+                              </p>
+                          </div>
+                          <div className="mt-6 w-full lg:flex gap-8">
+                              <div className="w-full text-base tracking-wide">
+                                  <p className="font-semibold text-black dark:text-white tracking-wider">
+                                      Delivery Detail:{" "}
+                                  </p>
+                                  <p className="p-2 ml-8">
+                                      {props?.details && props.details.job_description}
+                                  </p>
+                              </div>
+                              <div className="my-2 lg:my-0">
+                                  <IndexJobActions details={props.details} />
+                              </div>
+                          </div> */}
+                      </div>
+                  </div>
+
+                  {/* job details */}
+                  <div className="w-full md:w-[200px] h-20">
+                      {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
+                      {/* {passDue ? (
+                          <div className="my-1">
+                              <p className="text-base text-slate-700">
+                                  <span className="font-semibold">Due: </span>
+                                  {props?.details && props.details.delivery_date.split(" ")[0]}
+                              </p>
+                              {props?.delivery_date && (
+                                  <p className="py-2 text-base text-slate-700">
+                                  {props.details.delivery_date.split(" ")[1]}
+                                  </p>
+                              )}
+                          </div>
+                      ) : (
+                          <div className="my-1 flex items-start gap-3">
+                              <p className="font-semibold">Due: </p>
+                              <div className="flex flex-col justify-between">
+                                  <p className="text-base text-slate-700 tracking-wide">
+                                  <CountDown
+                                      lastDate={props?.details && props.details.delivery_date}
+                                  />
+                                  </p>
+                                  <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
+                                  <span>Hrs</span>
+                                  <span>Min</span>
+                                  <span>Sec</span>
+                                  </div>
+                              </div>
+                          </div>
+                      )} */}
+
+                      {/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                          <span className="font-semibold text-black dark:text-white">
+                          Reward:{" "}
+                          </span>
+                          <span className="">{thePrice}</span>
+                      </div>
+
+                      <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+                          <span className="font-semibold text-black dark:text-white">
+                          Duration:{" "}
+                          </span>
+                          <span className="">
+                          {props.details?.timeline_days && props.details.timeline_days}{" "}
+                          day(s)
+                          </span>
+                      </div> */}
+                  </div>
+                  {/* end of job details */}
+              </div>
            </div>

-            <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
-                <div className="w-full flex flex-col justify-between">
-                    <div className="w-full h-30">
-                      <div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
-                        {/* <p className="w-full text-base text-right text-sky-blue">
-                        {props?.details && props.details.job_to}
-                        </p>
-                        <div className="text-base tracking-wide">
-                            <p className="font-semibold text-black dark:text-white tracking-wider">
-                                Description:{" "}
-                            </p>
-                            <p className="p-2 ml-8 border-b border-sky-blue">
-                                {props?.details && props.details.description}
-                            </p>
-                        </div>
-                        <div className="mt-6 w-full lg:flex gap-8">
-                            <div className="w-full text-base tracking-wide">
-                                <p className="font-semibold text-black dark:text-white tracking-wider">
-                                    Delivery Detail:{" "}
-                                </p>
-                                <p className="p-2 ml-8">
-                                    {props?.details && props.details.job_description}
-                                </p>
-                            </div>
-                            <div className="my-2 lg:my-0">
-                                <IndexJobActions details={props.details} />
-                            </div>
-                        </div> */}
-                    </div>
-                </div>
-
-                {/* job details */}
-                <div className="w-full md:w-[200px] h-20">
-                    {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
-                    {/* {passDue ? (
-                        <div className="my-1">
-                            <p className="text-base text-slate-700">
-                                <span className="font-semibold">Due: </span>
-                                {props?.details && props.details.delivery_date.split(" ")[0]}
-                            </p>
-                            {props?.delivery_date && (
-                                <p className="py-2 text-base text-slate-700">
-                                {props.details.delivery_date.split(" ")[1]}
-                                </p>
-                            )}
-                        </div>
-                    ) : (
-                        <div className="my-1 flex items-start gap-3">
-                            <p className="font-semibold">Due: </p>
-                            <div className="flex flex-col justify-between">
-                                <p className="text-base text-slate-700 tracking-wide">
-                                <CountDown
-                                    lastDate={props?.details && props.details.delivery_date}
-                                />
-                                </p>
-                                <div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
-                                <span>Hrs</span>
-                                <span>Min</span>
-                                <span>Sec</span>
-                                </div>
-                            </div>
-                        </div>
-                    )} */}
-
-                    {/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
-                        <span className="font-semibold text-black dark:text-white">
-                        Reward:{" "}
-                        </span>
-                        <span className="">{thePrice}</span>
-                    </div>
-
-                    <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
-                        <span className="font-semibold text-black dark:text-white">
-                        Duration:{" "}
-                        </span>
-                        <span className="">
-                        {props.details?.timeline_days && props.details.timeline_days}{" "}
-                        day(s)
-                        </span>
-                    </div> */}
-                </div>
-                {/* end of job details */}
-            </div>
-            </div>
-
-            <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
+            <div className="w-full lg:w-1/6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
                {/* TEXTAREA SECTION */}
                <div className="w-full mb-3 hidden">
                    <div className="w-full">
@@ -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>
  );
@@ -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>
  );
@@ -226,11 +226,19 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
              {requestStatus.loading && requestStatus.trigger == "offer" ? (
                <LoadingSpinner size={8} color="sky-blue" />
              ) : (
-                <button
+                // <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="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"
+                  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"
                >
                  I am ready to start
                </button>
@@ -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 */
Author	SHA1	Message	Date
victorAnumudu	e4aadfb627	reduced reference number	2024-04-05 11:25:12 +01:00
ameye	6a79c3e56f	Merge branch 'timer-countdown' of WrenchBoard/Users-Wrench into master	2024-04-04 20:13:17 +00:00
victorAnumudu	81707c7bd8	payment count down timer added	2024-04-04 20:41:57 +01:00
victorAnumudu	e5b36e3f45	added count down timer	2024-04-04 20:33:49 +01:00
ameye	6f2fc17090	Merge branch 'wallet-page-btn' of WrenchBoard/Users-Wrench into master	2024-04-04 15:19:31 +00:00
victorAnumudu	e6392bc433	adjusted wallet btn size	2024-04-04 15:25:50 +01:00
victorAnumudu	f8e14fe6a0	initial commit	2024-04-04 14:09:53 +01:00
ameye	91a42cfe9d	Merge branch 'interest-btn' of WrenchBoard/Users-Wrench into master	2024-04-04 10:51:33 +00:00
victorAnumudu	3128a77b46	interest button style changed	2024-04-04 11:36:06 +01:00
ameye	d7d67e4763	Merge branch 'offer-code-removal' of WrenchBoard/Users-Wrench into master	2024-04-03 21:49:54 +00:00
victorAnumudu	388e49467e	removed contract code display	2024-04-03 20:08:27 +01:00
ameye	043718837d	Merge branch 'button-style-change' of WrenchBoard/Users-Wrench into master	2024-04-03 10:22:29 +00:00
ameye	d0e2ba0aa3	Merge branch 'modal-footer-class' of WrenchBoard/Users-Wrench into master	2024-04-03 10:22:23 +00:00
victorAnumudu	a1dc72e5b0	added modal footer class to edit job modal	2024-04-03 10:35:59 +01:00
victorAnumudu	2ab1c960c7	accept btn style changed	2024-04-03 10:06:49 +01:00
ameye	25734882cb	Merge branch 'dummy-game-layout' of WrenchBoard/Users-Wrench into master	2024-04-02 19:20:42 +00:00