From 512c05465698f839b79da373effe86b56759638e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 17 Jun 2021 17:55:18 +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/messages/_CallEvent.scss      | 28 ++++++++++++++++++++-
 src/components/views/messages/CallEvent.tsx | 10 +++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index 5168514110..b4e2c15dbd 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -45,9 +45,35 @@ limitations under the License.
 
             .mx_CallEvent_type {
                 font-weight: 400;
-                color: gray;
+                color: $secondary-fg-color;
                 font-size: 1.2rem;
                 line-height: 1.5rem;
+                display: flex;
+                align-items: center;
+
+                .mx_CallEvent_type_icon {
+                    height: 13px;
+                    width: 13px;
+                    margin-right: 5px;
+
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        height: 13px;
+                        width: 13px;
+                        background-color: $tertiary-fg-color;
+                        mask-repeat: no-repeat;
+                        mask-size: contain;
+                    }
+                }
+
+                .mx_CallEvent_type_icon_voice::before {
+                    mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
+                }
+
+                .mx_CallEvent_type_icon_video::before {
+                    mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+                }
             }
         }
     }
diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
index cff7a46931..00b62e4482 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -23,6 +23,7 @@ import CallEventGrouper, { CallEventGrouperEvent, CustomCallState } from '../../
 import FormButton from '../elements/FormButton';
 import { CallErrorCode, CallState } from 'matrix-js-sdk/src/webrtc/call';
 import InfoTooltip, { InfoTooltipKind } from '../elements/InfoTooltip';
+import classNames from 'classnames';
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -158,8 +159,14 @@ export default class CallEvent extends React.Component<IProps, IState> {
     render() {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
-        const callType = this.props.callEventGrouper.isVoice ? _t("Voice call") : _t("Video call");
+        const isVoice = this.props.callEventGrouper.isVoice;
+        const callType = isVoice ? _t("Voice call") : _t("Video call");
         const content = this.renderContent(this.state.callState);
+        const callTypeIconClass = classNames({
+            mx_CallEvent_type_icon: true,
+            mx_CallEvent_type_icon_voice: isVoice,
+            mx_CallEvent_type_icon_video: !isVoice,
+        })
 
         return (
             <div className="mx_CallEvent">
@@ -174,6 +181,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
                             { sender }
                         </div>
                         <div className="mx_CallEvent_type">
+                            <div className={callTypeIconClass}></div>
                             { callType }
                         </div>
                     </div>