From 9ec3d93402222a83883424ceddbaa09214c0f077 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 8 Jul 2021 14:19:02 +0200
Subject: [PATCH] Better handling of call types
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      | 20 ++++++++++++--------
 src/components/views/messages/CallEvent.tsx | 12 ++++++------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/res/css/views/messages/_CallEvent.scss b/res/css/views/messages/_CallEvent.scss
index c700eec42e..9c5de99aba 100644
--- a/res/css/views/messages/_CallEvent.scss
+++ b/res/css/views/messages/_CallEvent.scss
@@ -27,6 +27,18 @@ limitations under the License.
     box-sizing: border-box;
     height: 60px;
 
+    &.mx_CallEvent_voice {
+        .mx_CallEvent_type_icon::before {
+            mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
+        }
+    }
+
+    &.mx_CallEvent_video {
+        .mx_CallEvent_type_icon::before {
+            mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+        }
+    }
+
     .mx_CallEvent_info {
         display: flex;
         flex-direction: row;
@@ -68,14 +80,6 @@ limitations under the License.
                         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 d4781a7872..edbfdff6de 100644
--- a/src/components/views/messages/CallEvent.tsx
+++ b/src/components/views/messages/CallEvent.tsx
@@ -187,14 +187,14 @@ export default class CallEvent extends React.Component<IProps, IState> {
         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,
+        const className = classNames({
+            mx_CallEvent: true,
+            mx_CallEvent_voice: isVoice,
+            mx_CallEvent_video: !isVoice,
         });
 
         return (
-            <div className="mx_CallEvent">
+            <div className={className}>
                 <div className="mx_CallEvent_info">
                     <MemberAvatar
                         member={event.sender}
@@ -206,7 +206,7 @@ export default class CallEvent extends React.Component<IProps, IState> {
                             { sender }
                         </div>
                         <div className="mx_CallEvent_type">
-                            <div className={callTypeIconClass}></div>
+                            <div className="mx_CallEvent_type_icon"></div>
                             { callType }
                         </div>
                     </div>