From 01324471daf96f62b684badafe97988d76a1620f Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Tue, 20 Dec 2022 13:41:41 -0500
Subject: [PATCH] Make call event tiles look less broken in the right panel

---
 res/css/views/elements/_FacePile.pcss       |  2 +-
 res/css/views/messages/_CallEvent.pcss      | 87 +++++++++++++--------
 res/css/views/voip/_CallView.pcss           |  5 +-
 res/img/element-icons/call/video-call.svg   |  4 +-
 src/components/views/messages/CallEvent.tsx | 50 ++++++------
 5 files changed, 85 insertions(+), 63 deletions(-)

diff --git a/res/css/views/elements/_FacePile.pcss b/res/css/views/elements/_FacePile.pcss
index 4b2a732aa084..8b59a7f48e59 100644
--- a/res/css/views/elements/_FacePile.pcss
+++ b/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 {
diff --git a/res/css/views/messages/_CallEvent.pcss b/res/css/views/messages/_CallEvent.pcss
index b9f41e88253c..599b2b86fe05 100644
--- a/res/css/views/messages/_CallEvent.pcss
+++ b/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 {
-        font-size: $font-15px;
-        line-height: 24px; /* in px to match the avatar */
+    > .mx_BaseAvatar,
+    > .mx_Icon {
+        align-self: flex-start;
     }
 
-    &.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_Icon {
+        padding: 0;
+        margin: $spacing-4 0;
+        color: $secondary-content;
     }
 
-    &.mx_CallEvent_active .mx_CallEvent_title {
-        font-weight: 600;
+    .mx_LiveContentSummary {
+        font-size: $font-12px;
     }
 
-    > .mx_BaseAvatar {
-        align-self: flex-start;
-    }
+    --facepile-background: $system;
+}
 
-    > .mx_CallEvent_infoRows {
-        flex-grow: 1;
+.mx_CallEvent_title {
+    font-size: $font-15px;
+    line-height: 24px; /* in px to match the avatar */
+}
 
-        display: flex;
-        flex-direction: column;
-        gap: $spacing-4;
-    }
+.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_CallDuration {
-        padding: $spacing-4;
-    }
+.mx_CallEvent_active .mx_CallEvent_title {
+    font-weight: $font-semi-bold;
+}
 
-    > .mx_CallEvent_button {
-        box-sizing: border-box;
-        min-width: 120px;
-    }
+.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;
 }
diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss
index fcdbce7351a4..17d3fd57f4d4 100644
--- a/res/css/views/voip/_CallView.pcss
+++ b/res/css/views/voip/_CallView.pcss
@@ -46,6 +46,7 @@ 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 +58,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 {
diff --git a/res/img/element-icons/call/video-call.svg b/res/img/element-icons/call/video-call.svg
index 0c1cd2d41987..1d9546d03404 100644
--- a/res/img/element-icons/call/video-call.svg
+++ b/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="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="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="currentColor"/>
 </svg>
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index 3006a4aebd29..45f77ef01a2f 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -66,28 +66,30 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
                         width={24}
                         height={24}
                     />
-                    <div className="mx_CallEvent_infoRows">
-                        <span className="mx_CallEvent_title">
-                            {_t("%(name)s started a video call", { name: senderName })}
-                        </span>
-                        <LiveContentSummary
-                            type={LiveContentType.Video}
-                            text={_t("Video call")}
-                            active={false}
-                            participantCount={participatingMembers.length}
-                        />
-                        <FacePile members={facePileMembers} faceSize={24} overflow={facePileOverflow} />
+                    <div className="mx_CallEvent_columns">
+                        <div className="mx_CallEvent_details">
+                            <span className="mx_CallEvent_title">
+                                {_t("%(name)s started a video call", { name: senderName })}
+                            </span>
+                            <LiveContentSummary
+                                type={LiveContentType.Video}
+                                text={_t("Video call")}
+                                active={false}
+                                participantCount={participatingMembers.length}
+                            />
+                            <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>
         );
@@ -171,8 +173,10 @@ export const CallEvent = forwardRef<any, CallEventProps>(({ mxEvent }, ref) => {
         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>
-                    <CallDuration delta={latestEvent.getTs() - mxEvent.getTs()} />
+                    <div className="mx_CallEvent_columns">
+                        <span className="mx_CallEvent_title">{_t("Video call ended")}</span>
+                        <CallDuration delta={latestEvent.getTs() - mxEvent.getTs()} />
+                    </div>
                 </div>
             </div>
         );