making call UI prettier

css/base.css

@@ -154,6 +154,22 @@ button.outline:focus, button.outline:hover, button.outline:active {
   background-color: #e8eaf6; /* indigo 50 */
 }
 
+button.danger {
+  background-color: #ec6560;
+  color: white;
+}
+button.danger:focus, button.danger:hover, button.danger:active {
+  background-color: #f77;
+}
+
+button.positive {
+  background-color: #9de39b;
+  color: white;
+}
+button.positive:focus, button.positive:hover, button.positive:active {
+  background-color: #7f7;
+}
+
 textarea, input {
   font-family: inherit;
   font-size: 1.1rem;
@@ -1562,6 +1578,88 @@ img.channel {
   font-size: 6rem;
 }
 
+/* Video-call related styles */
+
+#video-container {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255,255,255,0.90);
+}
+
+#video-container-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 3.2rem;
+  z-index: 1;
+  background-color: #eceff1;
+  box-shadow: 0px -2px 3px -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
+}
+
+#video-container-panel {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+.video-elem {
+  width: 50%;
+  position: relative;
+  background-color: #eee;
+  border-radius: 0.5rem;
+  border: 1px solid #ccc;
+  margin: 0.25rem;
+  box-sizing: content-box;
+}
+
+.video-elem:hover {
+  border: 2px solid #2196f3;
+}
+
+video {
+  width: 100%;
+}
+
+/* "You" badge. */
+.video-title {
+  position: absolute;
+  bottom: 0.25rem;
+  right: 0.25rem;
+  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);
+}
+
+.video-call-accept {
+  border-radius: 10px;
+  background-color: green;
+}
+
+.incoming-call-title {
+  text-align: center;
+  padding: 10px;
+}
+
+.incoming-call-badges {
+  text-align: center;
+}
+
+.incoming-call-actions {
+  text-align: center;
+  padding: 20px;
+}
+
 /* Talk bubbles */
 .chat-box {
   list-style: none;
@@ -2737,74 +2835,3 @@ ul.tabbar li.active > a {
     opacity: 0.3;
   }
 }
-
-#video-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-	height: 100%!important;
-  width: 85%;
-  margin: auto;
-  height: 80%;
-}
-
-video {
-  width:100%;
-}
-
-.video-container-panel {
-  -ms-flex-align: center!important;
-  align-items: center!important;
-  margin-top: 10%;
-  position:relative;
-}
-
-.video-elem {
-  width:50%;
-  float:left;
-  position:relative;
-  z-index:0;
-}
-
-.video-title {
-  position:absolute;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-  background-color: white;
-}
-
-#video-container-controls {
-  display: flex;
-  justify-content: center;
-  padding: 20px;
-}
-
-.video-call-accept {
-  border-radius: 10px;
-  background-color: green;
-}
-
-.video-call-hangup {
-  border-radius: 10px;
-  background-color: red;
-}
-
-.video-call-toggle-media {
-  border-radius: 10px;
-  background-color: gray;
-}
-
-.incoming-call-title {
-  text-align: center;
-  padding: 10px;
-}
-
-.incoming-call-badges {
-  text-align: center;
-}
-
-.incoming-call-actions {
-  text-align: center;
-  padding: 20px;
-}

src/views/incoming-call-view.jsx

