Unify voice broadcast css (#9504)

res/css/_components.pcss

@@ -374,6 +374,4 @@
 @import "./voice-broadcast/atoms/_PlaybackControlButton.pcss";
 @import "./voice-broadcast/atoms/_VoiceBroadcastControl.pcss";
 @import "./voice-broadcast/atoms/_VoiceBroadcastHeader.pcss";
-@import "./voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss";
+@import "./voice-broadcast/molecules/_VoiceBroadcastBody.pcss";
-@import "./voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss";
-@import "./voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss";

res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss

@@ -14,22 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_VoiceBroadcastRecordingPip {
+.mx_VoiceBroadcastBody {
-    background-color: $system;
+    background-color: $quinary-content;
     border-radius: 8px;
-    box-shadow: 0 2px 8px 0 #0000004a;
     display: inline-block;
     padding: $spacing-12;
 }
 
-.mx_VoiceBroadcastRecordingPip_divider {
+.mx_VoiceBroadcastBody--pip {
+    background-color: $system;
+    box-shadow: 0 2px 8px 0 #0000004a;
+}
+
+.mx_VoiceBroadcastBody_divider {
     background-color: $quinary-content;
     border: 0;
     height: 1px;
     margin: $spacing-12 0;
 }
 
-.mx_VoiceBroadcastRecordingPip_controls {
+.mx_VoiceBroadcastBody_controls {
     display: flex;
     justify-content: space-around;
 }

res/css/voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss

@@ -1,27 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_VoiceBroadcastPlaybackBody {
-    background-color: $quinary-content;
-    border-radius: 8px;
-    display: inline-block;
-    padding: 12px;
-}
-
-.mx_VoiceBroadcastPlaybackBody_controls {
-    display: flex;
-    justify-content: center;
-}

res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss

@@ -1,29 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_VoiceBroadcastRecordingBody {
-    align-items: flex-start;
-    background-color: $quinary-content;
-    border-radius: 8px;
-    display: inline-flex;
-    gap: $spacing-8;
-    padding: 12px;
-}
-
-.mx_VoiceBroadcastRecordingBody_title {
-    font-size: $font-12px;
-    font-weight: $font-semi-bold;
-}

src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx

@@ -74,14 +74,14 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
     }
 
     return (
-        <div className="mx_VoiceBroadcastPlaybackBody">
+        <div className="mx_VoiceBroadcastBody">
             <VoiceBroadcastHeader
                 live={live}
                 sender={sender}
                 room={room}
                 showBroadcast={true}
             />
-            <div className="mx_VoiceBroadcastPlaybackBody_controls">
+            <div className="mx_VoiceBroadcastBody_controls">
                 { control }
             </div>
         </div>

src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx

@@ -27,7 +27,7 @@ export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyPr
     } = useVoiceBroadcastRecording(recording);
 
     return (
-        <div className="mx_VoiceBroadcastRecordingBody">
+        <div className="mx_VoiceBroadcastBody">
             <VoiceBroadcastHeader
                 live={live}
                 sender={sender}

src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx

@@ -52,15 +52,15 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
         : <VoiceBroadcastControl onClick={toggleRecording} icon={PauseIcon} label={_t("pause voice broadcast")} />;
 
     return <div
-        className="mx_VoiceBroadcastRecordingPip"
+        className="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
     >
         <VoiceBroadcastHeader
             live={live}
             sender={sender}
             room={room}
         />
-        <hr className="mx_VoiceBroadcastRecordingPip_divider" />
+        <hr className="mx_VoiceBroadcastBody_divider" />
-        <div className="mx_VoiceBroadcastRecordingPip_controls">
+        <div className="mx_VoiceBroadcastBody_controls">
             { toggleControl }
             <VoiceBroadcastControl
                 icon={StopIcon}

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render as expected 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastPlaybackBody"
+    class="mx_VoiceBroadcastBody"
   >
     <div
       class="mx_VoiceBroadcastHeader"
@@ -51,7 +51,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render a
       </div>
     </div>
     <div
-      class="mx_VoiceBroadcastPlaybackBody_controls"
+      class="mx_VoiceBroadcastBody_controls"
     >
       <div
         aria-label="resume voice broadcast"
@@ -71,7 +71,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render a
 exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render as expected 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastPlaybackBody"
+    class="mx_VoiceBroadcastBody"
   >
     <div
       class="mx_VoiceBroadcastHeader"
@@ -119,7 +119,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render a
       </div>
     </div>
     <div
-      class="mx_VoiceBroadcastPlaybackBody_controls"
+      class="mx_VoiceBroadcastBody_controls"
     >
       <div
         aria-label="pause voice broadcast"
@@ -139,7 +139,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render a
 exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast should render as expected 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastPlaybackBody"
+    class="mx_VoiceBroadcastBody"
   >
     <div
       class="mx_VoiceBroadcastHeader"
@@ -187,7 +187,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
       </div>
     </div>
     <div
-      class="mx_VoiceBroadcastPlaybackBody_controls"
+      class="mx_VoiceBroadcastBody_controls"
     >
       <div
         class="mx_Spinner"

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should render the expected HTML 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastRecordingBody"
+    class="mx_VoiceBroadcastBody"
   >
     <div
       class="mx_VoiceBroadcastHeader"

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`VoiceBroadcastRecordingPip when rendering a paused recording should render as expected 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastRecordingPip"
+    class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
   >
     <div
       class="mx_VoiceBroadcastHeader"
@@ -43,10 +43,10 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
       </div>
     </div>
     <hr
-      class="mx_VoiceBroadcastRecordingPip_divider"
+      class="mx_VoiceBroadcastBody_divider"
     />
     <div
-      class="mx_VoiceBroadcastRecordingPip_controls"
+      class="mx_VoiceBroadcastBody_controls"
     >
       <div
         aria-label="resume voice broadcast"
@@ -76,7 +76,7 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
 exports[`VoiceBroadcastRecordingPip when rendering a started recording should render as expected 1`] = `
 <div>
   <div
-    class="mx_VoiceBroadcastRecordingPip"
+    class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
   >
     <div
       class="mx_VoiceBroadcastHeader"
@@ -116,10 +116,10 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
       </div>
     </div>
     <hr
-      class="mx_VoiceBroadcastRecordingPip_divider"
+      class="mx_VoiceBroadcastBody_divider"
     />
     <div
-      class="mx_VoiceBroadcastRecordingPip_controls"
+      class="mx_VoiceBroadcastBody_controls"
     >
       <div
         aria-label="pause voice broadcast"