Change background of the "muted" icon

stylesheets/_modules.scss

@@ -3745,12 +3745,14 @@ button.module-image__border-overlay:focus {
       z-index: $z-index-above-base;
 
       &__contact-name {
+        font-size: 12px;
         color: $color-white;
         margin-right: 20px;
         overflow: hidden;
         text-overflow: ellipsis;
         visibility: hidden;
         white-space: nowrap;
+        margin-bottom: 2px;
       }
     }
 
@@ -3902,10 +3904,6 @@ button.module-image__border-overlay:focus {
       position: relative;
       width: 100%;
 
-      .module-ongoing-call__group-call-remote-participant--audio-muted::after {
-        display: none;
-      }
-
       // The avatar image can be dragged on Windows.
       .module-Avatar img {
         -webkit-user-drag: none;

stylesheets/components/CallingAudioIndicator.scss

@@ -2,13 +2,36 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .CallingAudioIndicator {
-  $size: 14px;
+  $size: 20px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: $size;
   min-width: $size;
   width: $size;
   z-index: $z-index-base;
+  border-radius: calc($size / 2);
 
-  &--muted {
-    @include color-svg('../images/icons/v2/mic-off-solid-28.svg', $color-white);
+  &--with-content {
+    background: $color-black-alpha-30;
+  }
+
+  &__content {
+    $size: 14px;
+    width: $size;
+    height: $size;
+
+    /* Center Lottie animation */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--muted {
+      @include color-svg(
+        '../images/icons/v2/mic-off-solid-28.svg',
+        $color-white
+      );
+    }
   }
 }

ts/components/CallingAudioIndicator.tsx

@@ -1,6 +1,7 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+import classNames from 'classnames';
 import { noop } from 'lodash';
 import type { ReactElement } from 'react';
 import React, { useEffect, useState } from 'react';
@@ -9,6 +10,9 @@ import { Lottie } from './Lottie';
 
 const SPEAKING_LINGER_MS = 100;
 
+const BASE_CLASS_NAME = 'CallingAudioIndicator';
+const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;
+
 export function CallingAudioIndicator({
   hasAudio,
   isSpeaking,
@@ -31,16 +35,35 @@ export function CallingAudioIndicator({
 
   if (!hasAudio) {
     return (
-      <div className="CallingAudioIndicator CallingAudioIndicator--muted" />
+      <div
+        className={classNames(
+          BASE_CLASS_NAME,
+          `${BASE_CLASS_NAME}--with-content`
+        )}
+      >
+        <div
+          className={classNames(
+            CONTENT_CLASS_NAME,
+            `${CONTENT_CLASS_NAME}--muted`
+          )}
+        />
+      </div>
     );
   }
 
   if (shouldShowSpeaking) {
     return (
-      <Lottie animationData={animationData} className="CallingAudioIndicator" />
+      <div
+        className={classNames(
+          BASE_CLASS_NAME,
+          `${BASE_CLASS_NAME}--with-content`
+        )}
+      >
+        <Lottie animationData={animationData} className={CONTENT_CLASS_NAME} />
+      </div>
     );
   }
 
   // Render an empty spacer so that names don't move around.
-  return <div className="CallingAudioIndicator" />;
+  return <div className={BASE_CLASS_NAME} />;
 }

ts/components/GroupCallRemoteParticipant.tsx

@@ -273,11 +273,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
           {!props.isInPip && (
             <div
               className={classNames(
-                'module-ongoing-call__group-call-remote-participant__info',
-                {
-                  'module-ongoing-call__group-call-remote-participant__info--audio-muted':
-                    !hasRemoteAudio,
-                }
+                'module-ongoing-call__group-call-remote-participant__info'
               )}
             >
               <ContactName