call status in message preview was isolated in a class and made prettier

css/base.css

@@ -2460,6 +2460,17 @@ ul.tabbar li.active > a {
 .material-icons.huge {
   font-size: 4rem;
 }
+.composed-material {
+  display: inline-block;
+  position: relative;
+}
+.composed-material i:nth-child(2) {
+  position: absolute;
+  font-size: 85%;
+  top: 0;
+  left: 39%;
+  font-weight: bold;
+}
 
 #self-avatar .material-icons {
   font-size: 2.4rem;

src/widgets/call-status.jsx

@@ -0,0 +1,18 @@
+// The counter of unread messages in the topic.
+import React from 'react';
+
+// Props:
+//  incoming: true | false.
+//  success: true | false.
+export default class CallStatus extends React.PureComponent {
+  render() {
+    const icon2 = [['call_received', 'call_missed'],['call_made', 'call_missed_outgoing']]
+      [this.props.incoming ? 0 : 1][this.props.success ? 0 : 1] || 'question_mark';
+
+    return (
+      <div className="composed-material">
+        <i class="material-icons">call</i><i class="material-icons second">{icon2}</i>
+      </div>
+    );
+  }
+};

src/widgets/contact.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
+import CallStatus from './call-status.jsx';
 import ContactBadges from './contact-badges.jsx';
 import LetterTile from './letter-tile.jsx';
 import UnreadBadge from './unread-badge.jsx';
@@ -71,10 +72,10 @@ class Contact extends React.Component {
     // The this.props.preview contains alreay shortened Drafty or string.
     let preview;
     if (this.props.previewIsVideoCall) {
-      preview = <>
+      // TODO: use words to describe call status and duration.
-        <i className="material-icons">call</i>
+      preview = <CallStatus
-        <i className="material-icons medium">{this.props.previewIsResponse ? 'call_received' : 'call_made'}</i>
+        direction={this.props.previewIsResponse}
-      </>;
+        success={true} />; // FIXME: use actuall call completion status instead of TRUE.
     } else if (typeof this.props.preview == 'string') {
       preview = this.props.preview;
     } else if (Drafty.isValid(this.props.preview)) {