From ba2da6826faf8a8da99a35aa0b8b86fa1c774784 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travisr@matrix.org>
Date: Mon, 3 May 2021 16:08:38 -0600
Subject: [PATCH] Support a dark theme for voice messages

Fixes https://github.com/vector-im/element-web/issues/17137
---
 res/css/views/rooms/_VoiceRecordComposerTile.scss  | 2 +-
 res/css/views/voice_messages/_PlayPauseButton.scss | 4 ++--
 res/themes/dark/css/_dark.scss                     | 8 ++++++++
 res/themes/legacy-dark/css/_legacy-dark.scss       | 9 +++++++++
 res/themes/legacy-light/css/_legacy-light.scss     | 3 +++
 res/themes/light/css/_light.scss                   | 3 +++
 6 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss
index e99e1a00e1..15daf81672 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss
@@ -40,7 +40,7 @@ limitations under the License.
     height: 18px;
     vertical-align: middle;
     margin-right: 7px; // distance from left edge of waveform container (container has some margin too)
-    background-color: $muted-fg-color;
+    background-color: $voice-record-icon-color;
     mask-repeat: no-repeat;
     mask-size: contain;
     mask-image: url('$(res)/img/element-icons/trashcan.svg');
diff --git a/res/css/views/voice_messages/_PlayPauseButton.scss b/res/css/views/voice_messages/_PlayPauseButton.scss
index c8ab162694..6caedafa29 100644
--- a/res/css/views/voice_messages/_PlayPauseButton.scss
+++ b/res/css/views/voice_messages/_PlayPauseButton.scss
@@ -19,12 +19,12 @@ limitations under the License.
     width: 32px;
     height: 32px;
     border-radius: 32px;
-    background-color: $primary-bg-color;
+    background-color: $voice-playback-button-bg-color;
 
     &::before {
         content: '';
         position: absolute; // sizing varies by icon
-        background-color: $muted-fg-color;
+        background-color: $voice-playback-button-fg-color;
         mask-repeat: no-repeat;
         mask-size: contain;
     }
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index f9983dce9e..cfdda41619 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -42,6 +42,14 @@ $preview-bar-bg-color: $header-panel-bg-color;
 $groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
 $inverted-bg-color: $base-color;
 
+$voice-record-stop-border-color: #6F7882; // "Quarterly"
+$voice-record-waveform-bg-color: #394049; // "Dark Tile"
+$voice-record-waveform-fg-color: $tertiary-fg-color;
+$voice-record-waveform-incomplete-fg-color: #5b646d;
+$voice-record-icon-color: $tertiary-fg-color;
+$voice-playback-button-bg-color: $tertiary-fg-color;
+$voice-playback-button-fg-color: $bg-color;
+
 // used by AddressSelector
 $selected-color: $room-highlight-color;
 
diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
index 194e89e548..6413a99ce0 100644
--- a/res/themes/legacy-dark/css/_legacy-dark.scss
+++ b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -124,6 +124,15 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%)
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 
+// See non-legacy dark for variable information
+$voice-record-stop-border-color: #6F7882;
+$voice-record-waveform-bg-color: #394049;
+$voice-record-waveform-fg-color: $tertiary-fg-color;
+$voice-record-waveform-incomplete-fg-color: #5b646d;
+$voice-record-icon-color: $tertiary-fg-color;
+$voice-playback-button-bg-color: $tertiary-fg-color;
+$voice-playback-button-fg-color: $bg-color;
+
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #1A1D23;
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index d7352e5684..2151724071 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -198,6 +198,9 @@ $voice-record-waveform-bg-color: #E3E8F0;
 $voice-record-waveform-fg-color: $muted-fg-color;
 $voice-record-waveform-incomplete-fg-color: #C1C6CD;
 $voice-record-live-circle-color: #ff4b55;
+$voice-record-icon-color: $muted-fg-color;
+$voice-playback-button-bg-color: $primary-bg-color;
+$voice-playback-button-fg-color: $muted-fg-color;
 
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 20ccc2ee41..1763fcdd48 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -188,6 +188,9 @@ $voice-record-waveform-bg-color: #E3E8F0;
 $voice-record-waveform-fg-color: $muted-fg-color;
 $voice-record-waveform-incomplete-fg-color: #C1C6CD;
 $voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes
+$voice-record-icon-color: $muted-fg-color;
+$voice-playback-button-bg-color: $primary-bg-color;
+$voice-playback-button-fg-color: $muted-fg-color;
 
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;