From 846417a3a864667736864dbcc9f9e7f9c45589e0 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Wed, 26 Oct 2022 13:45:39 +0200 Subject: [PATCH] Unify voice broadcast css (#9504) --- res/css/_components.pcss | 4 +-- ...rdingPip.pcss => _VoiceBroadcastBody.pcss} | 14 +++++---- .../_VoiceBroadcastPlaybackBody.pcss | 27 ----------------- .../_VoiceBroadcastRecordingBody.pcss | 29 ------------------- .../molecules/VoiceBroadcastPlaybackBody.tsx | 4 +-- .../molecules/VoiceBroadcastRecordingBody.tsx | 2 +- .../molecules/VoiceBroadcastRecordingPip.tsx | 6 ++-- .../VoiceBroadcastPlaybackBody-test.tsx.snap | 12 ++++---- .../VoiceBroadcastRecordingBody-test.tsx.snap | 2 +- .../VoiceBroadcastRecordingPip-test.tsx.snap | 12 ++++---- 10 files changed, 29 insertions(+), 83 deletions(-) rename res/css/voice-broadcast/molecules/{_VoiceBroadcastRecordingPip.pcss => _VoiceBroadcastBody.pcss} (84%) delete mode 100644 res/css/voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss delete mode 100644 res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 9179085cab..cc7c6a2e2a 100644 --- a/res/css/_components.pcss +++ b/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/_VoiceBroadcastRecordingBody.pcss"; -@import "./voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss"; +@import "./voice-broadcast/molecules/_VoiceBroadcastBody.pcss"; diff --git a/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss b/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss similarity index 84% rename from res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss rename to res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss index 11534a4797..37606f993c 100644 --- a/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss +++ b/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 { - background-color: $system; +.mx_VoiceBroadcastBody { + 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; } diff --git a/res/css/voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss b/res/css/voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss deleted file mode 100644 index 11921e1f95..0000000000 --- a/res/css/voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss +++ /dev/null @@ -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; -} diff --git a/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss b/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss deleted file mode 100644 index 13e3104c9a..0000000000 --- a/res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss +++ /dev/null @@ -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; -} diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx index e0634636a7..e6f2e343cb 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx @@ -74,14 +74,14 @@ export const VoiceBroadcastPlaybackBody: React.FC +
-
+
{ control }
diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx index b9721170eb..1b13377da9 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx @@ -27,7 +27,7 @@ export const VoiceBroadcastRecordingBody: React.FC +
; return
-
-
+
+
{ toggleControl }