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

increasing sizing

Browse Source
This commit is contained in:
Toba Ojo
2025-09-17 14:39:56 +01:00
parent 0b7ab3b0de
commit 3811b1f366
10 changed files with 25 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,7 +25,7 @@ const SightingModal = ({
</div>
<div className="flex flex-col gap-6 md:flex-row">
<div className="flex-1 flex flex-col gap-4">
<div className="flex-1 flex flex-col gap-2">
<div className="flex justify-start md:justify-start">
<NumberPlate vrm={sighting?.vrm} motion={motionAway} />
</div>
@@ -50,15 +50,15 @@ const SightingModal = ({
</div>
</div>
<aside className="md:w-80 lg:w-96 bg-gray-800/70 text-white rounded-xl p-4 border border-gray-700">
<aside className="md:w-80 lg:w-[40%] bg-gray-800/70 text-white rounded-xl p-4 border border-gray-700">
<h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
Vehicle Info
</h3>
<dl className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 text-sm">
<dl className="mt-3 grid grid-cols-1 sm:grid-cols-1 gap-x-4 gap-y-2 text-sm">
<div>
<dt className="text-gray-300">VRM</dt>
<dd className="font-medium break-all">
<dd className="font-medium text-2xl break-all">
{sighting?.vrm ?? "-"}
</dd>
</div>
@@ -74,12 +74,6 @@ const SightingModal = ({
<dt className="text-gray-300">Time</dt>
<dd className="font-medium">{sighting?.timeStamp ?? "-"}</dd>
</div>
<div className="sm:col-span-2">
<dt className="text-gray-300">Location</dt>
<dd className="font-medium truncate">
{sighting?.locationName ?? "-"}
</dd>
</div>
<div>
<dt className="text-gray-300">Make</dt>
<dd className="font-medium">{sighting?.make ?? "-"}</dd>
@@ -96,16 +90,16 @@ const SightingModal = ({
</aside>
</div>
<div className="mt-6 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
<div className="mt-3 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
<button
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 bg-red-600 text-white hover:bg-red-700 w-full md:w-auto"
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-auto"
onClick={handleClose}
>
<FontAwesomeIcon icon={faX} />
Close
</button>
<button
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2.5 bg-green-600 text-white hover:bg-green-700 w-full md:w-auto"
className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-auto"
onClick={handleClose}
>
<FontAwesomeIcon icon={faCheck} />