- 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/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