move mic meter

src/App.css

@@ -94,38 +94,46 @@ button {
   z-index: 5;
   /* padding: 1px; */
 }
+
 .waveform .current,
 .waveform .remaining,
 .waveform .length {
   font-weight: 800;
 }
+
 .waveform .remaining,
 .waveform .outro {
   right: 0;
   position: absolute;
 }
+
 .waveform .intro,
 .waveform .outro,
 .waveform .length {
   bottom: 0;
   position: absolute;
 }
+
 .waveform .length {
   text-align: center;
   width: 100%;
 }
+
 .waveform {
   height: 6vh;
 }
+
 .waveform .graph {
   position: absolute;
   height: 6vh;
   width: 100%;
   overflow: hidden;
 }
+
 .waveform .graph wave {
   height: 6vh !important;
 }
+
 .waveform .loading {
   background: #ccccff;
 }
@@ -135,6 +143,7 @@ button {
 }
 
 /* Flash class and keyframe animation */
+
 .sp-ending-soon {
   -webkit-animation: green-flash steps(1) 0.5s infinite;
   animation: green-flash steps(1) 0.5s infinite;
@@ -154,3 +163,7 @@ button {
   pointer-events: none;
   box-shadow: inset 0 0 3px 6px red;
 }
+
+#micMeter {
+  margin: 0.4rem 0 0 0.6rem;
+}

src/navbar/index.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Clock from "react-live-clock";
-import { VUMeter } from "../optionsMenu/helpers/VUMeter";
 
 import { FaRegClock, FaRegUser } from "react-icons/fa";
 
@@ -69,15 +68,6 @@ export function NavBar() {
             />
           </div>
         </div>
-
-        <div className="nav-item" id="navMeter">
-          <VUMeter
-            width={400}
-            height={40}
-            range={[-70, 0]}
-            greenRange={[-14, -3]}
-          />
-        </div>
       </div>
 
       <ul className="nav navbar-nav navbar-right">

src/navbar/navbar.scss

@@ -251,7 +251,3 @@
   font-weight: bold;
   font-size: 1.1em;
 }
-
-#navMeter {
-  margin: 0.4rem 0 0 1rem;
-}

src/showplanner/index.tsx

@@ -2,6 +2,7 @@ import React, { useState, useReducer, useEffect } from "react";
 import { ContextMenu, MenuItem } from "react-contextmenu";
 import { useBeforeunload } from "react-beforeunload";
 import { FaAlignJustify, FaBookOpen, FaMicrophone } from "react-icons/fa";
+import { VUMeter } from "../optionsMenu/helpers/VUMeter";
 
 import { TimeslotItem } from "../api";
 import appLogo from "../assets/images/webstudio.svg";
@@ -145,6 +146,14 @@ function MicControl() {
           The microphone has not been setup. Go to options.
         </p>
       )}
+      <div id="micMeter">
+        <VUMeter
+          width={400}
+          height={40}
+          range={[-70, 0]}
+          greenRange={[-14, -3]}
+        />
+      </div>
       <div className={`mixer-buttons ${!state.open && "disabled"}`}>
         <div
           className="mixer-buttons-backdrop"