From 1e0e495cd885b4abe7ed72be01aa5d87043cb9ad Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 4 Dec 2024 18:13:54 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20refactor=20pulse?=
 =?UTF-8?q?=5Fmic=20into=20pulse=5Fbackground?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the keyframe more generic with an explicit naming.
---
 src/frontend/panda.config.ts                             | 8 ++++----
 .../controls/Participants/ParticipantListItem.tsx        | 9 ++++++---
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/frontend/panda.config.ts b/src/frontend/panda.config.ts
index d2db51a6..c010e96c 100644
--- a/src/frontend/panda.config.ts
+++ b/src/frontend/panda.config.ts
@@ -116,10 +116,10 @@ const config: Config = {
         '80%': { transform: 'rotate(20deg)' },
         '100%': { transform: 'rotate(0)' },
       },
-      pulse_mic: {
-        '0%': { color: 'primary', opacity: '1' },
-        '50%': { color: 'primary', opacity: '0.8' },
-        '100%': { color: 'primary', opacity: '1' },
+      pulse_background: {
+        '0%': { opacity: '1' },
+        '50%': { opacity: '0.65' },
+        '100%': { opacity: '1' },
       },
     },
     tokens: defineTokens({
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
index 71fb1d3d..7b2b58d9 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
@@ -84,9 +84,12 @@ const MicIndicator = ({ participant }: MicIndicatorProps) => {
           <RiMicOffFill color={'gray'} />
         ) : (
           <RiMicFill
-            style={{
-              animation: isSpeaking ? 'pulse_mic 800ms infinite' : undefined,
-            }}
+            className={css({
+              color: isSpeaking ? 'primaryDark.300' : 'primaryDark.50',
+              animation: isSpeaking
+                ? 'pulse_background 800ms infinite'
+                : undefined,
+            })}
           />
         )}
       </Button>