From e5c511bd8fa1a27baf904d007b51e0dd3ba7b93b Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Sun, 21 Jul 2024 15:39:09 +0100
Subject: [PATCH] previous stats style adjusted

---
 .../MarketPlace/PopUp/MarketPopUp.jsx           | 16 ++++++++--------
 .../OffersInterest/ManageInterestOffer.jsx      | 17 ++++++++++-------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
index 1a019dc..7dd94a2 100644
--- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx
+++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
@@ -142,8 +142,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
           <CloseIcon onClose={onClose} />
         </div>
 
-        <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="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]">
               <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                 {details?.title}
@@ -175,8 +175,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   <div
                     className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop ${
                       name == "Description"
-                        ? "max-h-22 h-full overflow-y-auto break-words"
-                        : name == "Delivery Detail" ? " overflow-y-auto h-full max-h-22"
+                        ? "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]"
                         : "h-full flex items-center"
                     }`}
                   >
@@ -214,7 +214,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 </div>
               ))}
             </div>
-            <hr />
+            <hr className='my-1' />
             <div className="w-full flex flex-col gap-3">
               <div className="w-full">
                 <label className="job-label w-full">
@@ -251,8 +251,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             </div>
           </div>
 
-          <div className="w-full md:w-[23%] h-full flex flex-col">
-            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md md:min-h-[420px] flex flex-col justify-between">
+          <div className="py-2 w-full md:col-span-1 h-full flex flex-col">
+            <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">
                   Interested?
@@ -264,7 +264,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   onClick={ManageInterest}
                 >
                   {" "}
-                  <div className="w-full flex flex-col justify-between gap-2">
+                  <div className="flex md:flex-col justify-center gap-2">
                     <span>Notify</span>
                     <span>Owner</span>
                   </div>
diff --git a/src/components/OffersInterest/ManageInterestOffer.jsx b/src/components/OffersInterest/ManageInterestOffer.jsx
index f70062d..3895b35 100644
--- a/src/components/OffersInterest/ManageInterestOffer.jsx
+++ b/src/components/OffersInterest/ManageInterestOffer.jsx
@@ -248,32 +248,35 @@ export default function ManageInterestOffer(props) {
                                             <LoadingSpinner color='sky-blue' size='10' height='min-h-[40px]' />
                                             :
                                             <>
-                                                <div className='flex flex-col md:flex-row gap-4 justify-center items-center max-w-xl'>
+                                                <div className='w-full'>
+                                                    <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-3xl 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-dark-gray dark:text-white tracking-wide text-right">Completed:</p>
+                                                            <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-dark-gray dark:text-white tracking-wide text-right">Active:</p>
+                                                            <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-dark-gray dark:text-white tracking-wide text-right">% Completion:</p>
+                                                            <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-dark-gray dark:text-white tracking-wide text-right">Last Completed:</p>
+                                                            <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>
                                                         <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-dark-gray dark:text-white tracking-wide text-right">Uncompleted:</p>
+                                                            <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-dark-gray dark:text-white tracking-wide text-right">Pending Offers:</p>
+                                                            <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>
-- 
2.34.1