- updated button to match

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -21,25 +21,21 @@ const SoundUpload = () => {
   };
 
   return (
-    <Formik
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-      enableReinitialize
-    >
-      {({ setFieldValue, errors, setFieldError }) => (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
+      {({ setFieldValue, errors, setFieldError, values }) => (
         <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 (
-                  e.target?.files &&
-                  e.target?.files[0]?.type === "audio/mpeg"
-                ) {
+                if (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