From 064544369a033fe3a84734466cca4710db9ac16a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 24 Jul 2021 19:30:37 +0200
Subject: [PATCH] Add call type icon
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 | 27 ++++++++++++++++++--
 src/toasts/IncomingCallToast.tsx             |  7 ++---
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/res/css/views/toasts/_IncomingCallToast.scss b/res/css/views/toasts/_IncomingCallToast.scss
index 665109bc0f..bcfb61ed21 100644
--- a/res/css/views/toasts/_IncomingCallToast.scss
+++ b/res/css/views/toasts/_IncomingCallToast.scss
@@ -35,7 +35,7 @@ limitations under the License.
         display: flex;
         flex-direction: column;
 
-        h1, p {
+        h1, .mx_CallEvent_type {
             margin: 0px;
             padding: 0px;
             font-size: $font-14px;
@@ -46,13 +46,36 @@ limitations under the License.
             font-weight: bold;
         }
 
+        .mx_CallEvent_type {
+            display: flex;
+            flex-direction: row;
+
+            .mx_CallEvent_type_icon {
+                height: 16px;
+                width: 16px;
+                margin-right: 6px;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    height: inherit;
+                    width: inherit;
+                    background-color: $tertiary-fg-color;
+                    mask-repeat: no-repeat;
+                    mask-size: contain;
+                }
+            }
+        }
+
         &.mx_IncomingCallToast_content_voice {
+            .mx_CallEvent_type .mx_CallEvent_type_icon::before,
             .mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
                 mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
             }
         }
 
         &.mx_IncomingCallToast_content_video {
+            .mx_CallEvent_type .mx_CallEvent_type_icon::before,
             .mx_IncomingCallToast_buttons .mx_IncomingCallToast_button_accept span::before {
                 mask-image: url('$(res)/img/element-icons/call/video-call.svg');
             }
@@ -107,7 +130,7 @@ limitations under the License.
 
                 height: 20px;
                 width: 20px;
-                background-color: $secondary-fg-color;
+                background-color: $tertiary-fg-color;
                 mask-repeat: no-repeat;
                 mask-size: contain;
                 mask-position: center;
diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx
index 9e5528d6a7..f8a7f0591f 100644
--- a/src/toasts/IncomingCallToast.tsx
+++ b/src/toasts/IncomingCallToast.tsx
@@ -109,9 +109,10 @@ export default class IncomingCallToast extends React.Component<IProps, IState> {
                 <h1>
                     { room ? room.name : _t("Unknown caller") }
                 </h1>
-                <p>
-                    { isVoice ? _t("Incoming voice call") : _t("Incoming video call") }
-                </p>
+                <div className="mx_CallEvent_type">
+                    <div className="mx_CallEvent_type_icon" />
+                    { isVoice ? _t("Voice call") : _t("Video call") }
+                </div>
                 <AccessibleTooltipButton
                     className={silenceClass}
                     onClick={this.onSilenceClick}