- start addressing Alans feedback

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -12,7 +12,7 @@ const SoundSettingsFields = () => {
   const hotlists: Hotlist[] = state.hotlists;
 
   const soundOptions = state?.soundOptions?.map((soundOption) => ({
-    value: soundOption?.name,
+    value: soundOption?.soundFile,
     label: soundOption?.name,
   }));
 
@@ -48,7 +48,7 @@ const SoundSettingsFields = () => {
             >
               {soundOptions?.map(({ value, label }) => {
                 return (
-                  <option key={value} value={value}>
+                  <option key={label} value={value}>
                     {label}
                   </option>
                 );
@@ -78,14 +78,8 @@ const SoundSettingsFields = () => {
                   <div className="w-full m-2">
                     {values?.hotlists?.length > 0 ? (
                       values?.hotlists?.map((hotlist, index) => (
-                        <div
-                          key={hotlist.name}
-                          className="flex items-center m-2 w-full justify-between"
-                        >
-                          <label
-                            htmlFor={`hotlists.${index}.sound`}
-                            className="w-32 shrink-0"
-                          >
+                        <div key={hotlist.name} className="flex items-center m-2 w-full justify-between">
+                          <label htmlFor={`hotlists.${index}.sound`} className="w-32 shrink-0">
                             {hotlist.name}
                           </label>
                           <Field

src/components/SightingModal/SightingModal.tsx

@@ -109,7 +109,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                 onClick={handleAcknowledgeButton}
               >
                 <FontAwesomeIcon icon={faCheck} />
-                Accept
+                Acknowledge
               </button>
             )}
           </div>
@@ -157,18 +157,26 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                   <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
                 </div>
 
-                <div>
-                  <dt className="text-gray-300">Make</dt>
-                  <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
-                </div>
-                <div>
-                  <dt className="text-gray-300">Model</dt>
-                  <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
-                </div>
-                <div className="sm:col-span-2">
-                  <dt className="text-gray-300">Colour</dt>
-                  <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
-                </div>
+                {sighting?.make && (
+                  <div>
+                    <dt className="text-gray-300">Make</dt>
+                    <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
+                  </div>
+                )}
+                {sighting?.model ||
+                  (!sighting?.model.trim() && (
+                    <div>
+                      <dt className="text-gray-300">Model</dt>
+                      <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
+                    </div>
+                  ))}
+                {sighting?.color && (
+                  <div className="sm:col-span-2">
+                    <dt className="text-gray-300">Colour</dt>
+                    <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
+                  </div>
+                )}
+
                 <div>
                   <dt className="text-gray-300">Time</dt>
                   <dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
@@ -192,7 +200,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                 onClick={handleAcknowledgeButton}
               >
                 <FontAwesomeIcon icon={faCheck} />
-                Accept
+                Acknowledge
               </button>
             )}
             {onDelete ? (