a couple more UI tweaks

css/base.css

@@ -1721,15 +1721,19 @@ video {
   left: initial;
   width: 100%;
   height: 100%;
-  padding: 2rem;
+  padding: 5rem 3.5rem 2rem 3.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 }
 
-.incoming-call-badges {
+.incoming-call .caller-name {
-  text-align: center;
+  padding: 0.15rem 0.5rem;
+  border-radius: 0.35rem;
+  z-index: 1;
+  text-shadow: 0 0 1px white;
+  background-color: rgba(255, 255, 255, 0.7);
 }
 
 .call-message {

src/views/tinode-web.jsx

@@ -11,7 +11,7 @@ import { Drafty, Tinode } from 'tinode-sdk';
 import Alert from '../widgets/alert.jsx';
 import ContextMenu from '../widgets/context-menu.jsx';
 import ForwardDialog from '../widgets/forward-dialog.jsx';
-import IncomingCall from '../widgets/call-incoming.jsx';
+import CallIncoming from '../widgets/call-incoming.jsx';
 
 import InfoView from './info-view.jsx';
 import MessagesView from './messages-view.jsx';
@@ -1858,7 +1858,7 @@ class TinodeWeb extends React.Component {
           null
         }
         {this.state.callTopic && this.state.callState == CALL_STATE_INCOMING_RECEIVED ?
-          <IncomingCall
+          <CallIncoming
             tinode={this.tinode}
             onClose={this.handleCallClose}
             topic={this.state.callTopic}

src/widgets/contact.jsx

@@ -74,7 +74,7 @@ class Contact extends React.Component {
     if (this.props.previewIsVideoCall) {
       // TODO: use words to describe call status and duration.
       preview = <CallStatus
-        direction={this.props.previewIsResponse}
+        incoming={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;

umd/index.dev.js

@@ -12506,7 +12506,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
 
     if (this.props.previewIsVideoCall) {
       preview = react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_call_status_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
-        direction: this.props.previewIsResponse,
+        incoming: this.props.previewIsResponse,
         success: true
       });
     } else if (typeof this.props.preview == 'string') {