From 24e6fc96f6c84b1d1676ee609671abbb3663ddfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 24 Jul 2021 14:04:22 +0200
Subject: [PATCH] Reorganize content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/toasts/_IncomingCallToast.scss | 22 +++----
 src/toasts/IncomingCallToast.tsx             | 61 ++++++++++----------
 2 files changed, 36 insertions(+), 47 deletions(-)

diff --git a/res/css/views/toasts/_IncomingCallToast.scss b/res/css/views/toasts/_IncomingCallToast.scss
index 02b27a94ab..d2947395dc 100644
--- a/res/css/views/toasts/_IncomingCallToast.scss
+++ b/res/css/views/toasts/_IncomingCallToast.scss
@@ -18,10 +18,12 @@ limitations under the License.
 .mx_IncomingCallToast {
     // mx_Toast overrides
     padding: 8px !important;
-    display: unset !important;
+    display: flex !important;
     top: 8px !important;
     border-radius: 8px;
 
+    flex-direction: row;
+    gap: 8px;
     min-width: 250px;
     box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
     background-color: $voipcall-plinth-color; // To match mx_Toast
@@ -29,20 +31,9 @@ limitations under the License.
     pointer-events: initial; // restore pointer events so the user can accept/decline
     cursor: pointer;
 
-    .mx_IncomingCallToast_CallerInfo {
+    .mx_IncomingCallToast_content {
         display: flex;
-        direction: row;
-
-        img, .mx_BaseAvatar_initial {
-            margin: 8px;
-        }
-
-        > div {
-            display: flex;
-            flex-direction: column;
-
-            justify-content: center;
-        }
+        flex-direction: column;
 
         h1, p {
             margin: 0px;
@@ -57,7 +48,7 @@ limitations under the License.
     }
 
     .mx_IncomingCallToast_buttons {
-        padding: 8px;
+        margin-top: 8px;
         display: flex;
         flex-direction: row;
         gap: 12px;
@@ -74,6 +65,7 @@ limitations under the License.
     }
 
     .mx_IncomingCallToast_iconButton {
+        display: flex;
         position: absolute;
         right: 8px;
 
diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx
index 83cd7aba80..cff0c82782 100644
--- a/src/toasts/IncomingCallToast.tsx
+++ b/src/toasts/IncomingCallToast.tsx
@@ -87,12 +87,7 @@ export default class IncomingCallToast extends React.Component<IProps, IState> {
 
     public render() {
         const call = this.props.call;
-        let room = null;
-        room = MatrixClientPeg.get().getRoom(CallHandler.sharedInstance().roomIdForCall(call));
-
-        const caller = room ? room.name : _t("Unknown caller");
-
-        const incomingCallText = call.type === CallType.Voice ? _t("Incoming voice call") : _t("Incoming video call");
+        const room = MatrixClientPeg.get().getRoom(CallHandler.sharedInstance().roomIdForCall(call));
 
         const silenceClass = classNames({
             "mx_IncomingCallToast_iconButton": true,
@@ -101,37 +96,39 @@ export default class IncomingCallToast extends React.Component<IProps, IState> {
         });
 
         return <React.Fragment>
-            <div className="mx_IncomingCallToast_CallerInfo">
-                <RoomAvatar
-                    room={room}
-                    height={32}
-                    width={32}
-                />
-                <div>
-                    <h1>{ caller }</h1>
-                    <p>{ incomingCallText }</p>
-                </div>
+            <RoomAvatar
+                room={room}
+                height={32}
+                width={32}
+            />
+            <div className="mx_IncomingCallToast_content">
+                <h1>
+                    { room ? room.name : _t("Unknown caller") }
+                </h1>
+                <p>
+                    { call.type === CallType.Voice ? _t("Incoming voice call") : _t("Incoming video call") }
+                </p>
                 <AccessibleTooltipButton
                     className={silenceClass}
                     onClick={this.onSilenceClick}
                     title={this.state.silenced ? _t("Sound on") : _t("Silence call")}
                 />
-            </div>
-            <div className="mx_IncomingCallToast_buttons">
-                <AccessibleButton
-                    className="mx_IncomingCallToast_decline"
-                    onClick={this.onRejectClick}
-                    kind="danger"
-                >
-                    { _t("Decline") }
-                </AccessibleButton>
-                <AccessibleButton
-                    className="mx_IncomingCallToast_accept"
-                    onClick={this.onAnswerClick}
-                    kind="primary"
-                >
-                    { _t("Accept") }
-                </AccessibleButton>
+                <div className="mx_IncomingCallToast_buttons">
+                    <AccessibleButton
+                        className="mx_IncomingCallToast_decline"
+                        onClick={this.onRejectClick}
+                        kind="danger"
+                    >
+                        { _t("Decline") }
+                    </AccessibleButton>
+                    <AccessibleButton
+                        className="mx_IncomingCallToast_accept"
+                        onClick={this.onAnswerClick}
+                        kind="primary"
+                    >
+                        { _t("Accept") }
+                    </AccessibleButton>
+                </div>
             </div>
         </React.Fragment>;
     }