Multiple UI Improvements (#4069)

Minor contast fix for file uploading text.

Updating icon markup

Fixing icon for mentions

Removing irrelevant characters

Updating closing tag for mentions icon

8 files changed, 37 insertions, 18 deletions

diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx
index d55c2723b..72066780e 100644
--- a/webapp/components/navbar.jsx
+++ b/webapp/components/navbar.jsx
@@ -671,6 +671,7 @@ export default class Navbar extends React.Component {
                     show={this.state.showMembersModal}
                     onModalDismissed={() => this.setState({showMembersModal: false})}
                     channel={channel}
+                    isAdmin={isAdmin}
                 />
             );
 
diff --git a/webapp/components/select_team/select_team.jsx b/webapp/components/select_team/select_team.jsx
index 58bc107fe..084ff64b2 100644
--- a/webapp/components/select_team/select_team.jsx
+++ b/webapp/components/select_team/select_team.jsx
@@ -72,7 +72,7 @@ export default class SelectTeam extends React.Component {
                         >
                             <span className='signup-team-dir__name'>{team.display_name}</span>
                             <span
-                                className='fa fa-angle-right right signup-team-dir__arrow'
+                                className='fa fa-angle-right right signup-team__icon'
                                 aria-hidden='true'
                             />
                         </Link>
@@ -96,7 +96,7 @@ export default class SelectTeam extends React.Component {
                         >
                             <span className='signup-team-dir__name'>{openTeam.display_name}</span>
                             <span
-                                className='fa fa-angle-right right signup-team-dir__arrow'
+                                className='fa fa-angle-right right signup-team__icon'
                                 aria-hidden='true'
                             />
                         </Link>
diff --git a/webapp/components/sidebar_right_menu.jsx b/webapp/components/sidebar_right_menu.jsx
index 6f6a32a5e..757a919c3 100644
--- a/webapp/components/sidebar_right_menu.jsx
+++ b/webapp/components/sidebar_right_menu.jsx
@@ -389,6 +389,7 @@ export default class SidebarRightMenu extends React.Component {
                                 />
                             </a>
                         </li>
+                        <li className='divider'/>
                         <li>
                             <a
                                 href='#'
@@ -401,9 +402,10 @@ export default class SidebarRightMenu extends React.Component {
                                 />
                             </a>
                         </li>
-                        {teamSettingsLink}
                         {inviteLink}
                         {teamLink}
+                        <li className='divider'/>
+                        {teamSettingsLink}
                         {manageLink}
                         {consoleLink}
                         <li>
@@ -416,34 +418,35 @@ export default class SidebarRightMenu extends React.Component {
                             </Link>
                         </li>
                         <li className='divider'/>
+                        {helpLink}
+                        {reportLink}
                         <li>
                             <a
                                 href='#'
-                                onClick={GlobalActions.emitUserLoggedOutEvent}
+                                onClick={this.handleAboutModal}
                             >
-                                <i className='icon fa fa-sign-out'/>
+                                <i className='icon fa fa-info'/>
                                 <FormattedMessage
-                                    id='sidebar_right_menu.logout'
-                                    defaultMessage='Logout'
+                                    id='navbar_dropdown.about'
+                                    defaultMessage='About Mattermost'
                                 />
                             </a>
                         </li>
                         <li className='divider'/>
-                        {helpLink}
-                        {reportLink}
+                        {nativeAppLink}
+                        <li className='divider'/>
                         <li>
                             <a
                                 href='#'
-                                onClick={this.handleAboutModal}
+                                onClick={GlobalActions.emitUserLoggedOutEvent}
                             >
-                                <i className='icon fa fa-info'/>
+                                <i className='icon fa fa-sign-out'/>
                                 <FormattedMessage
-                                    id='navbar_dropdown.about'
-                                    defaultMessage='About Mattermost'
+                                    id='sidebar_right_menu.logout'
+                                    defaultMessage='Logout'
                                 />
                             </a>
                         </li>
-                        {nativeAppLink}
                     </ul>
                 </div>
                 <UserSettingsModal
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 7e1ccc554..ee13e3c54 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -217,6 +217,12 @@
 .sidebar--left,
 .sidebar--menu,
 .admin-sidebar {
+
+    .divider {
+        border-top: 1px solid transparent;
+        margin: 0.5em 0;
+    }
+
     .team__header {
         @include legacy-pie-clearfix;
         padding: 9px 10px;
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 3ee4fe025..9ca9149fa 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -87,7 +87,7 @@
         }
 
         .post-right-comments-upload-in-progress {
-            color: #a8adb7;
+            @include opacity(.7);
             margin-right: 10px;
             padding: 6px 0;
         }
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index c39870bd8..f819bd4d0 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -5,6 +5,8 @@
         .tutorial__content {
             .tutorial__steps {
                 margin-bottom: 0;
+                min-height: auto;
+                padding-bottom: 8em;
             }
         }
     }
diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss
index 106cdc372..48ccdb3b1 100644
--- a/webapp/sass/routes/_signup.scss
+++ b/webapp/sass/routes/_signup.scss
@@ -484,13 +484,20 @@
         width: 90%;
     }
 
-    .signup-team-dir__arrow {
+    .signup-team__icon {
         color: $dark-gray;
         float: right;
         font-size: 1.5em;
         line-height: 25px;
         position: relative;
         top: .66em;
+
+        &.fa-spin {
+            color: $gray;
+            font-size: .9em;
+            right: 10px;
+            top: 16px;
+        }
     }
 }
 
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 542106d8e..d59687606 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -489,7 +489,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .sidebar--left .nav-pills__container li>h4, .app__body .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1);
         changeCss('.app__body .sidebar--left .add-channel-btn:hover, .app__body .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1);
         changeCss('.app__body .sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText, 1);
-        changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2);
+        changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2);
     }
 
     if (theme.sidebarUnreadText) {
@@ -577,7 +577,7 @@ export function applyTheme(theme) {
 
     if (theme.centerChannelColor) {
         changeCss('.app__body .post-list__arrows, .app__body .post .flag-icon__container', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
-        changeCss('.app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon', 'fill:' + theme.centerChannelColor, 1);
+        changeCss('.app__body .modal .status .offline--icon, .app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon', 'fill:' + theme.centerChannelColor, 1);
         changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2);
         changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1);