- added volume setting for sighting hits

src/components/SettingForms/Sound/SoundSettingsCard.tsx

@@ -4,7 +4,7 @@ import SoundSettingsFields from "./SoundSettingsFields";
 
 const SoundSettingsCard = () => {
   return (
-    <Card className="p-4">
+    <Card className="p-4 col-span-5 w-full">
       <CardHeader title={"Sound Settings"} />
       <SoundSettingsFields />
     </Card>

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -4,6 +4,7 @@ import type { FormValues, Hotlist } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
 import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
 import { toast } from "sonner";
+import SliderComponent from "../../UI/Slider";
 
 const SoundSettingsFields = () => {
   const { state, dispatch } = useSoundContext();
@@ -40,34 +41,40 @@ const SoundSettingsFields = () => {
       {({ values }) => (
         <Form className="flex flex-col space-y-3">
           <FormGroup>
-            <label htmlFor="sightingSound">Sighting Sound</label>
-            <Field
-              as="select"
-              name="sightingSound"
-              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
-            >
-              {soundOptions?.map(({ value, label }) => {
-                return (
-                  <option key={label} value={value}>
-                    {label}
-                  </option>
-                );
-              })}
-            </Field>
+            <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
+              <label htmlFor="sightingSound">Sighting Sound</label>
+              <Field
+                as="select"
+                name="sightingSound"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+              >
+                {soundOptions?.map(({ value, label }) => {
+                  return (
+                    <option key={label} value={value}>
+                      {label}
+                    </option>
+                  );
+                })}
+              </Field>
+              <SliderComponent soundCategory="SIGHTINGVOLUME" />
+            </div>
           </FormGroup>
           <FormGroup>
-            <label htmlFor="NPEDsound">NPED notification Sound</label>
-            <Field
-              as="select"
-              name="NPEDsound"
-              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
-            >
-              {soundOptions?.map(({ value, label }) => (
-                <option key={value} value={value}>
-                  {label}
-                </option>
-              ))}
-            </Field>
+            <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
+              <label htmlFor="NPEDsound">NPED notification Sound</label>
+              <Field
+                as="select"
+                name="NPEDsound"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+              >
+                {soundOptions?.map(({ value, label }) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </Field>
+              <SliderComponent soundCategory="NPEDVOLUME" />
+            </div>
           </FormGroup>
           <div>
             <h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>

src/components/SettingForms/Sound/SoundUploadCard.tsx

@@ -4,7 +4,7 @@ import SoundUpload from "./SoundUpload";
 
 const SoundUploadCard = () => {
   return (
-    <Card className="p-4">
+    <Card className="p-4 col-span-3 w-full">
       <CardHeader title={"Sound upload"} />
       <SoundUpload />
     </Card>

src/components/SettingForms/components/FormGroup.tsx

@@ -5,11 +5,7 @@ type FormGroupProps = {
 };
 
 const FormGroup = ({ children }: FormGroupProps) => {
-  return (
-    <div className="flex flex-col md:flex-row md:items-center justify-between relative">
-      {children}
-    </div>
-  );
+  return <div className="flex flex-col md:flex-row md:items-center justify-between relative space-y-2">{children}</div>;
 };
 
 export default FormGroup;