Move "Start Video Call" option to the bottom of the profile popover (#5853)

webapp/components/profile_popover.jsx

@@ -118,9 +118,7 @@ export default class ProfilePopover extends React.Component {
         if (webrtcEnabled && this.props.user.id !== this.state.currentUserId) {
             const isOnline = this.props.status !== UserStatuses.OFFLINE;
             let webrtcMessage;
-            let circleClass = 'offline';
             if (isOnline && !this.props.isBusy) {
-                circleClass = '';
                 webrtcMessage = (
                     <FormattedMessage
                         id='user_profile.webrtc.call'
@@ -143,32 +141,20 @@ export default class ProfilePopover extends React.Component {
                 );
             }
 
-            const webrtcTooltip = (
-                <Tooltip id='webrtcTooltip'>{webrtcMessage}</Tooltip>
-            );
-
             webrtc = (
                 <div
-                    className='webrtc__user-profile'
+                    data-toggle='tooltip'
                     key='makeCall'
+                    className='popover__row'
                 >
                     <a
                         href='#'
+                        className='text-nowrap user-popover__email'
                         onClick={() => this.initWebrtc()}
                         disabled={!isOnline}
                     >
-                        <OverlayTrigger
-                            delayShow={Constants.WEBRTC_TIME_DELAY}
-                            placement='top'
-                            overlay={webrtcTooltip}
-                        >
-                            <div
-                                id='webrtc-btn'
-                                className={'webrtc__button ' + circleClass}
-                            >
-                                <span dangerouslySetInnerHTML={{__html: Constants.VIDEO_ICON}}/>
-                            </div>
-                        </OverlayTrigger>
+                        <i className='fa fa-video-camera'/>
+                        {webrtcMessage}
                     </a>
                 </div>
             );
@@ -219,8 +205,6 @@ export default class ProfilePopover extends React.Component {
             );
         }
 
-        dataContent.push(webrtc);
-
         const email = this.props.user.email;
         if (global.window.mm_config.ShowEmailAddress === 'true' || UserStore.isSystemAdminForCurrentUser() || this.props.user === UserStore.getCurrentUser()) {
             dataContent.push(
@@ -244,7 +228,7 @@ export default class ProfilePopover extends React.Component {
                 <div
                     data-toggle='tooltip'
                     key='user-popover-dm'
-                    className='popover__row'
+                    className='popover__row first'
                 >
                     <a
                         href='#'
@@ -259,6 +243,7 @@ export default class ProfilePopover extends React.Component {
                     </a>
                 </div>
             );
+            dataContent.push(webrtc);
         }
 
         return (

webapp/sass/components/_popover.scss

@@ -36,10 +36,14 @@
     }
 
     .popover__row {
-        border-top: 1px solid transparent;
-        margin: 9px -15px 0;
+        margin: 0 -15px 0;
         padding: 9px 15px 0;
 
+        &.first {
+            border-top: 1px solid transparent;
+            margin-top: 9px;
+        }
+
         > a {
             > i {
                 margin-right: 5px;
@@ -80,6 +84,17 @@
     max-width: 200px;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    &[disabled] {
+        color: $video-circle-offline;
+
+        &:focus,
+        &:hover {
+            color: $video-circle-offline;
+            text-decoration: none;
+        }
+    }
+
 }
 
 .search-help-popover {

webapp/sass/components/_webrtc.scss

@@ -1,18 +1,5 @@
 @charset 'UTF-8';
 
-.webrtc__user-profile {
-    @include webrtc-button;
-    position: absolute;
-    right: 7px;
-    text-align: center;
-    top: 5px;
-
-    #webrtc-btn {
-        height: 23px;
-        width: 23px;
-    }
-}
-
 .webrtc__header {
     @include webrtc-button;
     float: left;