From 3811b1f3660ef418a54e331a79b3e0234b13e7de Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Wed, 17 Sep 2025 14:39:56 +0100
Subject: [PATCH] increasing sizing

---
 src/components/HistoryList/HistoryList.tsx    |  1 -
 src/components/PlateStack/NumberPlate.tsx     | 14 ++++++-------
 .../SettingForms/System/SystemFileUpload.tsx  |  2 +-
 .../SettingForms/WiFi&Modem/WiFiCard.tsx      |  1 -
 .../SightingModal/SightingModal.tsx           | 20 +++++++------------
 src/components/UI/Header.tsx                  | 12 +++++++----
 src/components/UI/ModalComponent.tsx          |  2 +-
 src/context/reducers/AlertReducers.ts         |  1 -
 src/hooks/useCameraConfig.ts                  |  1 -
 src/hooks/useGetOverviewSnapshot.ts           |  2 +-
 10 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/src/components/HistoryList/HistoryList.tsx b/src/components/HistoryList/HistoryList.tsx
index 580fc3d..bb83749 100644
--- a/src/components/HistoryList/HistoryList.tsx
+++ b/src/components/HistoryList/HistoryList.tsx
@@ -5,7 +5,6 @@ import AlertItem from "./AlertItem";
 
 const HistoryList = () => {
   const { state } = useAlertHitContext();
-  console.log(state);
 
   return (
     <Card className="h-100">
diff --git a/src/components/PlateStack/NumberPlate.tsx b/src/components/PlateStack/NumberPlate.tsx
index 51ea6ca..56438f7 100644
--- a/src/components/PlateStack/NumberPlate.tsx
+++ b/src/components/PlateStack/NumberPlate.tsx
@@ -9,16 +9,16 @@ type NumberPlateProps = {
 const NumberPlate = ({ motion, vrm }: NumberPlateProps) => {
   return (
     <div
-      className={`relative w-[8rem] border-4 border-black rounded-lg text-nowrap
-      text-black px-3 
-      ${motion ? "bg-yellow-400" : "bg-white"}
-      `}
+      className={`relative w-[16rem] border-6 border-black rounded-xl text-nowrap
+  text-black px-6 py-2
+  ${motion ? "bg-yellow-400" : "bg-white"}
+  `}
     >
-      <div className="">
-        <div className="absolute inset-y-0 left-0 bg-blue-600 w-4 flex flex-col">
+      <div>
+        <div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
           <GB />
         </div>
-        <p className=" pl-2 font-extrabold text-right">
+        <p className="pl-4 font-extrabold text-3xl text-right">
           {vrm && formatNumberPlate(vrm)}
         </p>
       </div>
diff --git a/src/components/SettingForms/System/SystemFileUpload.tsx b/src/components/SettingForms/System/SystemFileUpload.tsx
index d5c0b5c..dddf6af 100644
--- a/src/components/SettingForms/System/SystemFileUpload.tsx
+++ b/src/components/SettingForms/System/SystemFileUpload.tsx
@@ -19,7 +19,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
       opts: {
         timeoutMs: 30000,
         fieldName: "upload",
-        uploadUrl: "http://192.168.75.11/upload/software-update/2'",
+        uploadUrl: "http://192.168.75.11/upload/software-update/2",
       },
     };
     uploadSettings(settings);
diff --git a/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx b/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx
index c9a288c..275aada 100644
--- a/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx
+++ b/src/components/SettingForms/WiFi&Modem/WiFiCard.tsx
@@ -11,7 +11,6 @@ const WiFiCard = () => {
   return (
     <Card className="mb-4">
       <CardHeader title={"WiFi"} />
-
       <div className="flex flex-col gap-4">
         <FormGroup>
           <label
diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx
index 24bb1da..ac0c1b6 100644
--- a/src/components/SightingModal/SightingModal.tsx
+++ b/src/components/SightingModal/SightingModal.tsx
@@ -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} />
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index a0f298d..8017782 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -75,17 +75,21 @@ export default function Header() {
         </Link>
       </div>
       {/* Right: Texts stacked + icons */}
-      <div className="flex items-center space-x-12">
+      <div className="flex items-center space-x-24">
         <div className="flex flex-col leading-tight text-white text-sm tabular-nums">
           <h2>Local: {localStr}</h2>
           <h2>UTC: {utcStr}</h2>
         </div>
-        <div className="flex flex-row space-x-2">
+        <div className="flex flex-row space-x-8">
           <Link to={"/session-settings"}>
-            <FontAwesomeIcon className="text-white" icon={faListCheck} />
+            <FontAwesomeIcon
+              className="text-white"
+              icon={faListCheck}
+              size="2x"
+            />
           </Link>
           <Link to={"/system-settings"}>
-            <FontAwesomeIcon className="text-white" icon={faGear} />
+            <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
           </Link>
         </div>
       </div>
diff --git a/src/components/UI/ModalComponent.tsx b/src/components/UI/ModalComponent.tsx
index 270559a..da1dca9 100644
--- a/src/components/UI/ModalComponent.tsx
+++ b/src/components/UI/ModalComponent.tsx
@@ -16,7 +16,7 @@ const ModalComponent = ({
     <Modal
       isOpen={isModalOpen}
       onRequestClose={close}
-      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[70%] md:h-[90%] z-[100] overflow-y-auto max-h-screen"
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[80%] md:h-[90%] z-[100] overflow-y-auto max-h-screen"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
     >
       {children}
diff --git a/src/context/reducers/AlertReducers.ts b/src/context/reducers/AlertReducers.ts
index c14a180..5170933 100644
--- a/src/context/reducers/AlertReducers.ts
+++ b/src/context/reducers/AlertReducers.ts
@@ -34,7 +34,6 @@ export function reducer(state: AlertState, action: AlertPayload) {
           ),
         };
       } else {
-        console.log(state);
         return {
           ...state,
           alertList: state.allAlerts,
diff --git a/src/hooks/useCameraConfig.ts b/src/hooks/useCameraConfig.ts
index f8f2ffc..afd985a 100644
--- a/src/hooks/useCameraConfig.ts
+++ b/src/hooks/useCameraConfig.ts
@@ -46,7 +46,6 @@ export const useFetchCameraConfig = (cameraSide: string) => {
     onSuccess: () => toast("Settings Successfully saved"),
   });
 
-  console.log(fetchedConfigQuery.data);
   return {
     data: fetchedConfigQuery.data,
     isPending: fetchedConfigQuery.isPending,
diff --git a/src/hooks/useGetOverviewSnapshot.ts b/src/hooks/useGetOverviewSnapshot.ts
index 60bf154..707889c 100644
--- a/src/hooks/useGetOverviewSnapshot.ts
+++ b/src/hooks/useGetOverviewSnapshot.ts
@@ -3,8 +3,8 @@ import { useQuery } from "@tanstack/react-query";
 
 const apiUrl = import.meta.env.VITE_BASEURL;
 const folkstoneUrl = import.meta.env.VITE_FOLKESTONE_BASE;
+console.log(folkstoneUrl);
 async function fetchSnapshot(cameraSide: string) {
-  console.log(`${folkstoneUrl}/${cameraSide}-preview`);
   const response = await fetch(
     // `${folkstoneUrl}/Colour-preview`
     `${apiUrl}/${cameraSide}-preview`