got to a good point with sighting modal, want to do cleanup

src/components/SightingModal/SightingModal.tsx

@@ -1,6 +1,8 @@
+import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
 import type { SightingType } from "../../types/types";
 import NumberPlate from "../PlateStack/NumberPlate";
 import ModalComponent from "../UI/ModalComponent";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type SightingModalProps = {
   isSightingModalOpen: boolean;
@@ -14,32 +16,101 @@ const SightingModal = ({
   sighting,
 }: SightingModalProps) => {
   const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
-  console.log(sighting);
+
   return (
     <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
-      <div>
-        <h2>Sighting Details</h2>
-      </div>
-      <button onClick={handleClose}>close</button>
-      <div>
-        <div>
-          <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
+      <div className="max-w-screen-lg mx-auto p-4">
+        <div className="border-b border-gray-600 mb-4">
+          <h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
         </div>
-        <div>
-          <img
-            src={sighting?.overviewUrl}
-            alt="overview patch"
-            className="h-[50%] w-[50%]"
-          />
+
+        <div className="flex flex-col gap-6 md:flex-row">
+          <div className="flex-1 flex flex-col gap-4">
+            <div className="flex justify-start md:justify-start">
+              <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
+            </div>
+
+            <img
+              src={sighting?.overviewUrl}
+              alt="overview patch"
+              className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
+            />
+
+            <div className="flex items-center gap-3">
+              <img
+                src={sighting?.plateUrlColour}
+                alt="plate patch"
+                className="h-16 w-auto object-contain rounded-md border border-gray-700"
+              />
+              <img
+                src={sighting?.plateUrlInfrared}
+                alt="infrared patch"
+                className="h-16 w-auto object-contain rounded-md border border-gray-700 opacity-70"
+              />
+            </div>
+          </div>
+
+          <aside className="md:w-80 lg:w-96 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">
+              <div>
+                <dt className="text-gray-300">VRM</dt>
+                <dd className="font-medium break-all">
+                  {sighting?.vrm ?? "-"}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-gray-300">Motion</dt>
+                <dd className="font-medium">{sighting?.motion ?? "-"}</dd>
+              </div>
+              <div>
+                <dt className="text-gray-300">Seen Count</dt>
+                <dd className="font-medium">{sighting?.seenCount ?? "-"}</dd>
+              </div>
+              <div>
+                <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>
+              </div>
+              <div>
+                <dt className="text-gray-300">Model</dt>
+                <dd className="font-medium">{sighting?.model ?? "-"}</dd>
+              </div>
+              <div className="sm:col-span-2">
+                <dt className="text-gray-300">Colour</dt>
+                <dd className="font-medium">{sighting?.color ?? "-"}</dd>
+              </div>
+            </dl>
+          </aside>
         </div>
-        <div>
-          <img src={sighting?.plateUrlColour} alt="plate patch" height={48} />
-          <img
-            src={sighting?.plateUrlInfrared}
-            height={48}
-            alt="infrared patch"
-            className={"opacity-60"}
-          />
+
+        <div className="mt-6 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"
+            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"
+            onClick={handleClose}
+          >
+            <FontAwesomeIcon icon={faCheck} />
+            Acknowledge
+          </button>
         </div>
       </div>
     </ModalComponent>