Implement sound settings update and integrate sound context in sightings widget

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -2,6 +2,7 @@ import { Field, FieldArray, Form, Formik } from "formik";
 import FormGroup from "../components/FormGroup";
 import type { FormValues, Hotlist } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
+import { toast } from "sonner";
 
 const SoundSettingsFields = () => {
   const { state, dispatch } = useSoundContext();
@@ -34,6 +35,7 @@ const SoundSettingsFields = () => {
 
   const handleSubmit = (values: FormValues) => {
     dispatch({ type: "UPDATE", payload: values });
+    toast.success("Sound settings updated");
   };
   console.log(state);
   return (
@@ -70,20 +72,18 @@ const SoundSettingsFields = () => {
               ))}
             </Field>
           </FormGroup>
-
           <div>
             <h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>
-
             <FormGroup>
               <FieldArray
                 name="hotlists"
                 render={() => (
-                  <div>
+                  <div className="w-full m-2">
                     {values.hotlists.length > 0 ? (
                       values.hotlists.map((hotlist, index) => (
                         <div
                           key={hotlist.name}
-                          className="flex items-center gap-3"
+                          className="flex items-center m-2 w-full justify-between"
                         >
                           <label
                             htmlFor={`hotlists.${index}.sound`}
@@ -106,14 +106,13 @@ const SoundSettingsFields = () => {
                         </div>
                       ))
                     ) : (
-                      <>No hotlists yet, Add one</>
+                      <p>No hotlists yet, Add one</p>
                     )}
                   </div>
                 )}
               />
             </FormGroup>
           </div>
-
           <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"