WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

market popout design changed #868

Merged
ameye merged 1 commits from market-popout-design into master 2025-07-17 20:03:45 +00:00
Conversation 0 Commits 1 Files Changed 2
+84 -93
2 changed files with 84 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MarketPlace/PopUp/LockJob.jsx
+2
View File
@@ -57,6 +57,7 @@ export default function LockJob({
</div>
) : (
<>
<div className='md:grid md:grid-cols-4'>
<div className="px-4 py-2 w-full md:col-span-3 md:border-r-1">
<div className="min-h-[200px]">
<h2 className="w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-white tracking-wide">
@@ -277,6 +278,7 @@ export default function LockJob({
</div>
</div>
</div>
</div>
</>
)}
</>
src/components/MarketPlace/PopUp/MarketPopUp.jsx
+82 -93
View File
@@ -145,7 +145,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
<CloseIcon onClose={onClose} />
</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="bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
{details?.offer_depend_uid ?
<LockJob
marketPlaceProduct={marketPlaceProduct}
@@ -160,7 +160,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
/>
:
<>
<div className="px-4 py-2 w-full md:col-span-3 md:border-r-1">
<div className="px-4 py-2 w-full">
<div className="min-h-[300px]">
<h2 className="w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-white tracking-wide">
{details?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
@@ -186,12 +186,12 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
danger: true,
},
].map(({ name, content, danger }, idx) => (
<div className={`my-3 md:flex items-start`} key={idx}>
<div className={`my-3 flex-col gap-1`} 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 rounded-2xl ${
className={`w-full p-2 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 bg-slate-50"
: name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[200px] max-h-[200px] bg-slate-50"
@@ -233,71 +233,65 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
))}
</div>
<hr className='my-1' />
<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 && "Failed to send"}
</span>
</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]"
<div className='w-full grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8'>
<div className='col-span-1 md:col-span-2 flex flex-col justify-center gap-2'>
<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 && "Failed to send"}
</span>
</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}
>
<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> */}
{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>
</div>
</div>
</div>
</div>
</div>
<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">
Interested?
<div className="span-1 flex flex-col justify-center mb-4 gap-2">
<p className="flex items-center tracking-wide">
<span className="job-label">Interest Count: </span> <b className="ml-1">{interestCount.length > 0 ? interestCount[0].interest_count : '0'}</b>
</p>
<hr />
{/* <hr /> */}
<button
className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
className="btn-gradient text-white p-1 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
name="market-interest"
onClick={ManageInterest}
>
@@ -307,42 +301,37 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
<span>Owner</span>
</div>
</button>
<>
{manageInt.loading ? (
<p className="text-sm italic">please wait...</p>
) : (
<>
{manageInt?.msg !== "" && (
<p
className={`text-sm italic ${
manageInt?.state ? "text-green-500" : "text-red-500"
}`}
>
{manageInt?.msg}
</p>
)}
</>
)}
</>
</div>
<div className="text-slate-900">
<p className="flex items-center tracking-wide">
<span className="job-label">Interest: </span> <b className="ml-1">{interestCount.length > 0 ? interestCount[0].interest_count : '0'}</b>
</p>
<hr />
<p className="my-1 flex flex-col">
<span className="job-label">Expire: </span>
<span> {new Date(details.expire).toLocaleString()} </span>
</p>
</div>
</div>
<div>
{manageInt.loading ? (
<p className="text-sm italic">please wait...</p>
) : (
<>
{manageInt?.msg !== "" && (
<p
className={`text-sm italic ${
manageInt?.state ? "text-green-500" : "text-red-500"
}`}
>
{manageInt?.msg}
</p>
)}
</>
)}
</div>
</div>
</>
}
</div>
<div className="modal-footer-wrapper">
<div className="modal-footer-wrapper flex justify-between gap-2 items-center">
<div className="text-slate-900">
<p className="my-1 flex flex-col">
<span className="job-label">Expire: </span>
<span> {new Date(details.expire).toLocaleString()} </span>
</p>
</div>
<button
className="custom-btn bg-transparent border border-red-500 text-red-500 ml-auto"
name="cancel"