added footer style to modal

This commit was merged in pull request #664.
This commit is contained in:
victorAnumudu
2024-03-21 16:27:52 +01:00
parent 8dc634d900
commit 3c2c46e293
4 changed files with 26 additions and 18 deletions
@@ -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>
);
@@ -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"
+1 -1
View File
@@ -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
}
}
+3 -3
View File
@@ -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)
})
},[])