From 7fe17d20738cb57e3b8a9473f59700943fb3615e Mon Sep 17 00:00:00 2001
From: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
Date: Fri, 19 Jan 2024 12:11:55 -0800
Subject: [PATCH] Fix call participant emoji name display

---
 stylesheets/_modules.scss            | 53 ++++++++++++++++------------
 ts/components/CallScreen.stories.tsx | 10 +++++-
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 3833ad8b9f5..83b25f239eb 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -3813,6 +3813,26 @@ button.module-image__border-overlay:focus {
         display: block;
         visibility: visible;
       }
+
+      .module-ongoing-call__group-call-remote-participant {
+        // Only apply container-type: size to grid column to prevent size collapse
+        // for implicitly sized participants (PiP)
+        container-type: size;
+
+        @container (min-width: 180px) or (min-height: 180px) {
+          .module-ongoing-call__group-call-remote-participant__footer {
+            padding-block: 0 14px;
+            padding-inline: 16px;
+          }
+        }
+
+        &--hand-raised {
+          .module-ongoing-call__group-call-remote-participant__footer {
+            padding-block: 0 8px;
+            padding-inline: 8px;
+          }
+        }
+      }
     }
 
     &__overflow {
@@ -3841,9 +3861,16 @@ button.module-image__border-overlay:focus {
         margin-bottom: 1rem;
 
         &__footer {
-          padding-block: 0 10px;
+          padding-block: 0 8px;
           padding-inline: 10px;
         }
+
+        &--hand-raised {
+          .module-ongoing-call__group-call-remote-participant__footer {
+            padding-block: 0 6px;
+            padding-inline: 6px;
+          }
+        }
       }
 
       &__scroll-marker {
@@ -3922,20 +3949,6 @@ button.module-image__border-overlay:focus {
         opacity: 1;
       }
     }
-
-    .module-ongoing-call__group-call-remote-participant {
-      // Only apply container-type: size to grid/overflow column to prevent size collapse
-      // for implicitly sized participants (PiP)
-      container-type: size;
-      $group-call-remote-participant-footer-padding-large: 16px;
-
-      @container (min-width: 180px) or (min-height: 180px) {
-        .module-ongoing-call__group-call-remote-participant__footer {
-          padding-block: 0 $group-call-remote-participant-footer-padding-large;
-          padding-inline: $group-call-remote-participant-footer-padding-large;
-        }
-      }
-    }
   }
 
   &__group-call--pagination-tile {
@@ -3981,8 +3994,6 @@ button.module-image__border-overlay:focus {
       transition: none;
     }
 
-    $group-call-remote-participant-footer-padding-medium: 12px;
-
     &:after {
       content: '';
       position: absolute;
@@ -4048,8 +4059,8 @@ button.module-image__border-overlay:focus {
       position: absolute;
       bottom: 0;
       height: 60px;
-      padding-block: 0 $group-call-remote-participant-footer-padding-medium;
-      padding-inline: $group-call-remote-participant-footer-padding-medium;
+      padding-block: 0 10px;
+      padding-inline: 12px;
       user-select: none;
       width: 100%;
       z-index: $z-index-above-base;
@@ -4065,7 +4076,7 @@ button.module-image__border-overlay:focus {
       &__contact-name {
         flex-grow: 1;
         font-size: 13px;
-        line-height: 13px;
+        line-height: 18px;
         color: $color-white;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -4081,8 +4092,6 @@ button.module-image__border-overlay:focus {
 
     &--hand-raised &__footer {
       background: transparent;
-      padding-block: 0 8px;
-      padding-inline: 8px;
     }
 
     &--hand-raised &__info {
diff --git a/ts/components/CallScreen.stories.tsx b/ts/components/CallScreen.stories.tsx
index 52c0c6cfe85..60cad971a3c 100644
--- a/ts/components/CallScreen.stories.tsx
+++ b/ts/components/CallScreen.stories.tsx
@@ -369,6 +369,8 @@ export function GroupCallYourHandRaised(): JSX.Element {
   );
 }
 
+const PARTICIPANT_EMOJIS = ['❤️', '🤔', '✨', '😂', '🦄'] as const;
+
 // We generate these upfront so that the list is stable when you move the slider.
 const allRemoteParticipants = times(MAX_PARTICIPANTS).map(index => ({
   aci: generateAci(),
@@ -381,7 +383,13 @@ const allRemoteParticipants = times(MAX_PARTICIPANTS).map(index => ({
   videoAspectRatio: Math.random() < 0.7 ? 1.3 : Math.random() * 0.4 + 0.6,
   ...getDefaultConversationWithServiceId({
     isBlocked: index === 10 || index === MAX_PARTICIPANTS - 1,
-    title: `Participant ${index + 1}`,
+    title: `Participant ${
+      (index - 2) % 4 === 0
+        ? PARTICIPANT_EMOJIS[
+            Math.floor((index - 2) / 4) % PARTICIPANT_EMOJIS.length
+          ]
+        : ''
+    } ${index + 1}`,
   }),
 }));