diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index c449ea2caf..b5660a83f9 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -4335,10 +4335,10 @@ button.module-image__border-overlay:focus {
@include font-body-1;
display: flex;
align-items: center;
- justify-content: space-between;
margin-block: 2px;
- padding-block: 5px;
- padding-inline: 10px;
+ padding-block: 8px;
+ padding-inline-start: 10px;
+ padding-inline-end: 2px;
list-style-type: none;
border-radius: 6px;
&:hover {
@@ -4348,8 +4348,9 @@ button.module-image__border-overlay:focus {
&__avatar-and-name {
display: flex;
+ flex-grow: 1;
+ min-width: 0;
align-items: center;
- max-width: 172px;
}
&__name {
@@ -4387,12 +4388,19 @@ button.module-image__border-overlay:focus {
}
}
- &__status {
+ &__status-icon {
display: flex;
- flex-basis: 64px;
- flex-shrink: 0;
- align-items: center;
- justify-content: end;
+ flex: none;
+ margin-inline: 8px;
+ height: 16px;
+ width: 16px;
+ }
+
+ &__hand-raised {
+ @include color-svg(
+ '../images/icons/v3/raise_hand/raise_hand-light.svg',
+ $color-white
+ );
}
&__muted {
@@ -4401,10 +4409,6 @@ button.module-image__border-overlay:focus {
'../images/icons/v3/video/video-slash-compact-light.svg',
$color-white
);
- display: inline-block;
- margin-inline-start: 16px;
- height: 16px;
- width: 16px;
}
&--audio {
@@ -4412,10 +4416,6 @@ button.module-image__border-overlay:focus {
'../images/icons/v3/mic/mic-slash-compact-light.svg',
$color-white
);
- display: inline-block;
- margin-inline-start: 16px;
- height: 16px;
- width: 16px;
}
}
@@ -4424,10 +4424,6 @@ button.module-image__border-overlay:focus {
'../images/icons/v3/share_screen/share_screen-fill-light.svg',
$color-white
);
- display: inline-block;
- margin-inline-start: 16px;
- height: 16px;
- width: 16px;
}
}
diff --git a/stylesheets/components/CallingRaisedHandsList.scss b/stylesheets/components/CallingRaisedHandsList.scss
index f37380e0b6..4bdb6c1c71 100644
--- a/stylesheets/components/CallingRaisedHandsList.scss
+++ b/stylesheets/components/CallingRaisedHandsList.scss
@@ -71,10 +71,6 @@
);
}
-.CallingRaisedHandsList__AvatarAndName {
- max-width: 205px;
-}
-
.CallingRaisedHandsList__NameHandIcon {
display: inline-block;
$icon-size: 16px;
@@ -90,7 +86,8 @@
.CallingRaisedHandsList__LowerMyHandLink {
@include button-reset;
- margin-inline-end: 24px;
+ display: flex;
+ margin-inline-end: 16px;
font-size: 13px;
font-weight: 500;
color: $color-ultramarine-pastel;
diff --git a/ts/components/CallManager.tsx b/ts/components/CallManager.tsx
index b2e455a40d..3c3674dede 100644
--- a/ts/components/CallManager.tsx
+++ b/ts/components/CallManager.tsx
@@ -324,6 +324,14 @@ function ActiveCallManager({
);
}
+ let isHandRaised = false;
+ if (activeCall.callMode === CallMode.Group) {
+ const { raisedHands, localDemuxId } = activeCall;
+ if (localDemuxId) {
+ isHandRaised = raisedHands.has(localDemuxId);
+ }
+ }
+
const groupCallParticipantsForParticipantsList =
activeCall.callMode === CallMode.Group
? [
@@ -337,6 +345,7 @@ function ActiveCallManager({
...me,
hasRemoteAudio: hasLocalAudio,
hasRemoteVideo: hasLocalVideo,
+ isHandRaised,
presenting: Boolean(activeCall.presentingSource),
},
]
diff --git a/ts/components/CallingParticipantsList.stories.tsx b/ts/components/CallingParticipantsList.stories.tsx
index a6893937a9..c127d591b0 100644
--- a/ts/components/CallingParticipantsList.stories.tsx
+++ b/ts/components/CallingParticipantsList.stories.tsx
@@ -75,6 +75,7 @@ export function ManyParticipants(): JSX.Element {
}),
createParticipant({
hasRemoteAudio: true,
+ hasRemoteVideo: true,
presenting: true,
name: 'Rage Trunks',
title: 'Rage Trunks',
@@ -90,8 +91,18 @@ export function ManyParticipants(): JSX.Element {
title: 'Goku Black',
}),
createParticipant({
+ isHandRaised: true,
title: 'Supreme Kai Zamasu',
}),
+ createParticipant({
+ hasRemoteAudio: false,
+ hasRemoteVideo: true,
+ isHandRaised: true,
+ title: 'Chi Chi',
+ }),
+ createParticipant({
+ title: 'Someone With A Really Long Name',
+ }),
],
});
return