From 3876e1440d31d30ababc1efc739f92eddeb56cee Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 22 Jul 2024 19:52:46 +0100
Subject: [PATCH] offer list btn changed, and manage offer interest page
 updated

---
 .../MarketPlace/PopUp/MarketPopUp.jsx         | 96 +++++++++++--------
 src/components/MyOffers/MyPendingJobTable.jsx | 19 +++-
 .../OffersInterest/ManageInterestOffer.jsx    | 52 +++++-----
 .../OffersInterest/OthersInterestedTable.jsx  |  4 +-
 4 files changed, 103 insertions(+), 68 deletions(-)

diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
index 7dd94a2..6ac59c8 100644
--- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx
+++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
@@ -143,8 +143,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
         </div>
 
         <div className="md:grid md:grid-cols-4 bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
-          <div className="p-4 w-full md:col-span-3 md:border-r-1">
-            <div className="min-h-[240px]">
+          <div className="px-4 py-1 w-full md:col-span-3 md:border-r-1">
+            <div className="min-h-[300px]">
               <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                 {details?.title}
               </h2>
@@ -168,15 +168,15 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   danger: true,
                 },
               ].map(({ name, content, danger }, idx) => (
-                <div className={`my-3 md:flex items-center`} key={idx}>
-                  <label className="job-label w-full md:w-[19%]">
+                <div className={`my-3 md:flex items-start`} key={idx}>
+                  <label className="py-2 job-label w-full md:w-[19%]">
                     {name}
                   </label>
                   <div
-                    className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop ${
+                    className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop rounded-2xl ${
                       name == "Description"
-                        ? "min-h-[100px] max-h-[100px] h-full overflow-y-auto break-words"
-                        : name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[100px] max-h-[100px]"
+                        ? "min-h-[150px] max-h-[150px] h-full overflow-y-auto break-words bg-slate-50"
+                        : name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[150px] max-h-[150px] bg-slate-50"
                         : "h-full flex items-center"
                     }`}
                   >
@@ -215,43 +215,63 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
               ))}
             </div>
             <hr className='my-1' />
-            <div className="w-full flex flex-col gap-3">
-              <div className="w-full">
-                <label className="job-label w-full">
-                  If you have any questions about this task:
-                </label>
-                <textarea
-                  className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
-                    marketMsg.loading && "italic text-[#9CA3AF]"
-                  } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
-                  rows="3"
-                  style={{ resize: "none" }}
-                  placeholder="Enter message here ..."
-                  value={marketMsg.loading ? "Sending..." : textValue}
-                  onChange={handleInputChange}
-                />
-              </div>
-              <div className="relative flex w-full justify-end ">
-                <span className="text-sm text-[#57cd89] absolute left-[8rem] top-4">
+            <div className='w-full'>
+              <label className="job-label w-full flex gap-2 items-center">
+                If you have any questions about this task:
+                <span className={`text-sm ${marketMsg.state ? 'text-[#57cd89]' : 'text-red-500'}`}>
                   {marketMsg.state && "Message Sent!"}
-                  {errMsg.market && "Something went wrong"}
+                  {errMsg.market && "Failed to send"}
                 </span>
-                <button
-                  className="custom-btn self-end bg-yellow-500 text-white"
-                  name="market-message"
-                  onClick={MarketDetail}
-                >
-                  {marketMsg.loading ? (
-                    <LoadingSpinner size={5} color="white" />
-                  ) : (
-                    "Send Message"
-                  )}
-                </button>
+              </label>
+              <div className="w-full flex items-center gap-3">
+                <div className="w-full">
+                  <textarea
+                    className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
+                      marketMsg.loading && "italic text-[#9CA3AF]"
+                    } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
+                    rows="3"
+                    style={{ resize: "none" }}
+                    placeholder="Enter message here ..."
+                    value={marketMsg.loading ? "Sending..." : textValue}
+                    onChange={handleInputChange}
+                  />
+                </div>
+                <div className="relative flex flex-col">
+                  <button
+                    className="rounded-full flex justify-center items-center w-12 h-11 bg-yellow-500 text-white"
+                    name="market-message"
+                    onClick={MarketDetail}
+                    disabled={marketMsg.loading}
+                  >
+                    {marketMsg.loading ? (
+                      <LoadingSpinner size={5} color="white" />
+                    ) : (
+                      // "Send Message"
+                      <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 11 20"
+                      id="Arrow"
+                      className="w-[0.7rem]"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                        // fill=""
+                        className="color000000 svgShape fill-[#fff]"
+                      ></path>
+                    </svg>
+                    )}
+                  </button>
+                  {/* <span className="text-sm text-[#57cd89]">
+                    {marketMsg.state && "Sent!"}
+                    {errMsg.market && "Failed"}
+                  </span> */}
+                </div>
               </div>
             </div>
           </div>
 
-          <div className="py-2 w-full md:col-span-1 h-full flex flex-col">
+          <div className="py-2 w-full md:col-span-1 h-full flex flex-col rounded-2xl">
             <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
               <div className="w-full flex flex-col justify-center pb-4 gap-2">
                 <p className="job-label w-full">
diff --git a/src/components/MyOffers/MyPendingJobTable.jsx b/src/components/MyOffers/MyPendingJobTable.jsx
index 035ca40..cf27f9e 100644
--- a/src/components/MyOffers/MyPendingJobTable.jsx
+++ b/src/components/MyOffers/MyPendingJobTable.jsx
@@ -107,11 +107,22 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                               onClick={() => {
                                 setJobPopout({ show: true, data: value });
                               }}
-                              className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                              className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                             >
-                              {value.owner_status == "OWNER"
-                                ? "Manage"
-                                : "View"}
+                              {/* {value.owner_status == "OWNER" ? "Manage": "View"} */}
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 11 20"
+                                id="Arrow"
+                                className="w-[0.7rem]"
+                              >
+                                <path
+                                  fillRule="evenodd"
+                                  d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                  // fill=""
+                                  className="color000000 svgShape fill-[#fff]"
+                                ></path>
+                              </svg>
                             </button>
                           </td>
                         </tr>
diff --git a/src/components/OffersInterest/ManageInterestOffer.jsx b/src/components/OffersInterest/ManageInterestOffer.jsx
index e91da39..1c29206 100644
--- a/src/components/OffersInterest/ManageInterestOffer.jsx
+++ b/src/components/OffersInterest/ManageInterestOffer.jsx
@@ -165,7 +165,7 @@ export default function ManageInterestOffer(props) {
 
                     {/* manage offer section */}
                     <div className="w-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
-                        <div className="my-2 w-full sm:grid gap-5 grid-cols-4">
+                        <div className="my-2 w-full md:grid gap-5 grid-cols-4">
                             {/* Detail section */}
                             <div className="w-full mb-5 lg:mb-0 col-span-3">
                                 <div className="w-full flex justify-start space-x-3 items-center">
@@ -232,14 +232,18 @@ export default function ManageInterestOffer(props) {
                                     <div className="info-details w-full border-t">
                                         <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">
-                                                <p className="w-[200px] text-lg font-bold text-black dark:text-white tracking-wide">Name</p>
-                                                <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</p>
+                                                <p className="text-xl font-extrabold text-black dark:text-white tracking-wide">
+                                                    Name : {' '}
+                                                    <span className="text-lg font-normal text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
+                                                </p>
                                             </div>
                                             <div className="my-3 md:my-0 flex items-center gap-1">
-                                                <p className="w-[200px] text-lg font-bold text-black dark:text-white tracking-wide">Member Since</p>
-                                                <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">
-                                                    {clientAdded.getFullYear()}{" - "}
-                                                    {clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
+                                                <p className="text-xl font-extrabold text-black dark:text-white tracking-wide">
+                                                    Member Since : {' '}
+                                                    <span className="text-lg font-normal text-dark-gray dark:text-white tracking-wide">
+                                                        {clientAdded.getFullYear()}{" - "}
+                                                        {clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
+                                                    </span>
                                                 </p>
                                             </div>
                                         </div>
@@ -248,35 +252,35 @@ export default function ManageInterestOffer(props) {
                                             <LoadingSpinner color='sky-blue' size='10' height='min-h-[40px]' />
                                             :
                                             <>
-                                                <div className='w-full'>
+                                                <div className='w-full my-3 md:my-0'>
                                                     <h1 className="text-xl font-extrabold text-black dark:text-white tracking-wide">Previous Job Statistics</h1>
                                                 </div>
-                                                <div className='p-2 flex flex-col md:flex-row gap-4 justify-center items-center max-w-xl rounded-2xl bg-sky-100'>
+                                                <div className='p-2 w-full md:max-w-xl flex flex-col md:flex-row gap-4 justify-center items-center rounded-2xl bg-sky-100'>
                                                     <div className='contents md:flex flex-col gap-3'>
-                                                        <div className='flex items-center gap-4'>  
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Completed:</p>
+                                                        <div className='flex items-center gap-1'>  
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Completed :</p>
                                                             <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</p>
                                                         </div>
-                                                        <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Active:</p>
+                                                        <div className="flex items-center gap-1">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Active :</p>
                                                             <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</p>
                                                         </div>
-                                                        <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">% Completion:</p>
+                                                        <div className="flex items-center gap-1">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">% Completion :</p>
                                                             <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</p>
                                                         </div>
                                                     </div>
                                                     <div className='contents md:flex flex-col gap-3'>
-                                                        <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Last Completed:</p>
-                                                            <p className="min-w-[150px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
+                                                        <div className="flex items-center gap-1">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Last Completed :</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
                                                         </div>
-                                                        <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Uncompleted:</p>
+                                                        <div className="flex items-center gap-1">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Uncompleted :</p>
                                                             <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</p>
                                                         </div>
-                                                        <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Pending Offers:</p>
+                                                        <div className="flex items-center gap-1">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Pending Offers :</p>
                                                             <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</p>
                                                         </div>
                                                     </div>
@@ -392,7 +396,7 @@ export default function ManageInterestOffer(props) {
 
                             <div className="p-4 w-full min-h-full bg-sky-100 rounded-2xl dark:bg-dark-gray col-span-1">
                                 {/* Wallet balance and reward */}
-                                <div className='mb-4 border-b-2 flex flex-col justify-center items-center gap-4'>
+                                <div className='mb-4 border-b-2 flex flex-col xxs:flex-row md:flex-col justify-center items-center gap-4'>
                                     <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
                                         <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Wallet:</p>
                                         <span className="font-medium text-dark-gray dark:text-white">{ walletDetails?.loading ? 'loading...' : PriceFormatter(walletBal[0]?.amount * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
@@ -404,7 +408,7 @@ export default function ManageInterestOffer(props) {
                                 </div>
                                 {/* BUTTON section */}
                                 <div className="w-full">
-                                    <div className="h-full flex sm:flex-col justify-center items-center gap-10">
+                                    <div className="h-full flex flex-col xxs:flex-row md:flex-col justify-center items-center gap-10">
                                         {requestStatus.loading && requestStatus.processType == 'accept' ?
                                             <LoadingSpinner color='sky-blue' size='10' />
                                         :    
diff --git a/src/components/OffersInterest/OthersInterestedTable.jsx b/src/components/OffersInterest/OthersInterestedTable.jsx
index dcc0e2a..59faf8e 100644
--- a/src/components/OffersInterest/OthersInterestedTable.jsx
+++ b/src/components/OffersInterest/OthersInterestedTable.jsx
@@ -65,11 +65,11 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                                 <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="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                            <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                                 <img
                                                     src={image}
                                                     alt="data"
-                                                    className="w-full h-full"
+                                                    className="w-full h-full rounded-full"
                                                 />
                                             </div>
                                             <div className="flex flex-col">