- updated button to match

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 {
-  InitialValuesForm,
-  InitialValuesFormErrors,
-} from "../../../types/types";
+import type { 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 =
-    backOfficeQuery?.data?.propConnectTimeoutSeconds?.value;
-  const readTimeoutSeconds =
-    backOfficeQuery?.data?.propReadTimeoutSeconds?.value;
+  const connectTimeoutSeconds = backOfficeQuery?.data?.propConnectTimeoutSeconds?.value;
+  const readTimeoutSeconds = backOfficeQuery?.data?.propReadTimeoutSeconds?.value;
 
   const initialValues: InitialValuesForm = {
     backOfficeURL: backOfficeURL ?? "",
@@ -44,9 +39,7 @@ const ChannelFields = () => {
     return null;
   };
 
-  const validateValues = (
-    values: InitialValuesForm
-  ): InitialValuesFormErrors => {
+  const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
     const errors: InitialValuesFormErrors = {};
 
     const url = values.backOfficeURL?.trim();
@@ -78,12 +71,7 @@ const ChannelFields = () => {
   };
 
   return (
-    <Formik
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-      enableReinitialize
-      validate={validateValues}
-    >
+    <Formik 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
-                    ? "border-red-500"
-                    : "border-gray-400 "
+                  errors.backOfficeURL && touched.backOfficeURL ? "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
-                    ? "border-red-500"
-                    : "border-gray-400 "
+                  errors.username && touched.username ? "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
-                      ? "border-red-500"
-                      : "border-gray-400 "
+                    errors.password && touched.password ? "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">
-                Connect Timeout Seconds
-              </label>
+              <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
               <Field
                 name={"connectTimeoutSeconds"}
                 type="number"
                 id="connectTimeoutSeconds"
                 className={`p-1.5 border ${
-                  errors.connectTimeoutSeconds && touched.connectTimeoutSeconds
-                    ? "border-red-500"
-                    : "border-gray-400 "
+                  errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "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
-                    ? "border-red-500"
-                    : "border-gray-400 "
+                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "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
-              ? "Saving..."
-              : "Save Changes"}
+            {isSubmitting || backOfficeMutation.isPending ? "Saving..." : "Save Changes"}
           </button>
           <ValidationToastOnce />
         </Form>