From 1f9cd79bcfe4d5b3aeb024e72d316fa93297dbac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 24 Jul 2021 20:59:15 +0200
Subject: [PATCH] Fix some spacing and other tiny things
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 | 37 +++++++++++++-------
 src/toasts/IncomingCallToast.tsx             |  4 +--
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/res/css/views/toasts/_IncomingCallToast.scss b/res/css/views/toasts/_IncomingCallToast.scss
index 04f92bb095..6bdbcdb8b0 100644
--- a/res/css/views/toasts/_IncomingCallToast.scss
+++ b/res/css/views/toasts/_IncomingCallToast.scss
@@ -23,7 +23,6 @@ limitations under the License.
     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
@@ -33,21 +32,27 @@ limitations under the License.
     .mx_IncomingCallToast_content {
         display: flex;
         flex-direction: column;
+        margin-left: 8px;
 
-        h1, .mx_CallEvent_type {
-            margin: 0px;
-            padding: 0px;
-            font-size: $font-14px;
-            line-height: $font-16px;
-        }
-
-        h1 {
+        .mx_CallEvent_caller {
             font-weight: bold;
+            font-size: $font-15px;
+            line-height: $font-18px;
+
+            margin-top: 2px;
         }
 
         .mx_CallEvent_type {
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $tertiary-fg-color;
+
+            margin-top: 4px;
+            margin-bottom: 6px;
+
             display: flex;
             flex-direction: row;
+            align-items: center;
 
             .mx_CallEvent_type_icon {
                 height: 16px;
@@ -88,7 +93,7 @@ limitations under the License.
 
             .mx_IncomingCallToast_button {
                 height: 24px;
-                padding: 0px 12px;
+                padding: 0px 8px;
                 flex-shrink: 0;
                 flex-grow: 1;
                 margin-right: 0;
@@ -106,15 +111,21 @@ limitations under the License.
                         background-color: $button-fg-color;
                         mask-position: center;
                         mask-repeat: no-repeat;
-                        mask-size: 16px;
-                        width: 16px;
-                        height: 16px;
                         margin-right: 8px;
                     }
                 }
 
+                &.mx_IncomingCallToast_button_accept span::before {
+                    mask-size: 13px;
+                    width: 13px;
+                    height: 13px;
+                }
+
                 &.mx_IncomingCallToast_button_decline span::before {
                     mask-image: url('$(res)/img/element-icons/call/hangup.svg');
+                    mask-size: 16px;
+                    width: 16px;
+                    height: 16px;
                 }
             }
         }
diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx
index 7a7aacac12..8d14fbd883 100644
--- a/src/toasts/IncomingCallToast.tsx
+++ b/src/toasts/IncomingCallToast.tsx
@@ -106,9 +106,9 @@ export default class IncomingCallToast extends React.Component<IProps, IState> {
                 width={32}
             />
             <div className={contentClass}>
-                <h1>
+                <span className="mx_CallEvent_caller">
                     { room ? room.name : _t("Unknown caller") }
-                </h1>
+                </span>
                 <div className="mx_CallEvent_type">
                     <div className="mx_CallEvent_type_icon" />
                     { isVoice ? _t("Voice call") : _t("Video call") }