.

src/components/AddJob/AddJob.jsx

@@ -127,7 +127,6 @@ function AddJob({ popUpHandler, categories }) {
     getUserCountry();
   }, []);
 
-  console.log("This is for AddJob >>", categories);
 
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">

src/components/Helpers/SelectBox/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import useToggle from "../../../hooks/useToggle";
 
-function SelectBox({ datas = [], className, action, contentBodyClasses }) {
+function SelectBox({ datas = [], className, action, contentBodyClasses, position }) {
   const [item, setItem] = useState(datas[0]);
   // custom hook
   const [toggle, setToggle] = useToggle(false);
@@ -49,7 +49,7 @@ function SelectBox({ datas = [], className, action, contentBodyClasses }) {
 
           <div
             style={{ boxShadow: "0px 4px 87px 0px #0000002B" }}
-            className={`drop-down-content w-[120px] bg-white dark:bg-dark-white   rounded-[4px] p-3 absolute right-0 top-[100%] z-20 ${
+            className={`drop-down-content w-[120px] bg-white dark:bg-dark-white   rounded-[4px] p-3 absolute ${position =='left' ? 'left-0' : 'right-0'} top-[100%] z-20 ${
               toggle ? "active" : ""
             } ${contentBodyClasses || ""}`}
           >

src/components/MarketPlace/MainSection.jsx

@@ -3,6 +3,7 @@ import DataIteration from "../Helpers/DataIteration";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";
 import ListView from '../../assets/images/list-view.png'
 import GridView from '../../assets/images/grid-view.svg'
+import SelectBox from "../Helpers/SelectBox";
 
 export default function MainSection({
   className,
@@ -27,6 +28,16 @@ export default function MainSection({
   const tabHandler = (value) => {
     setTab(value);
   };
+
+   // Handles the category selection on mobile view
+   const handleSetCategory = (value) => {
+    for (let i in marketCategories) {
+      if (marketCategories[i] == value) {
+        setTab(i);
+      }
+    }
+  };
+
   useEffect(() => {
     if (tab === "All") {
       setProducts(marketPlaceProduct);
@@ -41,21 +52,9 @@ export default function MainSection({
   return (
     <div className={`market-place-section w-full ${className || ""}`}>
       <div className="market-place-wrapper w-full">
-        {/* contentDisplay toggler */}
-        <div className="w-full flex items-center justify-end">
-          <div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
-              <img 
-                title={contentDisplay=='grid'? 'list view' : 'grid view'}
-                onClick={()=>setContentDisplay((prev)=>prev=='grid'? 'list' : 'grid')}
-                src={contentDisplay=='grid'? ListView : GridView}
-                className="w-full h-full cursor-pointer" alt="view" 
-              />
-          </div>
-        </div>
-        {/* end of contentDisplay toggler */}
-        <div className="filter-navigate-area lg:flex justify-between mb-8 items-center">
-          <div className="tab-item lg:mb-0 mb-5">
-            <div className="md:flex md:space-x-8 space-x-2">
+        <div className="filter-navigate-area flex justify-between items-center mb-8">
+          <div className="tab-item w-full flex items-center">
+            <div className="hidden lg:flex md:space-x-8 space-x-2">
               {mappedArray.map(({ key, value }) => (
                 <span
                 key={key}
@@ -70,16 +69,26 @@ export default function MainSection({
                 </span>
               ))}
             </div>
+            {/* market categories on screen smaller than large screen */}
+            <div className="w-[80%] lg:hidden">
+              <SelectBox
+                action={handleSetCategory}
+                datas={Object.values(marketCategories)}
+                className="Update-table-dropdown"
+                contentBodyClasses="w-auto min-w-max"
+                position='left'
+              />
+            </div>
           </div>
           {/* contentDisplay toggler */}
-          {/* <div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
+          <div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
               <img 
                 title={contentDisplay=='grid'? 'list view' : 'grid view'}
                 onClick={()=>setContentDisplay((prev)=>prev=='grid'? 'list' : 'grid')}
                 src={contentDisplay=='grid'? ListView : GridView}
                 className="w-full h-full cursor-pointer" alt="view" 
               />
-          </div> */}
+          </div>
           {/* end of contentDisplay toggler */}
         </div>
         <div className="filter-navigate-content w-full min-h-screen">

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -4,6 +4,7 @@ import { toast } from "react-toastify";
 import { Form, Formik } from "formik";
 import usersService from "../../../services/UsersService";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
   const [marketMsg, setMarketMsg] = useState({
@@ -96,14 +97,18 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
     [apiCall, details, onClose, textValue]
   );
 
-  console.log('Checking my mangeInt',manageInt)
+  let thePrice = PriceFormatter(
+    details?.price * 0.01,
+    details?.currency_code,
+    details?.currency
+  );
 
   // let addedIntDate = marketInt?.added?.split(" ")[0];
   let expireIntDate = marketInt?.expire?.split(" ")[0];
 
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper md:w-[750px] md:h-[700px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="logout-modal-wrapper md:w-[750px] md:h-[660px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px]">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {details.offer_code}
@@ -112,8 +117,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
         </div>
 
         <div className="md:flex bg-white rounded-lg">
-          <div className="p-4 w-full md:w-3/4 md:border-r-1">
-            <div className="min-h-[290px]">
+          <div className="p-4 w-full md:w-[75%] md:border-r-1">
+            <div className="min-h-[263px]">
               <h2 className="font-semibold text-slate-900 dark:text-black tracking-wide">
                 {details?.title}
               </h2>
@@ -128,7 +133,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   name: "",
                   content: {
                     text: `Timeline: ${details.timeline_days} day(s) -- `,
-                    bold: `Budget: ${details.price} naira`,
+                    bold: `Budget: ${thePrice}`,
                   },
                 },
                 {
@@ -138,7 +143,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 },
               ].map(({ name, content, danger }, idx) => (
                 <div className={`my-3 md:flex items-center`} key={idx}>
-                  <label className="w-full md:w-1/4 text-slate-900 tracking-wide font-semibold">
+                  <label className="w-full md:w-[19%] text-slate-900 tracking-wide font-semibold whitespace-pre-wrap">
                     {name}
                   </label>
                   <div
@@ -156,15 +161,19 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                         }}
                       />
                     ) : (
-                      <p className={`w-full md:w-3/4 text-slate-900`}>
+                      <p className={`w-full text-slate-900`}>
                         {name !== "Delivery Detail" ? (
                           <>
                             {typeof content !== "object" ? content : null}
                             {typeof content === "object" && (
-                              <span className="flex items-center gap-2">
-                                {content?.text}
-                                <strong>{content?.bold}</strong>
-                              </span>
+                              <>
+                                <hr className="mb-1" />
+                                <span className="flex items-center gap-2">
+                                  {content?.text}
+                                  <strong>{content?.bold}</strong>
+                                </span>
+                                <hr className="mt-1" />
+                              </>
                             )}
                           </>
                         ) : (
@@ -207,15 +216,15 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             </div>
           </div>
 
-          <div className="w-full md:w-1/4 h-full ">
-            <div className="w-[90%] mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[550px] flex flex-col justify-between">
+          <div className="w-full md:w-[23%] h-full ">
+            <div className="mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[498px] flex flex-col justify-between">
               <div className="w-full flex flex-col justify-center py-4 gap-2">
                 <p className="w-full text-slate-900 tracking-wide my-1">
                   Interested in the task?
                 </p>
                 <hr />
                 <button
-                  className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex flex-col items-center justify-center"
+                  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"
                   name="market-interest"
                   onClick={marketCalls}
                 >
@@ -251,6 +260,13 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 <p className="my-1">Expire: {expireIntDate}</p>
               </div>
             </div>
+            <button
+              className="self-end w-[150px] mt-2 h-[52px] rounded-md text-base bg-transparent border border-red-500 text-red-500 mx-auto"
+              name="cancel"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
           </div>
           {/* END OF ACTION SECTION */}
         </div>

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -143,13 +143,15 @@ export default function ManageInterestOffer(props) {
                                     {/* info tab */}
                                     {tab == 'info' ?
                                     <div className="info-details w-full border-t">
-                                        <div className="my-3 flex items-center gap-1">
-                                            <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
-                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
-                                        </div>
-                                        <div className="my-3 flex items-center gap-1">
-                                            <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
-                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
+                                        <div className="my-0 md:my-3 block md:flex items-center gap-10">
+                                            <div className="my-3 md:my-0 flex items-center gap-1">
+                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
+                                            </div>
+                                            <div className="my-3 md:my-0 flex items-center gap-1">
+                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
+                                            </div>
                                         </div>
                                         <div className="my-3 flex items-center gap-1">
                                             <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
@@ -226,7 +228,7 @@ export default function ManageInterestOffer(props) {
                             {/* BUTTON section */}
                             <div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
                                 <div className="w-full h-full">
-                                    <div className="mt-0 sm:mt-10 flex sm:flex-col justify-center items-center gap-10">
+                                    <div className="h-full flex sm:flex-col justify-center items-center gap-10">
                                         {requestStatus.loading && requestStatus.processType == 'accept' ?
                                             <LoadingSpinner color='sky-blue' size='10' />
                                         :    
@@ -235,9 +237,10 @@ export default function ManageInterestOffer(props) {
                                                 name='accept'
                                                 disabled={requestStatus.loading}
                                                 onClick={interestOfferProcess}
-                                                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                // className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                className='max-w-[150px] h-[100px] bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md shadow-md'
                                             >
-                                            Accept
+                                            Accept this Interest
                                             </button>
                                         }
 
@@ -249,9 +252,10 @@ export default function ManageInterestOffer(props) {
                                                 name='reject'
                                                 disabled={requestStatus.loading}
                                                 onClick={interestOfferProcess}
-                                                className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-black"
+                                                // className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-black"
+                                                className='max-w-[150px] h-[100px] bg-red-300 text-center text-lg font-semibold text-white py-2 px-4 rounded-md shadow-md'
                                             >
-                                            Reject
+                                            Reject this Interest
                                             </button>
                                         }
                                     </div>

src/components/jobPopout/EditJobPopout.jsx

@@ -69,6 +69,7 @@ const EditJobPopOut = ({
 
   const handleEditJob = useCallback(
     async (values) => {
+      values.category = values.category?.join("@");
       setRequestStatus({ loading: true, message: "" });
       let reqData = {
         job_id: details.job_id,