Show audio mute status next to people's names

Previously we were showing a combination of audio and video status icons on people's name badges, which meant there was no way to tell whether someone who had their video off was muted or not. The designs call for only microphone icons to be shown here.

src/video-grid/VideoTile.module.css

@@ -83,6 +83,12 @@ limitations under the License.
   z-index: 1;
 }
 
+.infoBubble > svg {
+  height: 16px;
+  width: 16px;
+  margin-right: 4px;
+}
+
 .toolbar {
   position: absolute;
   top: 0;
@@ -126,10 +132,6 @@ limitations under the License.
   bottom: 16px;
 }
 
-.memberName > * {
-  margin-right: 6px;
-}
-
 .memberName > :last-child {
   margin-right: 0px;
 }

src/video-grid/VideoTile.tsx

@@ -20,8 +20,8 @@ import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
 import styles from "./VideoTile.module.css";
+import { ReactComponent as MicIcon } from "../icons/Mic.svg";
 import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
-import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
 import { AudioButton, FullscreenButton } from "../button/Button";
 import { ConnectionState } from "../room/useGroupCall";
 
@@ -178,9 +178,8 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
                 Mute state is currently sent over to-device messages, which
                 aren't quite real-time, so this is an important kludge to make
                 sure no one appears muted when they've clearly begun talking. */
-                audioMuted && !videoMuted && !speaking && <MicMutedIcon />
+                speaking || !audioMuted ? <MicIcon /> : <MicMutedIcon />
               }
-              {videoMuted && <VideoMutedIcon />}
               <span data-testid="videoTile_caption" title={caption}>
                 {caption}
               </span>