Give Mic Menu some TLC.

src/optionsMenu/MicTab.tsx

@@ -70,15 +70,17 @@ export function MicTab() {
 
   return (
     <>
+      <h3>Mic Selection</h3>
+      <p>Click the "Find Microphones" button, then choose the microphone you want from the dropdown.</p>
       <button
         onClick={fetchMicNames}
         disabled={micList !== null}
         className="btn btn-outline-dark"
       >
-        Open
+        Find Microphones
       </button>
       <select
-        className="form-control"
+        className="form-control my-2"
         style={{ width: "100%" }}
         value={nextMicSource}
         onChange={(e) => setMicSource(e.target.value)}
@@ -105,13 +107,13 @@ export function MicTab() {
             : "An error occurred when opening the microphone. Please try again."}
         </div>
       )}
-
+      <hr />
       <div style={{ opacity: state.open ? 1 : 0.5 }}>
         <h3>Calibration</h3>
-        <b>
+        <p>
-          Speak into the microphone at a normal volume. Adjust the gain slider
+          Speak into the microphone at your <b>nomal presenting volume</b>. Adjust the gain slider
-          until the bar below is green when you're speaking.
+          until the bar below is <b>green</b> when you're speaking.
-        </b>
+        </p>
         <div>
           <VUMeter
             width={400}
@@ -123,6 +125,7 @@ export function MicTab() {
         </div>
         <div>
           <input
+            className="mr-2"
             type="range"
             min={-24}
             max={24}
@@ -132,7 +135,7 @@ export function MicTab() {
               dispatch(MixerState.setMicBaseGain(parseFloat(e.target.value)))
             }
           />
-          <b>{state.baseGain.toFixed(1)}</b>
+          <b>{state.baseGain.toFixed(1)} dB</b>
         </div>
       </div>
     </>