- added prettier config file

- improved sound state to remove pooling

- increased size of naviagtion arrows and fixed navigation onClick

-  decreased width of nav bar

- fixed button to reveal passwords in some password fields

src/components/UI/NavigationArrow.tsx

@@ -11,13 +11,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   const navigate = useNavigate();
 
   const navigationDest = (side: string | undefined) => {
+    console.log(side);
     if (settingsPage) {
       navigate("/");
       return;
     }
 
     if (side === "Front") {
-      navigate("/front-camera-settings");
+      navigate("/camera-settings");
     } else if (side === "Rear") {
       navigate("/Rear-Camera-settings");
     }
@@ -28,13 +29,15 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
       <>
         {side === "CameraA" ? (
           <FontAwesomeIcon
+            size="2xl"
             icon={faArrowRight}
             className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30"
-            onClick={() => navigationDest(side)}
+            onClick={() => navigationDest("Front")}
           />
         ) : (
           <FontAwesomeIcon
             icon={faArrowLeft}
+            size="2xl"
             className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
             onClick={() => navigationDest(side)}
           />
@@ -46,14 +49,16 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
     <>
       <FontAwesomeIcon
         icon={faArrowLeft}
-        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
-        onClick={() => navigationDest(side)}
+        size="2xl"
+        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 "
+        onClick={() => navigationDest("Front")}
       />
 
       <FontAwesomeIcon
         icon={faArrowRight}
-        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
-        onClick={() => navigationDest(side)}
+        size="2xl"
+        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100"
+        onClick={() => navigationDest("Rear")}
       />
     </>
   );