Merge pull request #5869 from matrix-org/travis/voice/pulse-2

Pulse animation for voice messages recording state

res/css/views/rooms/_VoiceRecordComposerTile.scss

@@ -53,7 +53,8 @@ limitations under the License.
     font-size: $font-14px;
 
     &::before {
-        // TODO: @@ TravisR: Animate
+        animation: recording-pulse 2s infinite;
+
         content: '';
         background-color: $voice-record-live-circle-color;
         width: 10px;
@@ -74,3 +75,26 @@ limitations under the License.
         width: 42px; // we're not using a monospace font, so fake it
     }
 }
+
+// The keyframes are slightly weird here to help make a ramping/punch effect
+// for the recording dot. We start and end at 100% opacity to help make the
+// dot feel a bit like a real lamp that is blinking: the animation ends up
+// spending a lot of its time showing a steady state without a fade effect.
+// This lamp effect extends into why the 0% opacity keyframe is not in the
+// midpoint: lamps take longer to turn off than they do to turn on, and the
+// extra frames give it a bit of a realistic punch for when the animation is
+// ramping back up to 100% opacity.
+//
+// Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s
+// (intended to be used in a loop for 2s animation speed)
+@keyframes recording-pulse {
+    0% {
+        opacity: 1;
+    }
+    35% {
+        opacity: 0;
+    }
+    65% {
+        opacity: 1;
+    }
+}

res/themes/legacy-light/css/_legacy-light.scss

@@ -189,11 +189,12 @@ $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;
 
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;

res/themes/light/css/_light.scss

@@ -181,10 +181,10 @@ $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
 
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;