- updated button to match

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -29,11 +29,7 @@ const BearerTypeFields = () => {
   };
 
   return (
-    <Formik
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-      enableReinitialize
-    >
       {({ isSubmitting }) => (
         <Form>
           <div className="flex flex-col space-y-4 px-2">
@@ -60,11 +56,9 @@ const BearerTypeFields = () => {
             </FormGroup>
             <button
               type="submit"
-              className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             >
-              {isSubmitting || dispatcherMutation.isPending
+              {isSubmitting || dispatcherMutation.isPending ? "Saving..." : "Save Changes"}
-                ? "Saving..."
-                : "Save Changes"}
             </button>
           </div>
         </Form>

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

@@ -4,10 +4,7 @@ import { useEffect, useState } from "react";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useCameraOutput } from "../../../hooks/useCameraOutput";
-import type {
+import type { InitialValuesForm, InitialValuesFormErrors } from "../../../types/types";
-  InitialValuesForm,
-  InitialValuesFormErrors,
-} from "../../../types/types";
 import { toast } from "sonner";
 
 const ChannelFields = () => {
@@ -17,10 +14,8 @@ const ChannelFields = () => {
   const backOfficeURL = backOfficeQuery?.data?.propBackofficeURL?.value;
   const username = backOfficeQuery?.data?.propUsername?.value;
   const password = backOfficeQuery?.data?.propPassword?.value;
-  const connectTimeoutSeconds =
+  const connectTimeoutSeconds = backOfficeQuery?.data?.propConnectTimeoutSeconds?.value;
-    backOfficeQuery?.data?.propConnectTimeoutSeconds?.value;
+  const readTimeoutSeconds = backOfficeQuery?.data?.propReadTimeoutSeconds?.value;
-  const readTimeoutSeconds =
-    backOfficeQuery?.data?.propReadTimeoutSeconds?.value;
 
   const initialValues: InitialValuesForm = {
     backOfficeURL: backOfficeURL ?? "",
@@ -44,9 +39,7 @@ const ChannelFields = () => {
     return null;
   };
 
-  const validateValues = (
+  const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
-    values: InitialValuesForm
-  ): InitialValuesFormErrors => {
     const errors: InitialValuesFormErrors = {};
 
     const url = values.backOfficeURL?.trim();
@@ -78,12 +71,7 @@ const ChannelFields = () => {
   };
 
   return (
-    <Formik
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize validate={validateValues}>
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-      enableReinitialize
-      validate={validateValues}
-    >
       {({ errors, touched, isSubmitting }) => (
         <Form>
           <div className="flex flex-col space-y-2 px-2">
@@ -98,9 +86,7 @@ const ChannelFields = () => {
                 id="backoffice"
                 placeholder="https://www.backoffice.com"
                 className={`p-1.5 border ${
-                  errors.backOfficeURL && touched.backOfficeURL
+                  errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
-                    ? "border-red-500"
-                    : "border-gray-400 "
                 } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
@@ -112,9 +98,7 @@ const ChannelFields = () => {
                 id="username"
                 placeholder="Back office username"
                 className={`p-1.5 border ${
-                  errors.username && touched.username
+                  errors.username && touched.username ? "border-red-500" : "border-gray-400 "
-                    ? "border-red-500"
-                    : "border-gray-400 "
                 } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
@@ -127,9 +111,7 @@ const ChannelFields = () => {
                   id="password"
                   placeholder="Back office password"
                   className={`p-1.5 border ${
-                    errors.password && touched.password
+                    errors.password && touched.password ? "border-red-500" : "border-gray-400 "
-                      ? "border-red-500"
-                      : "border-gray-400 "
                   } rounded-lg w-full md:w-60`}
                 />
                 <FontAwesomeIcon
@@ -142,17 +124,13 @@ const ChannelFields = () => {
             </FormGroup>
 
             <FormGroup>
-              <label htmlFor="connectTimeoutSeconds">
+              <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
-                Connect Timeout Seconds
-              </label>
               <Field
                 name={"connectTimeoutSeconds"}
                 type="number"
                 id="connectTimeoutSeconds"
                 className={`p-1.5 border ${
-                  errors.connectTimeoutSeconds && touched.connectTimeoutSeconds
+                  errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                    ? "border-red-500"
-                    : "border-gray-400 "
                 } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
@@ -164,20 +142,16 @@ const ChannelFields = () => {
                 id="readTimeoutSeconds"
                 placeholder="https://example.com"
                 className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds
+                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
-                    ? "border-red-500"
-                    : "border-gray-400 "
                 } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
           </div>
           <button
             type="submit"
-            className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
-            {isSubmitting || backOfficeMutation.isPending
+            {isSubmitting || backOfficeMutation.isPending ? "Saving..." : "Save Changes"}
-              ? "Saving..."
-              : "Save Changes"}
           </button>
           <ValidationToastOnce />
         </Form>

src/components/SettingForms/NPED/NPEDHotlist.tsx

@@ -31,7 +31,7 @@ const NPEDHotlist = () => {
               type="file"
               name="file"
               id="file"
-              className="file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
+              className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
               onChange={(e) => {
                 if (e.target.files) {
                   if (e.target.files[0].type !== "text/csv") {

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -21,25 +21,21 @@ const SoundUpload = () => {
   };
 
   return (
-    <Formik
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      initialValues={initialValues}
+      {({ setFieldValue, errors, setFieldError, values }) => (
-      onSubmit={handleSubmit}
-      enableReinitialize
-    >
-      {({ setFieldValue, errors, setFieldError }) => (
         <Form>
+          <label htmlFor="soundFile" className="">
+            Sound File
+          </label>
           <FormGroup>
-            <label htmlFor="soundFile">Sound File</label>
             <input
               type="file"
               name="soundFile"
               id="sightingSoundinput"
               accept="audio/mpeg"
+              className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
               onChange={(e) => {
-                if (
+                if (e.target?.files && e.target?.files[0]?.type === "audio/mpeg") {
-                  e.target?.files &&
-                  e.target?.files[0]?.type === "audio/mpeg"
-                ) {
                   setFieldValue("name", e.target.files[0].name);
                   setFieldValue("soundFile", e.target.files[0]);
                 } else {
@@ -49,12 +45,24 @@ const SoundUpload = () => {
               }}
             />
           </FormGroup>
-          {errors.soundFile && (
+
-            <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>
+          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
+            {!values.soundFile && (
+              <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
+                No uploaded sound files
+              </div>
             )}
+            <p className="max-w-md text-slate-300">
+              Uploaded Sound files will appear in the <span className="font-bold">drop downs</span> once they are
+              uploaded. They can be used for any <span className="text-blue-400">Sighting,</span>{" "}
+              <span className="text-emerald-400">Hotlist</span> or <span className="text-amber-600">NPED</span> hits.
+            </p>
+          </div>
+
+          {errors.soundFile && <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>}
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
             disabled={errors.soundFile ? true : false}
           >
             Upload

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -7,8 +7,7 @@ import type { SystemValues, SystemValuesErrors } from "../../../types/types";
 import { useSystemConfig } from "../../../hooks/useSystemConfig";
 
 const SystemConfigFields = () => {
-  const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } =
+  const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
-    useSystemConfig();
   const { softRebootMutation, hardRebootMutation } = useReboots();
 
   const initialvalues: SystemValues = {
@@ -26,8 +25,7 @@ const SystemConfigFields = () => {
     const interval = Number(values.sntpInterval);
     if (!values.deviceName) errors.deviceName = "Required";
     if (!values.timeZone) errors.timeZone = "Required";
-    if (isNaN(interval) || interval <= 0)
+    if (isNaN(interval) || interval <= 0) errors.sntpInterval = "Cannot be less than 0";
-      errors.sntpInterval = "Cannot be less than 0";
     if (!values.sntpServer) errors.sntpServer = "Required";
     return errors;
   };
@@ -52,16 +50,11 @@ const SystemConfigFields = () => {
       {({ values, errors, touched, isSubmitting }) => (
         <Form className="flex flex-col space-y-5 px-2">
           <FormGroup>
-            <label
+            <label htmlFor="deviceName" className="font-medium whitespace-nowrap md:w-1/2 text-left">
-              htmlFor="deviceName"
-              className="font-medium whitespace-nowrap md:w-1/2 text-left"
-            >
               Device Name
             </label>
             {touched.deviceName && errors.deviceName && (
-              <small className="absolute right-0 -top-5 text-red-500">
+              <small className="absolute right-0 -top-5 text-red-500">{errors.deviceName}</small>
-                {errors.deviceName}
-              </small>
             )}
             <Field
               id="deviceName"
@@ -73,16 +66,11 @@ const SystemConfigFields = () => {
             />
           </FormGroup>
           <FormGroup>
-            <label
+            <label htmlFor="timeZone" className="font-medium whitespace-nowrap md:w-1/2 text-left">
-              htmlFor="timeZone"
-              className="font-medium whitespace-nowrap md:w-1/2 text-left"
-            >
               Local Time Zone
             </label>
             {touched.timeZone && errors.timeZone && (
-              <small className="absolute right-0 -top-5 text-red-500">
+              <small className="absolute right-0 -top-5 text-red-500">{errors.timeZone}</small>
-                {errors.timeZone}
-              </small>
             )}
             <Field
               id="timeZone"
@@ -99,16 +87,11 @@ const SystemConfigFields = () => {
             </Field>
           </FormGroup>
           <FormGroup>
-            <label
+            <label htmlFor="sntpServer" className="font-medium whitespace-nowrap md:w-1/2 text-left">
-              htmlFor="sntpServer"
-              className="font-medium whitespace-nowrap md:w-1/2 text-left"
-            >
               SNTP Server
             </label>
             {touched.sntpServer && errors.sntpServer && (
-              <small className="absolute right-0 -top-5 text-red-500">
+              <small className="absolute right-0 -top-5 text-red-500">{errors.sntpServer}</small>
-                {errors.sntpServer}
-              </small>
             )}
             <Field
               id="sntpServer"
@@ -120,16 +103,11 @@ const SystemConfigFields = () => {
             />
           </FormGroup>
           <FormGroup>
-            <label
+            <label htmlFor="sntpInterval" className="font-medium whitespace-nowrap md:w-1/2 text-left">
-              htmlFor="sntpInterval"
-              className="font-medium whitespace-nowrap md:w-1/2 text-left"
-            >
               SNTP Interval minutes
             </label>
             {touched.sntpInterval && errors.sntpInterval && (
-              <small className="absolute right-0 -top-5 text-red-500">
+              <small className="absolute right-0 -top-5 text-red-500">{errors.sntpInterval}</small>
-                {errors.sntpInterval}
-              </small>
             )}
             <Field
               id="sntpInterval"
@@ -142,15 +120,12 @@ const SystemConfigFields = () => {
           </FormGroup>
           <button
             type="submit"
-            className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             disabled={isSubmitting}
           >
             {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}
           </button>
-          <SystemFileUpload
+          <SystemFileUpload name={"softwareUpdate"} selectedFile={values.softwareUpdate} />
-            name={"softwareUpdate"}
-            selectedFile={values.softwareUpdate}
-          />
           <div className="border-b border-gray-600">
             <p>Reboot</p>
           </div>
@@ -160,18 +135,14 @@ const SystemConfigFields = () => {
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition  w-full md:w-[50%]"
             onClick={handleSoftReboot}
           >
-            {softRebootMutation.isPending || isSubmitting
+            {softRebootMutation.isPending || isSubmitting ? "Rebooting..." : "Software Reboot"}
-              ? "Rebooting..."
-              : "Software Reboot"}
           </button>
           <button
             type="button"
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"
             onClick={handleHardReboot}
           >
-            {hardRebootMutation.isPending || isSubmitting
+            {hardRebootMutation.isPending || isSubmitting ? "Rebooting" : "Hardware Reboot"}
-              ? "Rebooting"
-              : "Hardware Reboot"}
           </button>
         </Form>
       )}

src/components/SettingForms/System/SystemFileUpload.tsx

@@ -36,7 +36,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
             type="file"
             name="softwareUpdate"
             id="softwareUpdate"
-            className="file:px-10 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5 w-full max-w-xs"
+            className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
             onChange={(event) => {
               const file = event.currentTarget.files?.[0];
               if (!file) {
@@ -44,8 +44,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
                 return;
               }
 
-              if (file?.size > 8 * 1024 * 1024)
+              if (file?.size > 8 * 1024 * 1024) toast.error("File is too large (max 8MB).");
-                toast.error("File is too large (max 8MB).");
               setFieldValue(name, file);
             }}
           />
@@ -53,7 +52,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
       </FormGroup>
       <button
         type="button"
-        className="w-full md:w-[50%] text-white bg-[#26B170]  hover:bg-green-700 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+        className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
         disabled={!selectedFile}
         onClick={handleFileUploadClick}
       >

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

@@ -56,23 +56,13 @@ const ModemSettings = () => {
 
   return (
     <>
-      <ModemToggle
+      <ModemToggle showSettings={showSettings} onShowSettings={setShowSettings} />
-        showSettings={showSettings}
-        onShowSettings={setShowSettings}
-      />
       {!showSettings && (
-        <Formik
+        <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
-          initialValues={inititalValues}
-          onSubmit={handleSubmit}
-          enableReinitialize
-        >
           {({ isSubmitting }) => (
             <Form className="flex flex-col space-y-5 px-2">
               <FormGroup>
-                <label
+                <label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
-                  htmlFor="apn"
-                  className="font-medium whitespace-nowrap md:w-2/3"
-                >
                   APN
                 </label>
                 <Field
@@ -84,10 +74,7 @@ const ModemSettings = () => {
                 />
               </FormGroup>
               <FormGroup>
-                <label
+                <label htmlFor="username" className="font-medium whitespace-nowrap md:w-2/3">
-                  htmlFor="username"
-                  className="font-medium whitespace-nowrap md:w-2/3"
-                >
                   Username
                 </label>
                 <Field
@@ -99,10 +86,7 @@ const ModemSettings = () => {
                 />
               </FormGroup>
               <FormGroup>
-                <label
+                <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-                  htmlFor="password"
-                  className="font-medium whitespace-nowrap md:w-2/3"
-                >
                   Password
                 </label>
                 <div className="flex gap-2 items-center relative mb-4">
@@ -122,10 +106,7 @@ const ModemSettings = () => {
                 </div>
               </FormGroup>
               <FormGroup>
-                <label
+                <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-                  htmlFor="password"
-                  className="font-medium whitespace-nowrap md:w-2/3"
-                >
                   Password
                 </label>
                 <Field
@@ -140,11 +121,9 @@ const ModemSettings = () => {
               </FormGroup>
               <button
                 type="submit"
-                className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+                className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
               >
-                {isSubmitting || modemMutation.isPending
+                {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
-                  ? "Saving..."
-                  : "Save Modem settings"}
               </button>
             </Form>
           )}

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

@@ -37,18 +37,11 @@ const WiFiSettingsForm = () => {
     await wifiMutation.mutateAsync(wifiConfig);
   };
   return (
-    <Formik
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-      enableReinitialize
-    >
       {({ isSubmitting }) => (
         <Form className="flex flex-col space-y-5 px-2">
           <FormGroup>
-            <label
+            <label htmlFor="ssid" className="font-medium whitespace-nowrap md:w-2/3">
-              htmlFor="ssid"
-              className="font-medium whitespace-nowrap md:w-2/3"
-            >
               SSID
             </label>
             <Field
@@ -60,10 +53,7 @@ const WiFiSettingsForm = () => {
             />
           </FormGroup>
           <FormGroup>
-            <label
+            <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-              htmlFor="password"
-              className="font-medium whitespace-nowrap md:w-2/3"
-            >
               Password
             </label>
             <div className="flex gap-2 items-center relative mb-4">
@@ -83,10 +73,7 @@ const WiFiSettingsForm = () => {
             </div>
           </FormGroup>
           <FormGroup>
-            <label
+            <label htmlFor="encryption" className="font-medium whitespace-nowrap md:w-2/3">
-              htmlFor="encryption"
-              className="font-medium whitespace-nowrap md:w-2/3"
-            >
               WPA/Encryption Type
             </label>
             <Field
@@ -103,11 +90,9 @@ const WiFiSettingsForm = () => {
           </FormGroup>
           <button
             type="submit"
-            className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
-            {isSubmitting || wifiMutation.isPending
+            {isSubmitting || wifiMutation.isPending ? "Saving..." : " Save WiFi settings"}
-              ? "Saving..."
-              : " Save WiFi settings"}
           </button>
         </Form>
       )}

src/components/UI/ModalComponent.tsx

@@ -7,16 +7,12 @@ type ModalComponentProps = {
   close: () => void;
 };
 
-const ModalComponent = ({
+const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
-  isModalOpen,
-  children,
-  close,
-}: ModalComponentProps) => {
   return (
     <Modal
       isOpen={isModalOpen}
       onRequestClose={close}
-      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[80%] md:h-[95%] z-[100] overflow-y-auto max-h-screen"
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[80%] mx-auto mt-[1%] md:w-[70%] md:h-[95%] z-[100] overflow-y-auto max-h-screen"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
     >
       {children}

src/components/UI/NavigationArrow.tsx

@@ -11,7 +11,6 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   const navigate = useNavigate();
 
   const navigationDest = (side: string | undefined) => {
-    console.log(side);
     if (settingsPage) {
       navigate("/");
       return;

src/types/types.ts

@@ -289,7 +289,7 @@ export type FormValues = {
 
 export type SoundUploadValue = {
   name: string;
-  soundFile: string | undefined;
+  soundFile: File | null;
 };
 
 export type SoundState = {