From 5b5c3ab33c63d0f3a35b92b2406df9fc70c592c0 Mon Sep 17 00:00:00 2001
From: Michael Weimann <michaelw@matrix.org>
Date: Mon, 28 Nov 2022 13:03:18 +0100
Subject: [PATCH] Tweak voice broadcast play icon (#9622)

---
 res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss    | 5 +++++
 .../components/molecules/VoiceBroadcastPlaybackBody.tsx      | 4 ++++
 .../__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap   | 4 ++--
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss b/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
index ff892767e4..efe4b97445 100644
--- a/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
@@ -28,3 +28,8 @@ limitations under the License.
 .mx_VoiceBroadcastControl-recording {
     color: $alert;
 }
+
+.mx_VoiceBroadcastControl-play .mx_Icon {
+    left: 1px;
+    position: relative;
+}
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
index 9999603c08..6c16223388 100644
--- a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
+++ b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
@@ -62,14 +62,17 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
     } else {
         let controlIcon: React.FC<React.SVGProps<SVGSVGElement>>;
         let controlLabel: string;
+        let className = "";
 
         switch (playbackState) {
             case VoiceBroadcastPlaybackState.Stopped:
                 controlIcon = PlayIcon;
+                className = "mx_VoiceBroadcastControl-play";
                 controlLabel = _t("play voice broadcast");
                 break;
             case VoiceBroadcastPlaybackState.Paused:
                 controlIcon = PlayIcon;
+                className = "mx_VoiceBroadcastControl-play";
                 controlLabel = _t("resume voice broadcast");
                 break;
             case VoiceBroadcastPlaybackState.Playing:
@@ -79,6 +82,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
         }
 
         control = <VoiceBroadcastControl
+            className={className}
             label={controlLabel}
             icon={controlIcon}
             onClick={toggle}
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
index 71275fda51..c14cf94539 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
@@ -57,7 +57,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0/not-live broadcast should
       </div>
       <div
         aria-label="resume voice broadcast"
-        class="mx_AccessibleButton mx_VoiceBroadcastControl"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
         role="button"
         tabindex="0"
       >
@@ -460,7 +460,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
     >
       <div
         aria-label="play voice broadcast"
-        class="mx_AccessibleButton mx_VoiceBroadcastControl"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
         role="button"
         tabindex="0"
       >