tweaked sizing and added refresh btn

src/components/SightingModal/SightingModal.tsx

@@ -3,6 +3,8 @@ import type { SightingType } from "../../types/types";
 import NumberPlate from "../PlateStack/NumberPlate";
 import ModalComponent from "../UI/ModalComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useAlertHitContext } from "../../context/AlertHitContext";
+import { toast, Toaster } from "sonner";
 
 type SightingModalProps = {
   isSightingModalOpen: boolean;
@@ -15,47 +17,49 @@ const SightingModal = ({
   handleClose,
   sighting,
 }: SightingModalProps) => {
+  const { dispatch } = useAlertHitContext();
+
+  const handleAcknowledgeButton = () => {
+    if (!sighting) {
+      toast.error("Cannot add sigthing to alert list");
+      handleClose();
+      return;
+    }
+    dispatch({ type: "ADD", payload: sighting });
+    toast.success("Sighting successfully added to alert list");
+    handleClose();
+  };
+
   const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
 
   return (
+    <>
       <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
-      <div className="max-w-screen-lg mx-auto p-4">
+        <div className="max-w-screen-lg mx-auto py-4 px-2">
           <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 className="flex flex-col md:flex-row gap-3 items-center">
-        <div className="flex flex-col gap-6 md:flex-row">
-          <div className="flex-1 flex flex-col gap-2">
-            <div className="flex justify-start md:justify-start">
             <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
+            <img
+              src={sighting?.plateUrlColour}
+              alt="plate patch"
+              className="h-16 object-contain rounded-md"
+            />
           </div>
-
+          <div className="flex flex-col md:flex-row items-center gap-3">
             <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"
             />
-
+            <aside className="w-full md:w-80 lg:w-[40%] bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
-            <div className="flex flex-col md:flex-row 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-[40%] bg-gray-800/70 text-white rounded-xl p-4 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>
-
+              <dl className="mt-3  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 text-2xl break-all">
@@ -64,27 +68,40 @@ const SightingModal = ({
                 </div>
                 <div>
                   <dt className="text-gray-300">Motion</dt>
-                <dd className="font-medium">{sighting?.motion ?? "-"}</dd>
+                  <dd className="font-medium text-2xl">
+                    {sighting?.motion ?? "-"}
+                  </dd>
                 </div>
                 <div>
                   <dt className="text-gray-300">Seen Count</dt>
-                <dd className="font-medium">{sighting?.seenCount ?? "-"}</dd>
+                  <dd className="font-medium text-2xl">
-              </div>
+                    {sighting?.seenCount ?? "-"}
-              <div>
+                  </dd>
-                <dt className="text-gray-300">Time</dt>
-                <dd className="font-medium">{sighting?.timeStamp ?? "-"}</dd>
                 </div>
+
                 <div>
                   <dt className="text-gray-300">Make</dt>
-                <dd className="font-medium">{sighting?.make ?? "-"}</dd>
+                  <dd className="font-medium text-2xl">
+                    {sighting?.make ?? "-"}
+                  </dd>
                 </div>
                 <div>
                   <dt className="text-gray-300">Model</dt>
-                <dd className="font-medium">{sighting?.model ?? "-"}</dd>
+                  <dd className="font-medium text-2xl">
+                    {sighting?.model ?? "-"}
+                  </dd>
                 </div>
                 <div className="sm:col-span-2">
                   <dt className="text-gray-300">Colour</dt>
-                <dd className="font-medium">{sighting?.color ?? "-"}</dd>
+                  <dd className="font-medium text-2xl">
+                    {sighting?.color ?? "-"}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-gray-300">Time</dt>
+                  <dd className="font-medium text-xl">
+                    {sighting?.timeStamp ?? "-"}
+                  </dd>
                 </div>
               </dl>
             </aside>
@@ -92,22 +109,24 @@ const SightingModal = ({
 
           <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-3 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-green-600 text-white hover:bg-green-700 w-full md:w-full"
+              onClick={handleAcknowledgeButton}
+            >
+              <FontAwesomeIcon icon={faCheck} />
+              Accept
+            </button>
+            <button
+              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-full"
               onClick={handleClose}
             >
               <FontAwesomeIcon icon={faX} />
-            Close
+              Deny
-          </button>
-          <button
-            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} />
-            Acknowledge
             </button>
           </div>
         </div>
       </ModalComponent>
+      <Toaster />
+    </>
   );
 };
 

src/components/UI/Header.tsx

@@ -6,6 +6,7 @@ import {
   faListCheck,
   faMaximize,
   faMinimize,
+  faRotate,
 } from "@fortawesome/free-solid-svg-icons";
 import type { VersionFieldType } from "../../types/types";
 import { useEffect, useState } from "react";
@@ -54,6 +55,10 @@ export default function Header() {
     }
   };
 
+  const refreshBrowser = () => {
+    window.location.reload();
+  };
+
   useEffect(() => {
     const ac = new AbortController();
     fetchVersions(ac.signal)
@@ -94,7 +99,7 @@ export default function Header() {
       </div>
       {/* Right: Texts stacked + icons */}
       <div className="flex items-center space-x-24">
-        <div className="flex flex-col leading-tight text-white text-sm tabular-nums">
+        <div className="flex flex-col leading-tight text-white  tabular-nums text-xl">
           <h2>Local: {localStr}</h2>
           <h2>UTC: {utcStr}</h2>
         </div>
@@ -105,8 +110,11 @@ export default function Header() {
             ) : (
               <FontAwesomeIcon icon={faMaximize} size="2x" />
             )}
-            {/* <small>{isFullscreen ? "Shrink" : "enlarge"}</small> */}
           </div>
+          <div onClick={refreshBrowser}>
+            <FontAwesomeIcon icon={faRotate} size="2x" />
+          </div>
+
           <Link to={"/session-settings"}>
             <FontAwesomeIcon
               className="text-white"

src/pages/Dashboard.tsx

@@ -5,7 +5,6 @@ import { SightingFeedProvider } from "../context/providers/SightingFeedProvider"
 
 const Dashboard = () => {
   const folkestoneUrl = import.meta.env.VITE_FOLKESTONE_URL;
-  const outsideCamUrl = import.meta.env.VITE_MAV_URL;
 
   return (
     <div className="mx-auto grid grid-cols-1  sm:grid-cols-1 lg:grid-cols-2 gap-2 px-1 sm:px-2 lg:px-0 w-full">
@@ -17,7 +16,7 @@ const Dashboard = () => {
         />
       </SightingFeedProvider>
 
-      <SightingFeedProvider url={outsideCamUrl} side="Rear">
+      <SightingFeedProvider url={folkestoneUrl} side="Rear">
         <RearCameraOverviewCard className="order-2" />
         <SightingHistoryWidget
           className="order-4"