feat(media): update mute indicator style (#3220)

Satellite-im · May 20, 2022 · 95ff64f · 95ff64f
1 parent 59f625b
commit 95ff64f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git 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
@@ -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;
+    }
   }
 }