- 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>
               ) : (