Multiple UI Improvements

22 files changed, 112 insertions, 82 deletions

diff --git a/web/react/components/admin_console/email_settings.jsx b/web/react/components/admin_console/email_settings.jsx
index c028d605d..12480e7eb 100644
--- a/web/react/components/admin_console/email_settings.jsx
+++ b/web/react/components/admin_console/email_settings.jsx
@@ -447,7 +447,7 @@ export default class EmailSettings extends React.Component {
                             </div>
                             <div className='help-text'>
                                 <button
-                                    className='btn'
+                                    className='btn btn-default'
                                     onClick={this.handleTestConnection}
                                     disabled={!this.state.sendEmailNotifications}
                                     id='connection-button'
@@ -482,7 +482,7 @@ export default class EmailSettings extends React.Component {
                             <p className='help-text'>{'32-character salt added to signing of email invites. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
                             <div className='help-text'>
                                 <button
-                                    className='btn'
+                                    className='btn btn-default'
                                     onClick={this.handleGenerateInvite}
                                     disabled={!this.state.sendEmailNotifications}
                                 >
@@ -513,7 +513,7 @@ export default class EmailSettings extends React.Component {
                             <p className='help-text'>{'32-character salt added to signing of password reset emails. Randomly generated on install. Click "Re-Generate" to create new salt.'}</p>
                             <div className='help-text'>
                                 <button
-                                    className='btn'
+                                    className='btn btn-default'
                                     onClick={this.handleGenerateReset}
                                     disabled={!this.state.sendEmailNotifications}
                                 >
diff --git a/web/react/components/admin_console/gitlab_settings.jsx b/web/react/components/admin_console/gitlab_settings.jsx
index 5c22bf5cf..41c8ad2fc 100644
--- a/web/react/components/admin_console/gitlab_settings.jsx
+++ b/web/react/components/admin_console/gitlab_settings.jsx
@@ -116,12 +116,14 @@ export default class GitLabSettings extends React.Component {
                             <p className='help-text'>
                                 {'When true, Mattermost allows team creation and account signup using GitLab OAuth.'} <br/>
                             </p>
-                            <ol className='help-text'>
-                                <li>{'Log in to your GitLab account and go to Applications -> Profile Settings.'}</li>
-                                <li>{'Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". '}</li>
-                                <li>{'Then use "Secret" and "Id" fields from GitLab to complete the options below.'}</li>
-                                <li>{'Complete the Endpoint URLs below. '}</li>
-                            </ol>
+                            <div className='help-text'>
+                                <ol>
+                                    <li>{'Log in to your GitLab account and go to Applications -> Profile Settings.'}</li>
+                                    <li>{'Enter Redirect URIs "<your-mattermost-url>/login/gitlab/complete" (example: http://localhost:8065/login/gitlab/complete) and "<your-mattermost-url>/signup/gitlab/complete". '}</li>
+                                    <li>{'Then use "Secret" and "Id" fields from GitLab to complete the options below.'}</li>
+                                    <li>{'Complete the Endpoint URLs below. '}</li>
+                                </ol>
+                            </div>
                         </div>
                     </div>
 
diff --git a/web/react/components/admin_console/sql_settings.jsx b/web/react/components/admin_console/sql_settings.jsx
index 16a69e664..655daa30c 100644
--- a/web/react/components/admin_console/sql_settings.jsx
+++ b/web/react/components/admin_console/sql_settings.jsx
@@ -220,7 +220,7 @@ export default class SqlSettings extends React.Component {
                             <p className='help-text'>{'32-character salt available to encrypt and decrypt sensitive fields in database.'}</p>
                             <div className='help-text'>
                                 <button
-                                    className='help-link'
+                                    className='btn btn-default'
                                     onClick={this.handleGenerate}
                                 >
                                     {'Re-Generate'}
diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx
index d0d6ab5e2..270631db2 100644
--- a/web/react/components/channel_loader.jsx
+++ b/web/react/components/channel_loader.jsx
@@ -75,15 +75,6 @@ export default class ChannelLoader extends React.Component {
             Utils.applyTheme(Constants.THEMES.default);
         }
 
-        /* Setup global mouse events */
-        $('body').on('click', function hidePopover(e) {
-            $('[data-toggle="popover"]').each(function eachPopover() {
-                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
-                    $(this).popover('hide');
-                }
-            });
-        });
-
         $('body').on('mouseenter mouseleave', '.post', function mouseOver(ev) {
             if (ev.type === 'mouseenter') {
                 $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 2ac5d2179..fa3f82c2e 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -46,7 +46,9 @@ export default class CreateComment extends React.Component {
     componentDidUpdate(prevProps, prevState) {
         if (prevState.uploadsInProgress < this.state.uploadsInProgress) {
             $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
-            $('.post-right__scroll').perfectScrollbar('update');
+            if ($(window).width() > 768) {
+                $('.post-right__scroll').perfectScrollbar('update');
+            }
         }
     }
     handleSubmit(e) {
diff --git a/web/react/components/email_verify.jsx b/web/react/components/email_verify.jsx
index 9be7f97f8..940b01f8d 100644
--- a/web/react/components/email_verify.jsx
+++ b/web/react/components/email_verify.jsx
@@ -39,11 +39,9 @@ export default class EmailVerify extends React.Component {
 
         return (
             <div className='col-sm-12'>
-                <div className='panel panel-default verify_panel'>
-                    <div className='panel-heading'>
-                        <h3 className='panel-title'>{title}</h3>
-                    </div>
-                    <div className='panel-body'>
+                <div className='signup-team__container'>
+                    <h3>{title}</h3>
+                    <div>
                         {body}
                         {resend}
                         {resendConfirm}
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 6503bd801..b07349df3 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -13,6 +13,8 @@ const Utils = require('../utils/utils.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
+var Popover = ReactBootstrap.Popover;
+var OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 export default class Navbar extends React.Component {
     constructor(props) {
@@ -36,12 +38,6 @@ export default class Navbar extends React.Component {
         ChannelStore.addChangeListener(this.onChange);
         ChannelStore.addExtraInfoChangeListener(this.onChange);
         $('.inner__wrap').click(this.hideSidebars);
-
-        $('body').on('click.infopopover', function handlePopoverClick(e) {
-            if ($(e.target).attr('data-toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) {
-                $('.info-popover').popover('hide');
-            }
-        });
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onChange);
@@ -224,11 +220,14 @@ export default class Navbar extends React.Component {
             return (
                 <div className='navbar-brand'>
                     <div className='dropdown'>
-                        <div
-                            data-toggle='popover'
-                            data-content={popoverContent}
-                            className='description info-popover'
-                        />
+                        <OverlayTrigger
+                            trigger='click'
+                            placement='bottom'
+                            rootClose='true'
+                            overlay={<Popover>{popoverContent}</Popover>}
+                        >
+                        <div className='description info-popover'/>
+                        </OverlayTrigger>
                         <a
                             href='#'
                             className='dropdown-toggle theme'
@@ -330,7 +329,7 @@ export default class Navbar extends React.Component {
         var isDirect = false;
 
         if (channel) {
-            popoverContent = React.renderToString(
+            popoverContent = (
                 <MessageWrapper
                     message={channel.description}
                     options={{singleline: true, mentionHighlight: false}}
@@ -354,9 +353,9 @@ export default class Navbar extends React.Component {
             }
 
             if (channel.description.length === 0) {
-                popoverContent = React.renderToString(
+                popoverContent = (
                     <div>
-                        No channel description yet. <br/>
+                        {'No channel description yet.'} <br/>
                         <a
                             href='#'
                             data-toggle='modal'
@@ -365,8 +364,8 @@ export default class Navbar extends React.Component {
                             data-channelid={channel.id}
                             data-target='#edit_channel'
                         >
-                            Click here
-                        </a> to add one.</div>
+                            {'Click here'}
+                        </a> {'to add one.'}</div>
                 );
             }
         }
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index 5d9052fd7..16ae693fa 100644
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -2,6 +2,8 @@
 // See License.txt for license information.
 
 var UserStore = require('../stores/user_store.jsx');
+var Popover = ReactBootstrap.Popover;
+var OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 export default class PopoverListMembers extends React.Component {
     componentDidMount() {
@@ -24,16 +26,9 @@ export default class PopoverListMembers extends React.Component {
                 });
             }
         };
-
-        $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true});
-        $('body').on('click', function onClick(e) {
-            if (e.target.parentNode && $(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) {
-                $('#member_popover').popover('hide');
-            }
-        });
     }
     render() {
-        let popoverHtml = '';
+        let popoverHtml = [];
         let count = 0;
         let countText = '-';
         const members = this.props.members;
@@ -46,7 +41,7 @@ export default class PopoverListMembers extends React.Component {
 
             members.forEach(function addMemberElement(m) {
                 if (teamMembers[m.username] && teamMembers[m.username].delete_at <= 0) {
-                    popoverHtml += `<div class='text--nowrap'>${m.username}</div>`;
+                    popoverHtml.push(<div className='text--nowrap'>{m.username}</div>);
                     count++;
                 }
             });
@@ -59,15 +54,14 @@ export default class PopoverListMembers extends React.Component {
         }
 
         return (
-            <div
-                id='member_popover'
-                data-toggle='popover'
-                data-content={popoverHtml}
-                data-original-title='Members'
+            <OverlayTrigger
+                trigger='click'
+                placement='bottom'
+                rootClose='true'
+                overlay={<Popover title='Members'>{popoverHtml}</Popover>}
             >
-                <div
-                    id='member_tooltip'
-                >
+            <div id='member_popover'>
+                <div>
                     {countText}
                     <span
                         className='fa fa-user'
@@ -75,6 +69,7 @@ export default class PopoverListMembers extends React.Component {
                     />
                 </div>
             </div>
+            </OverlayTrigger>
         );
     }
 }
diff --git a/web/react/components/rhs_thread.jsx b/web/react/components/rhs_thread.jsx
index 41fd74adb..131253aa5 100644
--- a/web/react/components/rhs_thread.jsx
+++ b/web/react/components/rhs_thread.jsx
@@ -52,8 +52,6 @@ export default class RhsThread extends React.Component {
         if ($('.post-right__scroll')[0]) {
             $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
         }
-
-        $('.post-right__scroll').perfectScrollbar('update');
         this.resize();
     }
     componentWillUnmount() {
@@ -100,8 +98,10 @@ export default class RhsThread extends React.Component {
         var height = $(window).height() - $('#error_bar').outerHeight() - 100;
         $('.post-right__scroll').css('height', height + 'px');
         $('.post-right__scroll').scrollTop(100000);
-        $('.post-right__scroll').perfectScrollbar();
-        $('.post-right__scroll').perfectScrollbar('update');
+        if ($(window).width() > 768) {
+            $('.post-right__scroll').perfectScrollbar();
+            $('.post-right__scroll').perfectScrollbar('update');
+        }
     }
     render() {
         var postList = this.state.postList;
diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx
index 5eea3c501..e55fd3752 100644
--- a/web/react/components/search_results.jsx
+++ b/web/react/components/search_results.jsx
@@ -56,7 +56,9 @@ export default class SearchResults extends React.Component {
         var height = $(window).height() - $('#error_bar').outerHeight() - 100;
         $('#search-items-container').css('height', height + 'px');
         $('#search-items-container').scrollTop(0);
-        $('#search-items-container').perfectScrollbar();
+        if ($(window).width() > 768) {
+            $('#search-items-container').perfectScrollbar();
+        }
     }
 
     render() {
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 1308165a9..e7d90bb88 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -134,7 +134,9 @@ export default class Sidebar extends React.Component {
 
         AsyncClient.getDirectChannelPreferences();
 
-        $('.nav-pills__container').perfectScrollbar();
+        if ($(window).width() > 768) {
+            $('.nav-pills__container').perfectScrollbar();
+        }
 
         this.updateTitle();
         this.updateUnreadIndicators();
diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index cc6165c1b..782cb0659 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -3,6 +3,8 @@
 
 var Utils = require('../utils/utils.jsx');
 var UserStore = require('../stores/user_store.jsx');
+var Popover = ReactBootstrap.Popover;
+var OverlayTrigger = ReactBootstrap.OverlayTrigger;
 
 var id = 0;
 
@@ -32,7 +34,6 @@ export default class UserProfile extends React.Component {
     componentDidMount() {
         UserStore.addChangeListener(this.onChange);
         if (!this.props.disablePopover) {
-            $('#profile_' + this.uniqueId).popover({placement: 'right', container: 'body', trigger: 'click hover', html: true, delay: {show: 200, hide: 100}});
             $('body').tooltip({selector: '[data-toggle=tooltip]', trigger: 'hover click'});
         }
     }
@@ -62,23 +63,46 @@ export default class UserProfile extends React.Component {
             return <div>{name}</div>;
         }
 
-        var dataContent = '<img class="user-popover__image" src="/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at + '" height="128" width="128" />';
+        var dataContent = [];
+        dataContent.push(
+            <img className='user-popover__image'
+                src={'/api/v1/users/' + this.state.profile.id + '/image?time=' + this.state.profile.update_at}
+                height='128'
+                width='128'
+            />
+        );
         if (!global.window.config.ShowEmailAddress === 'true') {
-            dataContent += '<div class="text-nowrap">Email not shared</div>';
+            dataContent.push(<div className='text-nowrap'>{'Email not shared'}</div>);
         } else {
-            dataContent += '<div data-toggle="tooltip" title="' + this.state.profile.email + '"><a href="mailto:' + this.state.profile.email + '" class="text-nowrap text-lowercase user-popover__email">' + this.state.profile.email + '</a></div>';
+            dataContent.push(
+                <div
+                    data-toggle='tooltip'
+                    title="' + this.state.profile.email + '"
+                >
+                    <a
+                        href="mailto:' + this.state.profile.email + '"
+                        className='text-nowrap text-lowercase user-popover__email'
+                    >
+                        {this.state.profile.email}
+                    </a>
+                </div>
+            );
         }
 
         return (
+            <OverlayTrigger
+                trigger={['hover', 'click']}
+                placement='right'
+                rootClose='true'
+                overlay={<Popover title={this.state.profile.username}>{dataContent}</Popover>}
+            >
             <div
                 className='user-popover'
                 id={'profile_' + this.uniqueId}
-                data-toggle='popover'
-                data-content={dataContent}
-                data-original-title={this.state.profile.username}
             >
                 {name}
             </div>
+            </OverlayTrigger>
         );
     }
 }
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index f93fe02e4..0457d620f 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -467,6 +467,10 @@ export function applyTheme(theme) {
         changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
         changeCss('.post-image__column .post-image__details', 'background:' + theme.centerChannelBg, 1);
         changeCss('.sidebar--right, .dropdown-menu, .popover', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.popover.bottom>.arrow:after', 'border-bottom-color:' + theme.centerChannelBg, 1);
+        changeCss('.popover.right>.arrow:after', 'border-right-color:' + theme.centerChannelBg, 1);
+        changeCss('.popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg, 1);
+        changeCss('.popover.top>.arrow:after', 'border-top-color:' + theme.centerChannelBg, 1);
         changeCss('.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1);
     }
 
diff --git a/web/sass-files/sass/partials/_admin-console.scss b/web/sass-files/sass/partials/_admin-console.scss
index 4b4fc1664..14f1d9c2f 100644
--- a/web/sass-files/sass/partials/_admin-console.scss
+++ b/web/sass-files/sass/partials/_admin-console.scss
@@ -15,12 +15,11 @@
             .nav {
                 li {
                     padding: 0;
+                    @include opacity(1);
                     .icon {
                         width: 17px;
                     }
                     > a {
-                        padding: 9px 15px;
-                        display: block;
                         &:hover, &.active, &:focus  {
                             background-color: #EAEAEA;
                         }
@@ -117,8 +116,10 @@
             .form-group {
                 margin-bottom: 25px;
             }
-            ul, ol {
-                padding-left: 23px;
+            .help-text {
+                ul, ol {
+                    padding-left: 23px;
+                }
             }
             .help-text {
                 margin: 10px 0 0 15px;
diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 44a474213..cb5ff67b5 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -39,10 +39,6 @@ img {
   height: auto;
 }
 
-.input-group-addon {
-  background: transparent;
-}
-
 .popover {
   color: #333;
   &.bottom, &.right, &.top, &.left {
@@ -53,6 +49,9 @@ img {
   .popover-title {
     background: rgba(black, 0.05);
   }
+  .popover-content {
+    white-space: pre-wrap;
+  }
 }
 
 .dropdown-menu {
@@ -182,6 +181,10 @@ a:focus, a:hover {
   background-color: white !important;
 }
 
+.alert {
+  padding: 8px 12px;
+}
+
 .emoji {
   width: 1.5em;
   height: 1.5em;
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index 6dbb82810..01057423d 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -194,6 +194,7 @@
     vertical-align: top;
 
     .file-details__name {
+      color: #333;
       font-size: 16px;
     }
     .file-details__info {
diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss
index 1aa942ad0..70c99f504 100644
--- a/web/sass-files/sass/partials/_markdown.scss
+++ b/web/sass-files/sass/partials/_markdown.scss
@@ -1,5 +1,6 @@
 .markdown__heading {
 	font-weight: 700;
+	line-height: 1.5;
 }
 .markdown__paragraph-inline {
 	display: inline;
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index b72176a11..9557d7570 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -93,6 +93,7 @@
 
 .post-right__scroll {
 	position: relative;
+	overflow: auto;
 }
 
 .post-right-comment-time {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index dbe6029ec..09f2c179e 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -586,11 +586,14 @@
         &.move--right {
             @include translate3d(0, 0, 0);
         }
+        .nav-pills__unread-indicator-bottom {
+            bottom: 10px;
+        }
         .badge {
             top: 13px;
         }
         > div {
-            padding-bottom: 105px;
+            padding-bottom: 65px;
         }
         .team__header {
             display: none;
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index 2de1b5380..ca90ec46d 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -67,6 +67,7 @@
 }
 
 .search-items-container {
+	overflow: auto;
 	position: relative;
 }
 
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index 24aaef059..831c19cff 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -69,7 +69,7 @@
         top: 66px;
     }
     .nav-pills__unread-indicator-bottom {
-        bottom: 10px;
+        bottom: 20px;
     }
 
     .nav {
diff --git a/web/templates/channel.html b/web/templates/channel.html
index 13fd80d75..4b8318d43 100644
--- a/web/templates/channel.html
+++ b/web/templates/channel.html
@@ -54,7 +54,7 @@
 <script>
   window.setup_channel_page({{ .Props }});
   $('body').tooltip( {selector: '[data-toggle=tooltip]'} );
-  $('.modal-body').css('max-height', $(window).height() - 150);
+  $('.modal-body').css('max-height', $(window).height() - 200);
   $('.modal-body').perfectScrollbar();
 </script>
 </body>