made incoming calls panel prettier

src/views/tinode-web.jsx

@@ -13,7 +13,7 @@ import ContextMenu from '../widgets/context-menu.jsx';
 import ForwardDialog from '../widgets/forward-dialog.jsx';
 
 import InfoView from './info-view.jsx';
-import IncomingCallView from './incoming-call-view.jsx';
+import IncomingCallView from '../widgets/call-incoming.jsx';
 import MessagesView from './messages-view.jsx';
 import SidepanelView from './sidepanel-view.jsx';
 
@@ -1857,6 +1857,20 @@ class TinodeWeb extends React.Component {
           :
           null
         }
+        {this.state.callTopic && this.state.callState == CALL_STATE_INCOMING_RECEIVED ?
+          <IncomingCallView
+            tinode={this.tinode}
+            onClose={this.handleCallClose}
+            topic={this.state.callTopic}
+            seq={this.state.callSeq}
+            callState={this.state.callState}
+            onRinging={this.handleCallRinging}
+            onAcceptCall={this.handleCallAcceptCall}
+            onReject={this.handleCallHangup}
+            />
+          :
+          null
+        }
         <Alert
           visible={this.state.alertVisible}
           title={this.state.alertParams.title}
@@ -2019,20 +2033,6 @@ class TinodeWeb extends React.Component {
           :
           null
         }
-        {this.state.callTopic && this.state.callState == CALL_STATE_INCOMING_RECEIVED ?
-          <IncomingCallView
-            tinode={this.tinode}
-            onClose={this.handleCallClose}
-            topic={this.state.callTopic}
-            seq={this.state.callSeq}
-            callState={this.state.callState}
-            onRinging={this.handleCallRinging}
-            onAcceptCall={this.handleCallAcceptCall}
-            onReject={this.handleCallHangup}
-            />
-          :
-          null
-        }
       </div>
     );
   }

src/widgets/call-incoming.jsx

@@ -2,11 +2,10 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import AvatarUpload from '../widgets/avatar-upload.jsx';
-import BadgeList from '../widgets/badge-list.jsx';
-import MenuCancel from '../widgets/menu-cancel.jsx';
+import BadgeList from './badge-list.jsx';
+import LetterTile from './letter-tile.jsx';
 
-import { MAX_TITLE_LENGTH } from '../config.js';
+import { MAX_TITLE_LENGTH, MAX_PEER_TITLE_LENGTH } from '../config.js';
 import { CALL_STATE_INCOMING_RECEIVED } from '../constants.js';
 
 import { makeImageUrl } from '../lib/blob-helpers.js';
@@ -38,6 +37,7 @@ export default class IncomingCallView extends React.Component {
     if (!topic) {
       return;
     }
+
     this.resetDesc(topic, this.props);
     if (this.props.callState == CALL_STATE_INCOMING_RECEIVED) {
       RING_SOUND.play();
@@ -118,47 +118,35 @@ export default class IncomingCallView extends React.Component {
   }
 
   render() {
-    let panelTitle = <FormattedMessage id="calls_incoming_title"
-        defaultMessage="Incoming Call" description="Incoming call title (Incoming call view)" />;
-
     return (
-      <div id="info-view">
-        <div className="caption-panel" id="info-caption-panel">
-          <div className="panel-title" id="info-title">{panelTitle}</div>
-          <div>
-            <MenuCancel onCancel={this.handleRejectCall} />
-          </div>
-        </div>
-        <div id="info-view-content" className="scrollable-panel">
-          <div className="panel-form-column">
-            <center>
-              <AvatarUpload
+      <div className="alert-container">
+        <div className="incoming-call">
+          <div className="caller-card incoming">
+            <div className="avatar-box">
+              <LetterTile
                 tinode={this.props.tinode}
-                avatar={this.state.avatar}
-                readOnly={true}
-                uid={this.props.topic}
+                avatar={this.state.avatar || true}
+                topic={this.props.topic}
                 title={this.state.fullName} />
-            </center>
-            <div className="group incoming-call-title">
-              <div className="large ellipsized">{clipStr(this.state.fullName)}</div>
-            </div>
-            <div className="group incoming-call-badges">
-              <BadgeList trustedBadges={this.state.trustedBadges} />
-            </div>
-            <div id="actions" className="group incoming-call-actions">
-              {this.props.callState == CALL_STATE_INCOMING_RECEIVED ?
-                <>
-                  <button className="danger" onClick={this.handleRejectCall}>
-                    <i className="material-icons">call_end</i>
-                  </button>
-                  <button className="positive" onClick={this.handleAcceptCall}>
-                    <i className="material-icons">call</i>
-                  </button>
-                </>
-                :
-                null
-              }
             </div>
+            <div className="caller-name">{clipStr(this.state.fullName, MAX_PEER_TITLE_LENGTH)}</div>
+          </div>
+          <div className="group incoming-call-badges">
+            <BadgeList trustedBadges={this.state.trustedBadges} />
+          </div>
+          <div className="controls">
+            {this.props.callState == CALL_STATE_INCOMING_RECEIVED ?
+              <>
+                <button className="danger" onClick={this.handleRejectCall}>
+                  <i className="material-icons">call_end</i>
+                </button>
+                <button className="positive" onClick={this.handleAcceptCall}>
+                  <i className="material-icons">call</i>
+                </button>
+              </>
+              :
+              null
+            }
           </div>
         </div>
       </div>

src/widgets/call-panel.jsx

@@ -1,8 +1,8 @@
-// CallPanel: displays local and remote viewports and controls.
+// CallPanel displays call in progress: local and remote viewports and controls.
 import React from 'react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import LetterTile from '../widgets/letter-tile.jsx';
+import LetterTile from './letter-tile.jsx';
 
 import { CALL_WEBRTC_CONFIG, MAX_PEER_TITLE_LENGTH } from '../config.js';
 import { CALL_STATE_OUTGOING_INITATED, CALL_STATE_IN_PROGRESS } from '../constants.js';
@@ -353,7 +353,7 @@ class CallPanel extends React.PureComponent {
           <div id="video-container-panel">
             <div className="call-party self">
               <video ref={this.localRef} autoPlay muted playsInline></video>
-              <div className="title inactive">
+              <div className="caller-name inactive">
                 <FormattedMessage id="calls_you_label"
                   defaultMessage="You" description="Shown over the local video screen" />
               </div>
@@ -361,8 +361,8 @@ class CallPanel extends React.PureComponent {
             <div className="call-party peer">
               <video ref={this.remoteRef} autoPlay playsInline></video>
               {remoteActive ?
-                <div className="title inactive">{peerTitle}</div> :
-                <div className="peer-card">
+                <div className="caller-name inactive">{peerTitle}</div> :
+                <div className="caller-card">
                   <div className="avatar-box">
                     <LetterTile
                       tinode={this.props.tinode}
@@ -370,12 +370,12 @@ class CallPanel extends React.PureComponent {
                       topic={this.props.topic}
                       title={this.props.title} />
                   </div>
-                  <div className="title">{peerTitle}</div>
+                  <div className="caller-name">{peerTitle}</div>
                 </div>
               }
             </div>
           </div>
-          <div id="video-container-controls">
+          <div className="controls">
             <button className="danger" onClick={this.handleCloseClick}><i className="material-icons">call_end</i></button>
             <button className="secondary" onClick={this.handleToggleCameraClick}><i className="material-icons">{videoIcon}</i></button>
             <button className="secondary" onClick={this.handleToggleMicClick}><i className="material-icons">{audioIcon}</i></button>