Change background of the "muted" icon

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} />;
 }