Add call type icon

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

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');
+                }
             }
         }
     }

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>