From 9dc9808420c2ceae8efaf3171cae5abb85b3d504 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <113370520+jamiebuilds-signal@users.noreply.github.com>
Date: Mon, 6 Mar 2023 14:47:22 -0800
Subject: [PATCH] speaking indicator design tweaks

---
 stylesheets/_modules.scss               | 9 ++++++++-
 ts/components/CallingAudioIndicator.tsx | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index b9d5995507a5..9c90eaba3a1f 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -3975,16 +3975,23 @@ button.module-image__border-overlay:focus {
     &:after {
       content: '';
       position: absolute;
+      z-index: $z-index-above-above-base;
       width: 100%;
       height: 100%;
       border: 0 solid transparent;
       border-radius: 5px;
-      transition: border-width 200ms, border-color 200ms;
+      transition-property: border-width, border-color;
+      // Slow down the transition when the user stops speaking.
+      transition-duration: 300ms;
+      transition-delay: 1000ms;
       transition-timing-function: ease-in-out;
     }
     &--speaking:after {
       border-width: 3px;
       border-color: $color-white;
+      // Speed up the transition when the user starts speaking.
+      transition-duration: 50ms;
+      transition-delay: 0ms;
     }
 
     &__remote-video {
diff --git a/ts/components/CallingAudioIndicator.tsx b/ts/components/CallingAudioIndicator.tsx
index 8fdcbc0fe3e2..4a0eb5b193cb 100644
--- a/ts/components/CallingAudioIndicator.tsx
+++ b/ts/components/CallingAudioIndicator.tsx
@@ -9,7 +9,7 @@ import { useSpring, animated } from '@react-spring/web';
 import { AUDIO_LEVEL_INTERVAL_MS } from '../calling/constants';
 import { missingCaseError } from '../util/missingCaseError';
 
-export const SPEAKING_LINGER_MS = 500;
+export const SPEAKING_LINGER_MS = 200;
 const BASE_CLASS_NAME = 'CallingAudioIndicator';
 const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;