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

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}
                 />
             );
 

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>

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,19 +418,6 @@ export default class SidebarRightMenu extends React.Component {
                             </Link>
                         </li>
                         <li className='divider'/>
-                        <li>
-                            <a
-                                href='#'
-                                onClick={GlobalActions.emitUserLoggedOutEvent}
-                            >
-                                <i className='icon fa fa-sign-out'/>
-                                <FormattedMessage
-                                    id='sidebar_right_menu.logout'
-                                    defaultMessage='Logout'
-                                />
-                            </a>
-                        </li>
-                        <li className='divider'/>
                         {helpLink}
                         {reportLink}
                         <li>
@@ -443,7 +432,21 @@ export default class SidebarRightMenu extends React.Component {
                                 />
                             </a>
                         </li>
+                        <li className='divider'/>
                         {nativeAppLink}
+                        <li className='divider'/>
+                        <li>
+                            <a
+                                href='#'
+                                onClick={GlobalActions.emitUserLoggedOutEvent}
+                            >
+                                <i className='icon fa fa-sign-out'/>
+                                <FormattedMessage
+                                    id='sidebar_right_menu.logout'
+                                    defaultMessage='Logout'
+                                />
+                            </a>
+                        </li>
                     </ul>
                 </div>
                 <UserSettingsModal

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;

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;
         }

webapp/sass/responsive/_mobile.scss

@@ -5,6 +5,8 @@
         .tutorial__content {
             .tutorial__steps {
                 margin-bottom: 0;
+                min-height: auto;
+                padding-bottom: 8em;
             }
         }
     }

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;
+        }
     }
 }
 

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);