From 2e8407ac7c84fb6b47933f328f0981b2709db25c Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 5 May 2025 23:09:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20visually=20differentia?=
 =?UTF-8?q?te=20user's=20reactions=20from=20others?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement light color variant for reactions triggered by current user versus
standard color for other participants' reactions. Provides visual cue to help
users easily identify their own emoji reactions in the conversation flow.
---
 .../features/rooms/livekit/components/ReactionPortal.tsx  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/ReactionPortal.tsx b/src/frontend/src/features/rooms/livekit/components/ReactionPortal.tsx
index 84671c61..ea9a7abf 100644
--- a/src/frontend/src/features/rooms/livekit/components/ReactionPortal.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ReactionPortal.tsx
@@ -15,6 +15,7 @@ export const INITIAL_POSITION = 200
 interface FloatingReactionProps {
   emoji: string
   name?: string
+  isLocal?: boolean
   speed?: number
   scale?: number
 }
@@ -22,6 +23,7 @@ interface FloatingReactionProps {
 export function FloatingReaction({
   emoji,
   name,
+  isLocal = false,
   speed = 1,
   scale = 1,
 }: FloatingReactionProps) {
@@ -86,8 +88,9 @@ export function FloatingReaction({
         <Text
           variant="sm"
           className={css({
-            backgroundColor: 'primaryDark.100',
-            color: 'white',
+            backgroundColor: isLocal ? 'primary.100' : 'primaryDark.100',
+            color: isLocal ? 'black' : 'white',
+            fontWeight: 500,
             textAlign: 'center',
             borderRadius: '20px',
             paddingX: '0.5rem',
@@ -130,6 +133,7 @@ export function ReactionPortal({
         speed={speed}
         scale={scale}
         name={participant?.isLocal ? t('you') : participant.name}
+        isLocal={participant?.isLocal}
       />
     </div>,
     document.body