From a74733f6bc2de54038cd08e393641553c2c29698 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Fri, 12 May 2023 14:32:16 -0400
Subject: [PATCH] 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 | 10 ++++++----
 src/video-grid/VideoTile.tsx        |  5 ++---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index a83d1f0f..db2e50b4 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/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;
 }
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index e3d26ad3..005e10cb 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/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>