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