From 95ff64f9ff2f8f83cd0743fa681464a395ca37c6 Mon Sep 17 00:00:00 2001
From: Jason Woodland <me@jasonwoodland.com>
Date: Sat, 21 May 2022 02:59:49 +1000
Subject: [PATCH] feat(media): update mute indicator style (#3220)

---
 components/views/media/user/User.html |  4 +++-
 components/views/media/user/User.less | 29 +++++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/components/views/media/user/User.html b/components/views/media/user/User.html
index abdc2fe09c..a700448ed9 100644
--- a/components/views/media/user/User.html
+++ b/components/views/media/user/User.html
@@ -1,6 +1,8 @@
 <div v-if="call" class="user">
   <div class="indicators">
-    <mic-off-icon class="indicator" v-if="audioMuted" size="1.2x" />
+    <div class="indicator" v-if="muted.audio">
+      <mic-off-icon />
+    </div>
   </div>
 
   <div v-if="screenStream">
diff --git a/components/views/media/user/User.less b/components/views/media/user/User.less
index b4f529a4a9..4ac0d1ea0d 100644
--- a/components/views/media/user/User.less
+++ b/components/views/media/user/User.less
@@ -22,11 +22,36 @@
   position: absolute;
   top: 0;
   right: 0;
-  padding: 1rem;
+  padding: @light-spacing;
+  gap: @light-spacing;
 
   &:extend(.first-layer);
   .indicator {
-    margin-left: @light-spacing;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 100%;
+      background-color: @foreground-alt;
+      opacity: 0.5;
+      box-shadow: -2px 2px 30px rgba(18, 18, 22, 0.45), 0px 1px 2px rgba(43, 43, 59, 0.65);
+    }
+
+    svg {
+      &:extend(.color-text-muted);
+      width: 16px;
+      height: 16px;
+    }
   }
 }