Reorganize content

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

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,21 +31,10 @@ 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;
-        }
-
         h1, p {
             margin: 0px;
             padding: 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;
 

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;
+        const room = MatrixClientPeg.get().getRoom(CallHandler.sharedInstance().roomIdForCall(call));
-        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 silenceClass = classNames({
             "mx_IncomingCallToast_iconButton": true,
@@ -101,22 +96,23 @@ 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>
+            <div className="mx_IncomingCallToast_content">
-                    <h1>{ caller }</h1>
+                <h1>
-                    <p>{ incomingCallText }</p>
+                    { room ? room.name : _t("Unknown caller") }
-                </div>
+                </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"
@@ -133,6 +129,7 @@ export default class IncomingCallToast extends React.Component<IProps, IState> {
                         { _t("Accept") }
                     </AccessibleButton>
                 </div>
+            </div>
         </React.Fragment>;
     }
 }