From e77d3bea0483b62de7705e26bc5266cc3d58f3ae Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 14 Apr 2021 15:08:11 -0600
Subject: [PATCH] Pulse animation option for voice record button

---
 .../views/rooms/_VoiceRecordComposerTile.scss | 22 ++++++++++++++++++-
 .../legacy-light/css/_legacy-light.scss       |  6 +++--
 res/themes/light/css/_light.scss              |  5 +++--
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss
index 2fb112a38c..4d706c7ed4 100644
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss
@@ -53,7 +53,9 @@ limitations under the License.
     font-size: $font-14px;
 
     &::before {
-        // TODO: @@ TravisR: Animate
+        // Pulsing animation
+        animation: recording-pulse 1.5s infinite;
+
         content: '';
         background-color: $voice-record-live-circle-color;
         width: 10px;
@@ -74,3 +76,21 @@ limitations under the License.
         width: 42px; // we're not using a monospace font, so fake it
     }
 }
+
+@keyframes recording-pulse {
+    // Source: https://codepen.io/FlorinPop17/pen/drJJzK
+    // Same source: https://www.florin-pop.com/blog/2019/03/css-pulse-effect/
+
+    0% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 $voice-record-live-circle-color;
+    }
+    70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 6px transparent;
+    }
+    100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 transparent;
+    }
+}
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index 7cb7082c4e..8ce231f47c 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -189,11 +189,13 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
 
 $groupFilterPanel-divider-color: $roomlist-header-color;
 
+// See non-legacy _light for variable information
 $voice-record-stop-border-color: #E3E8F0;
-$voice-record-stop-symbol-color: $warning-color;
+$voice-record-stop-symbol-color: #ff4b55;
 $voice-record-waveform-bg-color: #E3E8F0;
 $voice-record-waveform-fg-color: $muted-fg-color;
-$voice-record-live-circle-color: $warning-color;
+$voice-record-live-circle-color: #ff4b55;
+$voice-record-live-halo-color: #ff4b5544;
 
 $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 dc26c4d652..4744c4d5b6 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -181,10 +181,11 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
 $groupFilterPanel-divider-color: $roomlist-header-color;
 
 $voice-record-stop-border-color: #E3E8F0;
-$voice-record-stop-symbol-color: $warning-color;
+$voice-record-stop-symbol-color: #ff4b55; // $warning-color, but without letting people change it in themes
 $voice-record-waveform-bg-color: #E3E8F0;
 $voice-record-waveform-fg-color: $muted-fg-color;
-$voice-record-live-circle-color: $warning-color;
+$voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes
+$voice-record-live-halo-color: #ff4b5544; // $warning-color, but with some alpha and without theme support
 
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;