@@ -148,10 +148,10 @@ export default class IncomingCallView extends React.Component {
             <div id="actions" className="group incoming-call-actions">
               {this.props.callState == CALL_STATE_INCOMING_RECEIVED ?
                 <>
-                  <button className="video-call-hangup" onClick={this.handleRejectCall}>
+                  <button className="danger" onClick={this.handleRejectCall}>
                     <i className="material-icons">call_end</i>
                   </button>
-                  <button className="video-call-accept" onClick={this.handleAcceptCall}>
+                  <button className="positive" onClick={this.handleAcceptCall}>
                     <i className="material-icons">call</i>
                   </button>
                 </>

src/widgets/call-panel.jsx

@@ -30,6 +30,7 @@ export default class CallPanel extends React.PureComponent {
 
     this.onInfo = this.onInfo.bind(this);
     this.start = this.start.bind(this);
+    this.stop = this.stop.bind(this);
 
     this.createPeerConnection = this.createPeerConnection.bind(this);
 
@@ -48,7 +49,6 @@ export default class CallPanel extends React.PureComponent {
     this.reportError = this.reportError.bind(this);
     this.handleGetUserMediaError = this.handleGetUserMediaError.bind(this);
 
-    this.stop = this.stop.bind(this);
     this.stopTracks = this.stopTracks.bind(this);
 
     this.handleCloseClick = this.handleCloseClick.bind(this);
@@ -60,6 +60,21 @@ export default class CallPanel extends React.PureComponent {
     this.handleVideoCallAccepted = this.handleVideoCallAccepted.bind(this);
   }
 
+  componentDidMount() {
+    const topic = this.props.topic;
+    this.previousOnInfo = topic.onInfo;
+    topic.onInfo = this.onInfo;
+    if ((this.props.callState == CALL_STATE_OUTGOING_INITATED ||
+         this.props.callState == CALL_STATE_IN_PROGRESS) && this.localRef.current) {
+      this.start();
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.topic.onInfo = this.previousOnInfo;
+    this.stop();
+  }
+
   handleVideoCallAccepted(info) {
     const pc = this.createPeerConnection();
     const stream = this.state.localStream;
@@ -91,21 +106,6 @@ export default class CallPanel extends React.PureComponent {
     }
   }
 
-  componentDidMount() {
-    const topic = this.props.topic;
-    this.previousOnInfo = topic.onInfo;
-    topic.onInfo = this.onInfo;
-    if ((this.props.callState == CALL_STATE_OUTGOING_INITATED ||
-         this.props.callState == CALL_STATE_IN_PROGRESS) && this.localRef.current) {
-      this.start();
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.topic.onInfo = this.previousOnInfo;
-    this.stop();
-  }
-
   start() {
     if (this.state.localStream) {
       console.log("You can't start a call because you already have one open!");
@@ -328,30 +328,8 @@ export default class CallPanel extends React.PureComponent {
 
     return (
       <>
-        <div id="topic-caption-panel" className="caption-panel">
-          {this.props.displayMobile ?
-            <a href="#" id="hide-message-view" onClick={(e) => {e.preventDefault(); this.props.onHideMessagesView();}}>
-              <i className="material-icons">arrow_back</i>
-            </a>
-            :
-            null}
-          <div className="avatar-box">
-            <LetterTile
-              tinode={this.props.tinode}
-              avatar={this.props.avatar}
-              topic={this.props.topic}
-              title={this.props.title} />
-          </div>
-          <div id="topic-title-group">
-            <div id="topic-title" className="panel-title">{
-              this.props.title ||
-              <i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
-                description="Title shown when the topic has no name" /></i>
-            }</div>
-          </div>
-        </div>
         <div id="video-container">
-          <div className="video-container-panel">
+          <div id="video-container-panel">
             <div className="video-elem">
               <video id="localVideo" ref={this.localRef} autoPlay muted playsInline></video>
               <div className="video-title">
@@ -368,11 +346,11 @@ export default class CallPanel extends React.PureComponent {
             </div>
           </div>
           <div id="video-container-controls">
-            <button className="video-call-hangup" onClick={this.handleCloseClick}>
+            <button className="danger" onClick={this.handleCloseClick}>
               <i className="material-icons">call_end</i>
             </button>
-            <button className="video-call-toggle-media" onClick={this.handleToggleCameraClick}><i className="material-icons">{videoIcon}</i></button>
+            <button className="secondary" onClick={this.handleToggleCameraClick}><i className="material-icons">{videoIcon}</i></button>
-            <button className="video-call-toggle-media" onClick={this.handleToggleMicClick}><i className="material-icons">{audioIcon}</i></button>
+            <button className="secondary" onClick={this.handleToggleMicClick}><i className="material-icons">{audioIcon}</i></button>
           </div>
         </div>
       </>

umd/index.dev.js

@@ -4557,12 +4557,12 @@ class IncomingCallView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Com
       id: "actions",
       className: "group incoming-call-actions"
     }, this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_6__.CALL_STATE_INCOMING_RECEIVED ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-      className: "video-call-hangup",
+      className: "danger",
       onClick: this.handleRejectCall
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons"
     }, "call_end")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-      className: "video-call-accept",
+      className: "positive",
       onClick: this.handleAcceptCall
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons"
@@ -11147,6 +11147,7 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     this.remoteRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
     this.onInfo = this.onInfo.bind(this);
     this.start = this.start.bind(this);
+    this.stop = this.stop.bind(this);
     this.createPeerConnection = this.createPeerConnection.bind(this);
     this.handleNegotiationNeededEvent = this.handleNegotiationNeededEvent.bind(this);
     this.handleICECandidateEvent = this.handleICECandidateEvent.bind(this);
@@ -11160,7 +11161,6 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     this.handleNewICECandidateMsg = this.handleNewICECandidateMsg.bind(this);
     this.reportError = this.reportError.bind(this);
     this.handleGetUserMediaError = this.handleGetUserMediaError.bind(this);
-    this.stop = this.stop.bind(this);
     this.stopTracks = this.stopTracks.bind(this);
     this.handleCloseClick = this.handleCloseClick.bind(this);
     this.handleToggleCameraClick = this.handleToggleCameraClick.bind(this);
@@ -11170,6 +11170,21 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     this.handleVideoCallAccepted = this.handleVideoCallAccepted.bind(this);
   }
 
+  componentDidMount() {
+    const topic = this.props.topic;
+    this.previousOnInfo = topic.onInfo;
+    topic.onInfo = this.onInfo;
+
+    if ((this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_OUTGOING_INITATED || this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_IN_PROGRESS) && this.localRef.current) {
+      this.start();
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.topic.onInfo = this.previousOnInfo;
+    this.stop();
+  }
+
   handleVideoCallAccepted(info) {
     const pc = this.createPeerConnection();
     const stream = this.state.localStream;
@@ -11206,21 +11221,6 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     }
   }
 
-  componentDidMount() {
-    const topic = this.props.topic;
-    this.previousOnInfo = topic.onInfo;
-    topic.onInfo = this.onInfo;
-
-    if ((this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_OUTGOING_INITATED || this.props.callState == _constants_js__WEBPACK_IMPORTED_MODULE_4__.CALL_STATE_IN_PROGRESS) && this.localRef.current) {
-      this.start();
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.topic.onInfo = this.previousOnInfo;
-    this.stop();
-  }
-
   start() {
     if (this.state.localStream) {
       console.log("You can't start a call because you already have one open!");
@@ -11431,39 +11431,9 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     const audioIcon = this.state.localStream != null && this.state.localStream.getAudioTracks()[0].enabled ? 'mic' : 'mic_off';
     const videoIcon = this.state.localStream != null && this.state.localStream.getVideoTracks()[0].enabled ? 'videocam' : 'videocam_off';
     return react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      id: "topic-caption-panel",
-      className: "caption-panel"
-    }, this.props.displayMobile ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
-      href: "#",
-      id: "hide-message-view",
-      onClick: e => {
-        e.preventDefault();
-        this.props.onHideMessagesView();
-      }
-    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
-      className: "material-icons"
-    }, "arrow_back")) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "avatar-box"
-    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_letter_tile_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
-      tinode: this.props.tinode,
-      avatar: this.props.avatar,
-      topic: this.props.topic,
-      title: this.props.title
-    })), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      id: "topic-title-group"
-    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      id: "topic-title",
-      className: "panel-title"
-    }, this.props.title || react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
-      id: "unnamed_topic",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Unnamed"
-      }]
-    }))))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "video-container"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-      className: "video-container-panel"
+      id: "video-container-panel"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "video-elem"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("video", {
@@ -11492,17 +11462,17 @@ class CallPanel extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompon
     }, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_5__.clipStr)(this.props.title, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_TITLE_LENGTH)) : null)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       id: "video-container-controls"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-      className: "video-call-hangup",
+      className: "danger",
       onClick: this.handleCloseClick
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons"
     }, "call_end")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-      className: "video-call-toggle-media",
+      className: "secondary",
       onClick: this.handleToggleCameraClick
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons"
     }, videoIcon)), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-      className: "video-call-toggle-media",
+      className: "secondary",
       onClick: this.handleToggleMicClick
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
       className: "material-icons"