Make call tiles look less broken in the right panel (#9808)

res/css/views/elements/_FacePile.pcss

@@ -30,7 +30,7 @@ limitations under the License.
         }
 
         .mx_BaseAvatar_image {
-            border: 1px solid $background;
+            border: 1px solid var(--facepile-background, $background);
         }
 
         .mx_BaseAvatar_initial {

res/css/views/messages/_CallEvent.pcss

@@ -29,49 +29,70 @@ limitations under the License.
     border-radius: 8px;
 
     display: flex;
-    align-items: center;
-    justify-content: space-between;
     gap: $spacing-8;
 
-    .mx_CallEvent_title {
+    > .mx_BaseAvatar,
-        font-size: $font-15px;
+    > .mx_Icon {
-        line-height: 24px; /* in px to match the avatar */
-    }
-
-    &.mx_CallEvent_inactive .mx_CallEvent_title::before {
-        display: inline-block;
-        vertical-align: middle;
-        content: "";
-        background-color: $secondary-content;
-        mask-image: url("$(res)/img/element-icons/call/video-call.svg");
-        mask-size: 16px;
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-    }
-
-    &.mx_CallEvent_active .mx_CallEvent_title {
-        font-weight: 600;
-    }
-
-    > .mx_BaseAvatar {
         align-self: flex-start;
     }
 
-    > .mx_CallEvent_infoRows {
+    > .mx_Icon {
-        flex-grow: 1;
+        padding: 0;
-
+        margin: $spacing-4 0;
-        display: flex;
+        color: $secondary-content;
-        flex-direction: column;
-        gap: $spacing-4;
     }
 
-    > .mx_CallDuration {
+    .mx_LiveContentSummary {
-        padding: $spacing-4;
+        font-size: $font-12px;
     }
 
-    > .mx_CallEvent_button {
+    --facepile-background: $system;
-        box-sizing: border-box;
+}
-        min-width: 120px;
+
-    }
+.mx_CallEvent_title {
+    font-size: $font-15px;
+    line-height: 24px; /* in px to match the avatar */
+}
+
+.mx_CallEvent_inactive .mx_CallEvent_title::before {
+    display: inline-block;
+    vertical-align: middle;
+    content: "";
+    background-color: $secondary-content;
+    mask-image: url("$(res)/img/element-icons/call/video-call.svg");
+    mask-size: 16px;
+    width: 16px;
+    height: 16px;
+    margin-right: $spacing-8;
+}
+
+.mx_CallEvent_active .mx_CallEvent_title {
+    font-weight: $font-semi-bold;
+}
+
+.mx_CallEvent_columns {
+    flex-grow: 1;
+    display: flex;
+    gap: $spacing-12;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mx_TimelineCard .mx_CallEvent_columns {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: $spacing-8;
+}
+
+.mx_CallEvent_details {
+    flex-grow: 1;
+
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.mx_CallEvent_button {
+    box-sizing: border-box;
+    min-width: 120px;
 }

res/css/views/voip/_CallView.pcss

@@ -46,6 +46,8 @@ limitations under the License.
         padding: $spacing-12;
         color: $call-lobby-primary-content;
         background-color: $call-lobby-background;
+
+        --facepile-background: $call-lobby-background;
         border-radius: 8px;
 
         display: flex;
@@ -57,10 +59,6 @@ limitations under the License.
         .mx_FacePile {
             width: fit-content;
             margin: $spacing-8 auto 0;
-
-            .mx_FacePile_faces .mx_BaseAvatar_image {
-                border-color: $call-lobby-background;
-            }
         }
 
         .mx_CallView_preview {

res/img/element-icons/call/video-call.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 7C0 5.34315 1.34315 4 3 4H14C15.6569 4 17 5.34315 17 7V17C17 18.6569 15.6569 20 14 20H3C1.34315 20 0 18.6569 0 17V7Z" fill="white"/>
+<path d="M0 7C0 5.34315 1.34315 4 3 4H14C15.6569 4 17 5.34315 17 7V17C17 18.6569 15.6569 20 14 20H3C1.34315 20 0 18.6569 0 17V7Z" fill="currentColor"/>
-<path d="M19 9L22.3753 6.29976C23.0301 5.77595 24 6.24212 24 7.08062V16.9194C24 17.7579 23.0301 18.2241 22.3753 17.7002L19 15V9Z" fill="white"/>
+<path d="M19 9L22.3753 6.29976C23.0301 5.77595 24 6.24212 24 7.08062V16.9194C24 17.7579 23.0301 18.2241 22.3753 17.7002L19 15V9Z" fill="currentColor"/>
 </svg>

src/components/views/messages/CallEvent.tsx

@@ -66,28 +66,30 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
                         width={24}
                         height={24}
                     />
-                    <div className="mx_CallEvent_infoRows">
+                    <div className="mx_CallEvent_columns">
-                        <span className="mx_CallEvent_title">
+                        <div className="mx_CallEvent_details">
-                            {_t("%(name)s started a video call", { name: senderName })}
+                            <span className="mx_CallEvent_title">
-                        </span>
+                                {_t("%(name)s started a video call", { name: senderName })}
-                        <LiveContentSummary
+                            </span>
-                            type={LiveContentType.Video}
+                            <LiveContentSummary
-                            text={_t("Video call")}
+                                type={LiveContentType.Video}
-                            active={false}
+                                text={_t("Video call")}
-                            participantCount={participatingMembers.length}
+                                active={false}
-                        />
+                                participantCount={participatingMembers.length}
-                        <FacePile members={facePileMembers} faceSize={24} overflow={facePileOverflow} />
+                            />
+                            <FacePile members={facePileMembers} faceSize={24} overflow={facePileOverflow} />
+                        </div>
+                        {call && <GroupCallDuration groupCall={call.groupCall} />}
+                        <AccessibleTooltipButton
+                            className="mx_CallEvent_button"
+                            kind={buttonKind}
+                            disabled={onButtonClick === null || buttonDisabledTooltip !== undefined}
+                            onClick={onButtonClick}
+                            tooltip={buttonDisabledTooltip}
+                        >
+                            {buttonText}
+                        </AccessibleTooltipButton>
                     </div>
-                    {call && <GroupCallDuration groupCall={call.groupCall} />}
-                    <AccessibleTooltipButton
-                        className="mx_CallEvent_button"
-                        kind={buttonKind}
-                        disabled={onButtonClick === null || buttonDisabledTooltip !== undefined}
-                        onClick={onButtonClick}
-                        tooltip={buttonDisabledTooltip}
-                    >
-                        {buttonText}
-                    </AccessibleTooltipButton>
                 </div>
             </div>
         );
@@ -164,15 +166,17 @@ export const CallEvent = forwardRef<any, CallEventProps>(({ mxEvent }, ref) => {
     const call = useCall(mxEvent.getRoomId()!);
     const latestEvent = client
         .getRoom(mxEvent.getRoomId())!
-        .currentState.getStateEvents(mxEvent.getType(), mxEvent.getStateKey()!);
+        .currentState.getStateEvents(mxEvent.getType(), mxEvent.getStateKey()!)!;
 
     if ("m.terminated" in latestEvent.getContent()) {
         // The call is terminated
         return (
             <div className="mx_CallEvent_wrapper" ref={ref}>
                 <div className="mx_CallEvent mx_CallEvent_inactive">
-                    <span className="mx_CallEvent_title">{_t("Video call ended")}</span>
+                    <div className="mx_CallEvent_columns">
-                    <CallDuration delta={latestEvent.getTs() - mxEvent.getTs()} />
+                        <span className="mx_CallEvent_title">{_t("Video call ended")}</span>
+                        <CallDuration delta={latestEvent.getTs() - mxEvent.getTs()} />
+                    </div>
                 </div>
             </div>
         );