From 3c2c46e293e5f1562e51bcae9d01eef4fdb7f29a Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Thu, 21 Mar 2024 16:27:52 +0100
Subject: [PATCH] added footer style to modal

---
 .../MarketPlace/PopUp/MarketPopUp.jsx         | 22 ++++++++++---------
 .../OffersInterest/OffersInterestTable.jsx    | 14 ++++++++----
 src/index.css                                 |  2 +-
 src/views/OffersInterestPage.jsx              |  6 ++---
 4 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
index a118c9c..f364281 100644
--- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx
+++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
@@ -118,7 +118,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper w-11/12 md:w-[650px] md:h-[580px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+      <div className="w-11/12 md:w-[650px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">
           <h1 className="modal-title">
             {details.offer_code}
@@ -128,7 +128,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
         <div className="md:flex bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
           <div className="p-4 w-full md:w-[75%] md:border-r-1">
-            <div className="max-h-[240px] h-full">
+            <div className="min-h-[240px]">
               <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                 {details?.title}
               </h2>
@@ -218,7 +218,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   {errMsg.market && "Something went wrong"}
                 </span>
                 <button
-                  className="self-end w-[150px] h-[48px] rounded-full text-base bg-yellow-500 text-white"
+                  className="custom-btn self-end bg-yellow-500 text-white"
                   name="market-message"
                   onClick={MarketDetail}
                 >
@@ -279,16 +279,18 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 </p>
               </div>
             </div>
-            <button
-              className="self-center w-[150px] mt-2 h-[48px] rounded-full 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>
+        <div className="modal-footer-wrapper">
+          <button
+            className="custom-btn bg-transparent border border-red-500 text-red-500 ml-auto"
+            name="cancel"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+        </div>
       </div>
     </ModalCom>
   );
diff --git a/src/components/OffersInterest/OffersInterestTable.jsx b/src/components/OffersInterest/OffersInterestTable.jsx
index 5ebffd0..649dcf4 100644
--- a/src/components/OffersInterest/OffersInterestTable.jsx
+++ b/src/components/OffersInterest/OffersInterestTable.jsx
@@ -28,6 +28,7 @@ export default function OffersInterestTable({offerInterestList, className}) {
         handlePagingFunc(e, setCurrentPage);
     };
 
+    let imgServer = offerInterestList?.imgServer // FOR RENDERING IMAGE FROM SERVER
     return (
         <div
             className={`update-table w-full my-8 p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
@@ -54,14 +55,19 @@ export default function OffersInterestTable({offerInterestList, className}) {
                             </thead>
                             <tbody className="h-full">
                             {currentOfferInterestList?.map((item, index) => {
-                                let image = item.banner ? item.banner : 'default.jpg'
+                                // let image = item.banner ? item.banner : 'default.jpg'
+                                const image = localStorage.getItem("session_token")
+                                ? `${imgServer}${localStorage.getItem("session_token")}/job/${
+                                    item.job_uid
+                                  }`
+                                : "";
                                 return (
                                 <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                     <td className=" py-4">
                                         <div className="flex space-x-2 items-center">
-                                            <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
+                                            <div className="min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                                 <img
-                                                    src={localImgLoad(`images/taskbanners/${image}`)}
+                                                    src={`${image}`}
                                                     alt="data"
                                                     className="w-full h-full rounded-full"
                                                 />
@@ -90,7 +96,7 @@ export default function OffersInterestTable({offerInterestList, className}) {
                                         <button
                                             onClick={() => {
                                                 navigate("/manage-offer", {
-                                                    state: { ...item, pathname },
+                                                    state: { ...item, pathname, jobImage:image },
                                                 });
                                             }}
                                             type="button"
diff --git a/src/index.css b/src/index.css
index 0eafb08..7cc9438 100644
--- a/src/index.css
+++ b/src/index.css
@@ -180,7 +180,7 @@
 
   /* STYLES FOR BUTTON */
   .custom-btn {
-    @apply min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
+    @apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
   }
 }
 
diff --git a/src/views/OffersInterestPage.jsx b/src/views/OffersInterestPage.jsx
index d8b50ae..bc70271 100644
--- a/src/views/OffersInterestPage.jsx
+++ b/src/views/OffersInterestPage.jsx
@@ -10,13 +10,13 @@ export default function OffersInterestPage() {
 
     let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 
-    let [offerInterestList, setOfferInterestList] = useState({loading: true, data: []})
+    let [offerInterestList, setOfferInterestList] = useState({loading: true, data: [], imgServer:''})
 
     useEffect(()=>{
         apiCall.offersInterestList().then(res => {
-            setOfferInterestList({loading: false, data: res.data.result_list})
+            setOfferInterestList({loading: false, data: res.data.result_list, imgServer:res.data.session_image_server})
         }).catch(err => {
-            setOfferInterestList({loading: false, data: []})
+            setOfferInterestList({loading: false, data: [], imgServer:''})
             console.log('Error: ', err)
         })
     },[])