Tweak voice broadcast play icon

matrix-org · Nov 25, 2022 · b7f78d2 · b7f78d2
1 parent 55d9dbf
commit b7f78d2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git 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
@@ -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}