♻️(frontend) replace UTF emoji characters with designer-created images

Replace UTF character-based emoji with custom image assets designed by our
UX/UI team. Enhances cross-platform compatibility of reactions that were
previously inconsistent between operating systems. Specifically addresses
issue where emoji sent from Mac weren't properly displayed on all client
systems.

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -11,7 +11,7 @@ import { useNotificationSound } from '@/features/notifications/hooks/useSoundNot
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { WaitingParticipantNotification } from './components/WaitingParticipantNotification'
 import {
-  EMOJIS,
+  Emoji,
   Reaction,
 } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
 import {
@@ -50,7 +50,7 @@ export const MainNotificationToast = () => {
   }, [room, triggerNotificationSound])
 
   const handleEmoji = (emoji: string, participant: Participant) => {
-    if (!emoji || !EMOJIS.includes(emoji)) return
+    if (!emoji || !Object.values(Emoji).includes(emoji as Emoji)) return
     const id = instanceIdRef.current++
     setReactions((prev) => [
       ...prev,

src/frontend/src/features/rooms/livekit/components/ReactionPortal.tsx

@@ -60,7 +60,6 @@ export function FloatingReaction({
   return (
     <div
       className={css({
-        fontSize: '3rem',
         position: 'absolute',
         display: 'flex',
         alignItems: 'center',
@@ -69,17 +68,20 @@ export function FloatingReaction({
       style={{
         left: left,
         bottom: INITIAL_POSITION + deltaY,
-        transform: `scale(${scale})`,
         opacity: opacity,
       }}
     >
-      <span
+      <img
+        src={`/assets/reactions/${emoji}.png`}
+        alt={''}
         className={css({
-          lineHeight: '57px',
+          height: '50px',
         })}
-      >
-        {emoji}
-      </span>
+        style={{
+          transform: `scale(${scale})`,
+          transformOrigin: 'center bottom',
+        }}
+      />
       {name && (
         <Text
           variant="sm"

src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx

@@ -15,7 +15,15 @@ import { Participant } from 'livekit-client'
 import useRateLimiter from '@/hooks/useRateLimiter'
 
 // eslint-disable-next-line react-refresh/only-export-components
-export const EMOJIS = ['👍', '👎', '👏', '❤️', '😂', '😮', '🎉']
+export enum Emoji {
+  THUMBS_UP = 'thumbs-up',
+  THUMBS_DOWN = 'thumbs-down',
+  CLAP = 'clapping-hands',
+  HEART = 'red-heart',
+  LAUGHING = 'face-with-tears-of-joy',
+  SURPRISED = 'face-with-open-mouth',
+  CELEBRATION = 'party-popper',
+}
 
 export interface Reaction {
   id: number
@@ -112,10 +120,10 @@ export const ReactionsToggle = () => {
           <div
             className={css({
               position: 'absolute',
-              top: -55,
-              left: -114,
+              top: -63,
+              left: -139,
               borderRadius: '8px',
-              padding: '0.25rem',
+              padding: '0.35rem',
               backgroundColor: 'primaryDark.50',
               opacity: opacity,
               transition: 'opacity 0.2s ease',
@@ -129,24 +137,29 @@ export const ReactionsToggle = () => {
             <RACToolbar
               className={css({
                 display: 'flex',
+                gap: '0.5rem',
               })}
             >
-              {EMOJIS.map((emoji, index) => (
+              {Object.values(Emoji).map((emoji, index) => (
                 <Button
                   key={index}
                   onPress={() => debouncedSendReaction(emoji)}
                   aria-label={t('send', { emoji })}
                   variant="primaryTextDark"
                   size="sm"
+                  square
                   data-attr={`send-reaction-${emoji}`}
                 >
-                  <span
+                  <img
+                    src={`/assets/reactions/${emoji}.png`}
+                    alt=""
                     className={css({
-                      fontSize: '20px',
+                      minHeight: '28px',
+                      minWidth: '28px',
+                      pointerEvents: 'none',
+                      userSelect: 'none',
                     })}
-                  >
-                    {emoji}
-                  </span>
+                  />
                 </Button>
               ))}
             </RACToolbar>