From aec0dc85ca5a7a6d51a55a1007548e8ee8b96ed1 Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Tue, 4 Jul 2023 15:15:32 -0400
Subject: [PATCH] Change muted text to icon

---
 src/react-components/icons/UserSoundOff.svg  | 11 +++++++++
 src/react-components/icons/UserSoundOn.svg   |  4 +++
 src/react-components/room/PeopleSidebar.js   | 26 +++++++++++++++-----
 src/react-components/room/PeopleSidebar.scss |  5 ----
 4 files changed, 35 insertions(+), 11 deletions(-)
 create mode 100644 src/react-components/icons/UserSoundOff.svg
 create mode 100644 src/react-components/icons/UserSoundOn.svg

diff --git a/src/react-components/icons/UserSoundOff.svg b/src/react-components/icons/UserSoundOff.svg
new file mode 100644
index 0000000000..6ccf1455fd
--- /dev/null
+++ b/src/react-components/icons/UserSoundOff.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_906_343)">
+<path d="M1 1L23 23" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.65755 6.48598C2.58444 8.10961 2 10.0247 2 12V14V18V19C2 19.7957 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H6C6.79565 22 7.55871 21.6839 8.12132 21.1213C8.68393 20.5587 9 19.7957 9 19V16C9 15.2044 8.68393 14.4413 8.12132 13.8787C7.55871 13.3161 6.79565 13 6 13H4V12C4 10.5588 4.38889 9.15769 5.10854 7.93697L3.65755 6.48598ZM16.3337 13.5053C16.8234 13.1782 17.4025 13 18 13H20V12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C10.5588 4 9.15769 4.38889 7.93697 5.10854L6.48598 3.65755C8.10961 2.58444 10.0247 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12V14V18V19C22 19.0558 21.9984 19.1115 21.9954 19.1669L16.3337 13.5053ZM15 17.8284V19C15 19.7957 15.3161 20.5587 15.8787 21.1213C16.4413 21.6839 17.2043 22 18 22H19C19.0558 22 19.1115 21.9984 19.1669 21.9954L15 17.8284Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_906_343">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/react-components/icons/UserSoundOn.svg b/src/react-components/icons/UserSoundOn.svg
new file mode 100644
index 0000000000..d696583e54
--- /dev/null
+++ b/src/react-components/icons/UserSoundOn.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 18V12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12V18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H18C17.4696 21 16.9609 20.7893 16.5858 20.4142C16.2107 20.0391 16 19.5304 16 19V16C16 15.4696 16.2107 14.9609 16.5858 14.5858C16.9609 14.2107 17.4696 14 18 14H21V19ZM3 19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H6C6.53043 21 7.03914 20.7893 7.41421 20.4142C7.78929 20.0391 8 19.5304 8 19V16C8 15.4696 7.78929 14.9609 7.41421 14.5858C7.03914 14.2107 6.53043 14 6 14H3V19Z" fill="black" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/react-components/room/PeopleSidebar.js b/src/react-components/room/PeopleSidebar.js
index 063aefef59..33078c6c07 100644
--- a/src/react-components/room/PeopleSidebar.js
+++ b/src/react-components/room/PeopleSidebar.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { ToolTip } from "@mozilla/lilypad-ui";
 import styles from "./PeopleSidebar.scss";
 import { Sidebar } from "../sidebar/Sidebar";
 import { CloseButton } from "../input/CloseButton";
@@ -13,10 +14,17 @@ import { ReactComponent as VolumeOffIcon } from "../icons/VolumeOff.svg";
 import { ReactComponent as VolumeHighIcon } from "../icons/VolumeHigh.svg";
 import { ReactComponent as VolumeMutedIcon } from "../icons/VolumeMuted.svg";
 import { ReactComponent as HandRaisedIcon } from "../icons/HandRaised.svg";
+import { ReactComponent as UserSoundOnIcon } from "../icons/UserSoundOn.svg";
+import { ReactComponent as UserSoundOffIcon } from "../icons/UserSoundOff.svg";
 import { List, ButtonListItem } from "../layout/List";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage, defineMessage, useIntl } from "react-intl";
 import { PermissionNotification } from "./PermissionNotifications";
 
+const toolTipDescription = defineMessage({
+  id: "people-sidebar.muted-tooltip",
+  defaultMessage: "User is {mutedState}"
+});
+
 function getDeviceLabel(ctx, intl) {
   if (ctx) {
     if (ctx.hmd) {
@@ -112,6 +120,10 @@ export function PeopleSidebar({
   me && filteredPeople.unshift(me);
   const store = window.APP.store;
 
+  function getToolTipDescription(isMuted) {
+    return intl.formatMessage(toolTipDescription, { mutedState: isMuted ? "muted" : "not muted" });
+  }
+
   return (
     <Sidebar
       title={
@@ -148,6 +160,13 @@ export function PeopleSidebar({
                 {person.hand_raised && <HandRaisedIcon />}
                 {<DeviceIcon title={getDeviceLabel(person.context, intl)} />}
                 {!person.context.discord && VoiceIcon && <VoiceIcon title={getVoiceLabel(person.micPresence, intl)} />}
+                <ToolTip description={getToolTipDescription(store._preferences?.avatarVoiceLevels?.[person.id]?.muted)}>
+                  {store._preferences?.avatarVoiceLevels?.[person.id]?.muted ? (
+                    <UserSoundOffIcon />
+                  ) : (
+                    <UserSoundOnIcon />
+                  )}
+                </ToolTip>
                 <p>{getPersonName(person, intl)}</p>
                 {person.roles.owner && (
                   <StarIcon
@@ -157,11 +176,6 @@ export function PeopleSidebar({
                     height={12}
                   />
                 )}
-                {store._preferences?.avatarVoiceLevels?.[person.id]?.muted && (
-                  <span className={styles.isMuted}>
-                    {intl.formatMessage({ id: "people-sidebar.muted-label", defaultMessage: "muted" })}
-                  </span>
-                )}
                 <p className={styles.presence}>{getPresenceMessage(person.presence, intl)}</p>
               </ButtonListItem>
             );
diff --git a/src/react-components/room/PeopleSidebar.scss b/src/react-components/room/PeopleSidebar.scss
index 2b0d2ba36d..ee3020ae6c 100644
--- a/src/react-components/room/PeopleSidebar.scss
+++ b/src/react-components/room/PeopleSidebar.scss
@@ -22,8 +22,3 @@
   flex: 1;
   justify-content: flex-end;
 }
-
-:local(.isMuted) {
-  font-style: italic;
-  color: theme.$color-semantic-warning;
-}