TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

develop #16

Merged
TobaOjo merged 7 commits from develop into main 2025-12-12 09:25:25 +00:00
Conversation 0 Commits 7 Files Changed 15 +171 -26
11 changed files with 171 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 12cd0f9f37 - Show all commits

8
src/components/SightingModal/SightingModal.tsx
View File

@@ -83,7 +83,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
return ( return (
<> <>
<ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}> <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
<div className="max-w-screen-lg mx-auto py-4 px-2"> <div className="mx-auto py-4 px-6 overflow-y-scroll">
<div className="border-b border-gray-600 mb-4"> <div className="border-b border-gray-600 mb-4">
<h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2> <h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
</div> </div>
@@ -134,7 +134,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
{isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />} {isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
{isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />} {isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
</div> </div>
{hotlistNames && ( {hotlistNames && hotlistNames.length > 0 && (
<div className="flex flex-col border-b border-gray-600 mb-4"> <div className="flex flex-col border-b border-gray-600 mb-4">
<p className="text-gray-300">Hotlists</p> <p className="text-gray-300">Hotlists</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]"> <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]">
@@ -148,11 +148,11 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
</div> </div>
</div> </div>
)} )}
<div className="flex flex-col lg:flex-row items-center gap-3"> <div className="flex flex-col lg:flex-row items-center gap-3 ">
<img <img
src={sighting?.overviewUrl} src={sighting?.overviewUrl}
alt="overview patch" alt="overview patch"
className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700" className="w-full h-56 sm:h-72 md:h-72 rounded-lg object-cover border border-gray-700"
/> />
<aside className="w-full lg:w-80 bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700"> <aside className="w-full lg:w-80 bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
<h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">Vehicle Info</h3> <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">Vehicle Info</h3>

2
src/components/UI/ModalComponent.tsx
View File

@@ -12,7 +12,7 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
<Modal <Modal
isOpen={isModalOpen} isOpen={isModalOpen}
onRequestClose={close} onRequestClose={close}
className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[80%] mx-auto mt-[1%] md:w-[70%] md:h-[95%] z-[100] overflow-y-auto max-h-screen" className="bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] h-[100%] md:h-[95%] lg:h-[85%] z-[100] overflow-y-auto"
overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100" overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
> >
{children} {children}