added fullscreen mode and removed swipedown

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -14,7 +14,7 @@ const FrontCameraOverviewCard = ({ className }: CardProps) => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
     onSwipedRight: () => navigate("/front-camera-settings"),
-    onSwipedDown: () => navigate("/system-settings"),
+
     trackMouse: true,
   });
 

src/components/RearCameraOverview/RearCameraOverviewCard.tsx

@@ -13,7 +13,6 @@ const RearCameraOverviewCard = ({ className }: CardProps) => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
     onSwipedLeft: () => navigate("/rear-camera-settings"),
-    onSwipedDown: () => navigate("/system-settings"),
     trackMouse: true,
   });
 

src/components/SightingModal/SightingModal.tsx

@@ -50,7 +50,7 @@ const SightingModal = ({
             </div>
           </div>
 
-          <aside className="md:w-80 lg:w-[40%] 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 h-[70%] border-gray-700">
             <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
               Vehicle Info
             </h3>

src/components/UI/Header.tsx

@@ -1,9 +1,14 @@
-import * as React from "react";
 import { Link } from "react-router";
 import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faListCheck } from "@fortawesome/free-solid-svg-icons";
+import {
+  faGear,
+  faListCheck,
+  faMaximize,
+  faMinimize,
+} from "@fortawesome/free-solid-svg-icons";
 import type { VersionFieldType } from "../../types/types";
+import { useEffect, useState } from "react";
 
 async function fetchVersions(
   signal?: AbortSignal
@@ -33,10 +38,23 @@ function formatFromMs(ms: number, tz: "local" | "utc" = "local") {
 }
 
 export default function Header() {
-  const [offsetMs, setOffsetMs] = React.useState<number | null>(null);
-  const [nowMs, setNowMs] = React.useState<number>(Date.now());
+  const [offsetMs, setOffsetMs] = useState<number | null>(null);
+  const [nowMs, setNowMs] = useState<number>(Date.now());
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
-  React.useEffect(() => {
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      // Enter fullscreen on the entire app
+      document.documentElement.requestFullscreen();
+      setIsFullscreen(true);
+    } else {
+      // Exit fullscreen
+      document.exitFullscreen();
+      setIsFullscreen(false);
+    }
+  };
+
+  useEffect(() => {
     const ac = new AbortController();
     fetchVersions(ac.signal)
       .then((data) => {
@@ -50,7 +68,7 @@ export default function Header() {
     return () => ac.abort("failed");
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     let timer: number;
     const schedule = () => {
       const now = Date.now();
@@ -81,6 +99,14 @@ export default function Header() {
           <h2>UTC: {utcStr}</h2>
         </div>
         <div className="flex flex-row space-x-8">
+          <div onClick={toggleFullscreen} className="flex flex-col">
+            {isFullscreen ? (
+              <FontAwesomeIcon icon={faMinimize} size="2x" />
+            ) : (
+              <FontAwesomeIcon icon={faMaximize} size="2x" />
+            )}
+            {/* <small>{isFullscreen ? "Shrink" : "enlarge"}</small> */}
+          </div>
           <Link to={"/session-settings"}>
             <FontAwesomeIcon
               className="text-white"

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-[80%] 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-[95%] z-[100] overflow-y-auto max-h-screen"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
     >
       {children}

src/hooks/useNPEDAuth.ts

@@ -48,6 +48,8 @@ async function signIn(loginDetails: NPEDFieldType) {
   if (!frontCameraResponse.ok) throw new Error("cannot reach NPED endpoint");
   if (!rearCameraResponse.ok) throw new Error("cannot reach NPED endpoint");
 
+  const data = await frontCameraResponse.json();
+  console.log(data);
   return {
     frontResponse: frontCameraResponse.json(),
     rearResponse: rearCameraResponse.json(),