.

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>