- 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/CameraSettings/CameraSettingFields.tsx

@@ -1,10 +1,5 @@
 import { Formik, Field, Form } from "formik";
-import type {
-  CameraConfig,
-  CameraSettingErrorValues,
-  CameraSettingValues,
-  ZoomInOptions,
-} from "../../types/types";
+import type { CameraConfig, CameraSettingErrorValues, CameraSettingValues, ZoomInOptions } from "../../types/types";
 import { useEffect, useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
@@ -28,8 +23,7 @@ const CameraSettingFields = ({
   updateCameraConfigError,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
-  const cameraControllerSide =
-    initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+  const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
   const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
   const zoomOptions = [1, 2, 4, 8];
 
@@ -109,9 +103,7 @@ const CameraSettingFields = ({
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="friendlyName">Name</label>
             {touched.friendlyName && errors.friendlyName && (
-              <small className="absolute right-0 top-0 text-red-500">
-                {errors.friendlyName}
-              </small>
+              <small className="absolute right-0 top-0 text-red-500">{errors.friendlyName}</small>
             )}
             <Field
               id="friendlyName"
@@ -126,9 +118,7 @@ const CameraSettingFields = ({
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="cameraAddress">Camera Address</label>
             {touched.cameraAddress && errors.cameraAddress && (
-              <small className="absolute right-0 top-0 text-red-500">
-                {errors.cameraAddress}
-              </small>
+              <small className="absolute right-0 top-0 text-red-500">{errors.cameraAddress}</small>
             )}
             <Field
               id="cameraAddress"
@@ -143,9 +133,7 @@ const CameraSettingFields = ({
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="userName">User Name</label>
             {touched.userName && errors.userName && (
-              <small className="absolute right-0 top-0 text-red-500">
-                {errors.userName}
-              </small>
+              <small className="absolute right-0 top-0 text-red-500">{errors.userName}</small>
             )}
             <Field
               id="userName"
@@ -161,9 +149,7 @@ const CameraSettingFields = ({
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="password">Password</label>
             {touched.password && errors.password && (
-              <small className="absolute right-0 top-0 text-red-500">
-                {errors.password}
-              </small>
+              <small className="absolute right-0 top-0 text-red-500">{errors.password}</small>
             )}
             <div className="flex gap-2 items-center relative mb-4">
               <Field
@@ -209,10 +195,7 @@ const CameraSettingFields = ({
             </div>
             <div className="mt-3">
               {updateCameraConfigError ? (
-                <button
-                  className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
-                  disabled
-                >
+                <button className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full" disabled>
                   Retry
                 </button>
               ) : (

src/components/CameraSettings/CameraSettings.tsx

@@ -15,8 +15,7 @@ const CameraSettings = ({
   zoomLevel?: number;
   onZoomLevelChange?: (level: number) => void;
 }) => {
-  const { data, updateCameraConfig, updateCameraConfigError } =
-    useFetchCameraConfig(side);
+  const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side);
 
   return (
     <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -120,24 +120,27 @@ const ChannelFields = () => {
             </FormGroup>
             <FormGroup>
               <label htmlFor="password">Password</label>
-              <Field
-                name={"password"}
-                type={showPwd ? "text" : "password"}
-                id="password"
-                placeholder="Back office password"
-                className={`p-1.5 border ${
-                  errors.password && touched.password
-                    ? "border-red-500"
-                    : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
-              />
-              <FontAwesomeIcon
-                type="button"
-                className="absolute right-5 end-0"
-                onClick={() => setShowPwd((s) => !s)}
-                icon={showPwd ? faEyeSlash : faEye}
-              />
+              <div className="flex gap-2 items-center relative mb-4">
+                <Field
+                  name={"password"}
+                  type={showPwd ? "text" : "password"}
+                  id="password"
+                  placeholder="Back office password"
+                  className={`p-1.5 border ${
+                    errors.password && touched.password
+                      ? "border-red-500"
+                      : "border-gray-400 "
+                  } rounded-lg w-full md:w-60`}
+                />
+                <FontAwesomeIcon
+                  type="button"
+                  className="absolute right-5 end-0"
+                  onClick={() => setShowPwd((s) => !s)}
+                  icon={showPwd ? faEyeSlash : faEye}
+                />
+              </div>
             </FormGroup>
+
             <FormGroup>
               <label htmlFor="connectTimeoutSeconds">
                 Connect Timeout Seconds

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -73,24 +73,26 @@ const NPEDFields = () => {
           </FormGroup>
           <FormGroup>
             <label htmlFor="password">Password</label>
-            {touched.password && errors.password && (
-              <small className="absolute right-0 -top-5 text-red-500">
-                {errors.password}
-              </small>
-            )}
-            <Field
-              name="password"
-              type={showPwd ? "text" : "password"}
-              id="password"
-              placeholder="NPED Password"
-              className="p-1.5 border border-gray-400 rounded-lg"
-            />
-            <FontAwesomeIcon
-              type="button"
-              className="absolute right-5 end-0"
-              onClick={() => setShowPwd((s) => !s)}
-              icon={showPwd ? faEyeSlash : faEye}
-            />
+            <div className="flex gap-2 items-center relative mb-4">
+              <Field
+                name="password"
+                type={showPwd ? "text" : "password"}
+                id="password"
+                placeholder="NPED Password"
+                className="p-2 border border-gray-400 rounded-lg w-full"
+              />
+              {touched.password && errors.password && (
+                <small className="absolute right-0 -top-5 text-red-500">
+                  {errors.password}
+                </small>
+              )}
+              <FontAwesomeIcon
+                type="button"
+                className="absolute right-5 end-0"
+                onClick={() => setShowPwd((s) => !s)}
+                icon={showPwd ? faEyeSlash : faEye}
+              />
+            </div>
           </FormGroup>
           <FormGroup>
             <label htmlFor="clientId">Client ID</label>

src/components/SettingForms/WiFi&Modem/ModemSettings.tsx

@@ -4,9 +4,12 @@ import type { ModemSettingsType } from "../../../types/types";
 import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
 import { useEffect, useState } from "react";
 import ModemToggle from "./ModemToggle";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const ModemSettings = () => {
   const [showSettings, setShowSettings] = useState(false);
+  const [showPwd, setShowPwd] = useState(false);
   const { modemQuery, modemMutation } = useWifiAndModem();
 
   const apn = modemQuery?.data?.propAPN?.value;
@@ -102,13 +105,21 @@ const ModemSettings = () => {
                 >
                   Password
                 </label>
-                <Field
-                  placeholder="Enter Password"
-                  name="password"
-                  id="password"
-                  type="text"
-                  className="p-1.5 border border-gray-400 rounded-lg"
-                />
+                <div className="flex gap-2 items-center relative mb-4">
+                  <Field
+                    id="password"
+                    name="password"
+                    type={showPwd ? "text" : "password"}
+                    className="p-2 border border-gray-400 rounded-lg w-full"
+                    placeholder="Enter Password"
+                  />
+                  <FontAwesomeIcon
+                    type="button"
+                    className="absolute right-5 end-0"
+                    onClick={() => setShowPwd((s) => !s)}
+                    icon={showPwd ? faEyeSlash : faEye}
+                  />
+                </div>
               </FormGroup>
               <FormGroup>
                 <label

src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx

@@ -66,19 +66,21 @@ const WiFiSettingsForm = () => {
             >
               Password
             </label>
-            <Field
-              id="password"
-              name="password"
-              type={showPwd ? "text" : "password"}
-              className="p-1.5 border border-gray-400 rounded-lg"
-              placeholder="Enter Password"
-            />
-            <FontAwesomeIcon
-              type="button"
-              className="absolute right-5 end-0"
-              onClick={() => setShowPwd((s) => !s)}
-              icon={showPwd ? faEyeSlash : faEye}
-            />
+            <div className="flex gap-2 items-center relative mb-4">
+              <Field
+                id="password"
+                name="password"
+                type={showPwd ? "text" : "password"}
+                className="p-2 border border-gray-400 rounded-lg w-full"
+                placeholder="Enter Password"
+              />
+              <FontAwesomeIcon
+                type="button"
+                className="absolute right-5 end-0"
+                onClick={() => setShowPwd((s) => !s)}
+                icon={showPwd ? faEyeSlash : faEye}
+              />
+            </div>
           </FormGroup>
           <FormGroup>
             <label

src/components/SettingForms/components/FormGroup.tsx

@@ -6,7 +6,7 @@ type FormGroupProps = {
 
 const FormGroup = ({ children }: FormGroupProps) => {
   return (
-    <div className="flex flex-col md:flex-row items-center justify-between relative">
+    <div className="flex flex-col md:flex-row md:items-center justify-between relative">
       {children}
     </div>
   );

src/components/UI/Header.tsx

@@ -32,8 +32,8 @@ export default function Header() {
   };
 
   return (
-    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-col md:flex-row justify-between mb-7 space-y-6 md:space-y-0">
-      <div className="w-30">
+    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto sm:px-3 lg:px-4 py-4 flex flex-col md:flex-row justify-between mb-7 space-y-6 md:space-y-0">
+      <div className="w-28">
         <Link to={"/"}>
           <img src={Logo} alt="Logo" width={150} height={150} />
         </Link>

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")}
       />
     </>
   );