Ui fixes (#4987)

* PLT-5090 - Adding overflow for usrename on popover

* PLT-5089 - Updatng save button position

* PLT-5146 - Removing anchor on teamname/username

* Minor fixes for profile popover

* Adjusting constants call for sidebar header

5 files changed, 29 insertions, 27 deletions

diff --git a/webapp/components/profile_popover.jsx b/webapp/components/profile_popover.jsx
index 7cb2f7261..d7d9929ee 100644
--- a/webapp/components/profile_popover.jsx
+++ b/webapp/components/profile_popover.jsx
@@ -185,34 +185,34 @@ export default class ProfilePopover extends React.Component {
         const fullname = Utils.getFullName(this.props.user);
         if (fullname) {
             dataContent.push(
-                <div
-                    data-toggle='tooltip'
-                    title={fullname}
-                    key='user-popover-fullname'
+                <OverlayTrigger
+                    delayShow={Constants.WEBRTC_TIME_DELAY}
+                    placement='top'
+                    overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>}
                 >
-                    <p
-                        className='text-nowrap'
+                    <div
+                        className='overflow--ellipsis text-nowrap padding-bottom'
                     >
                         {fullname}
-                    </p>
-                </div>
+                    </div>
+                </OverlayTrigger>
             );
         }
 
         if (this.props.user.position) {
             const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH);
             dataContent.push(
-                <div
-                    data-toggle='tooltip'
-                    title={position}
-                    key='user-popover-position'
+                <OverlayTrigger
+                    delayShow={Constants.WEBRTC_TIME_DELAY}
+                    placement='top'
+                    overlay={<Tooltip id='positionTooltip'>{position}</Tooltip>}
                 >
-                    <p
-                        className='text-nowrap'
+                    <div
+                        className='overflow--ellipsis text-nowrap padding-bottom'
                     >
                         {position}
-                    </p>
-                </div>
+                    </div>
+                </OverlayTrigger>
             );
         }
 
diff --git a/webapp/components/setting_item_max.jsx b/webapp/components/setting_item_max.jsx
index 904e6c8d1..5971ce584 100644
--- a/webapp/components/setting_item_max.jsx
+++ b/webapp/components/setting_item_max.jsx
@@ -49,7 +49,7 @@ export default class SettingItemMax extends React.Component {
             submit = (
                 <input
                     type='submit'
-                    className='btn btn-sm btn-primary'
+                    className='btn btn-sm btn-primary pull-right'
                     href='#'
                     onClick={this.props.submit}
                     value={Utils.localizeMessage('setting_item_max.save', 'Save')}
@@ -88,7 +88,7 @@ export default class SettingItemMax extends React.Component {
                             {clientError}
                             {submit}
                             <a
-                                className='btn btn-sm theme'
+                                className='btn btn-sm pull-right'
                                 href='#'
                                 onClick={this.props.updateSection}
                             >
diff --git a/webapp/components/setting_picture.jsx b/webapp/components/setting_picture.jsx
index b74ee8eb7..d1ff60c6a 100644
--- a/webapp/components/setting_picture.jsx
+++ b/webapp/components/setting_picture.jsx
@@ -73,7 +73,7 @@ export default class SettingPicture extends React.Component {
                 />
             );
         } else {
-            var confirmButtonClass = 'btn btn-sm';
+            var confirmButtonClass = 'btn btn-sm pull-right';
             if (this.props.submitActive) {
                 confirmButtonClass += ' btn-primary';
             } else {
@@ -132,7 +132,7 @@ export default class SettingPicture extends React.Component {
                             </span>
                             {confirmButton}
                             <a
-                                className='btn btn-sm theme'
+                                className='btn btn-sm theme pull-right'
                                 href='#'
                                 onClick={self.props.updateSection}
                             >
diff --git a/webapp/components/sidebar_header.jsx b/webapp/components/sidebar_header.jsx
index a5fbd2659..d5db54c14 100644
--- a/webapp/components/sidebar_header.jsx
+++ b/webapp/components/sidebar_header.jsx
@@ -10,7 +10,7 @@ import * as Utils from 'utils/utils.jsx';
 import SidebarHeaderDropdown from './sidebar_header_dropdown.jsx';
 import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 
-import {Preferences, TutorialSteps} from 'utils/constants.jsx';
+import {Preferences, TutorialSteps, OVERLAY_TIME_DELAY} from 'utils/constants.jsx';
 import {createMenuTip} from 'components/tutorial/tutorial_tip.jsx';
 
 export default class SidebarHeader extends React.Component {
@@ -78,7 +78,7 @@ export default class SidebarHeader extends React.Component {
             teamNameWithToolTip = (
                 <OverlayTrigger
                     trigger={['hover', 'focus']}
-                    delayShow={1000}
+                    delayShow={OVERLAY_TIME_DELAY}
                     placement='bottom'
                     overlay={<Tooltip id='team-name__tooltip'>{this.props.teamDescription}</Tooltip>}
                     ref='descriptionOverlay'
@@ -91,16 +91,13 @@ export default class SidebarHeader extends React.Component {
         return (
             <div className='team__header theme'>
                 {tutorialTip}
-                <a
-                    href='#'
-                    onClick={this.toggleDropdown}
-                >
+                <div>
                     {profilePicture}
                     <div className='header__info'>
                         <div className='user__name'>{'@' + me.username}</div>
                         {teamNameWithToolTip}
                     </div>
-                </a>
+                </div>
                 <SidebarHeaderDropdown
                     ref='dropdown'
                     teamType={this.props.teamType}
diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index f595e0ed9..1d3f1d052 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -26,6 +26,11 @@ body {
     word-break: break-all;
 }
 
+.overflow--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .fa {
     &.fa-margin--left {
         margin-left: 2px;