Multiple UI improvements (#4835)

* Updating sizes for teams sidebar

* PLT-4641 - Rearranging notification option

* PLT-4504 - Updating styles for Oauth apps

* PLT-4852 - Updating font size for lists

* Fix for the unread indicator with teams sidebar

webapp/components/navbar.jsx

@@ -539,11 +539,11 @@ export default class Navbar extends React.Component {
                             role='menu'
                         >
                             {viewInfoOption}
+                            {notificationPreferenceOption}
                             {addMembersOption}
                             {manageMembersOption}
                             {setChannelHeaderOption}
                             {setChannelPurposeOption}
-                            {notificationPreferenceOption}
                             {renameChannelOption}
                             {deleteChannelOption}
                             {leaveChannelOption}

webapp/sass/layout/_forms.scss

@@ -23,7 +23,7 @@
     .input__help {
         @include opacity(.8);
         color: inherit;
-        margin: 10px 0 0 10px;
+        margin: 10px 0 0 0;
         word-break: break-word;
 
         &.dark {

webapp/sass/layout/_post.scss

@@ -1022,6 +1022,7 @@
             li {
                 ul,
                 ol {
+                    font-size: 1em;
                     margin: 0;
                     padding: 0 0 0 20px;
                 }

webapp/sass/layout/_team-sidebar.scss

@@ -4,7 +4,7 @@
         left: 0;
         position: fixed;
         text-align: center;
-        width: 75px;
+        width: 65px;
         z-index: 5;
 
         .team-wrapper {
@@ -14,41 +14,40 @@
             padding-top: 15px;
 
             .team-container {
-                width: 100%;
-                text-align: center;
                 display: table;
                 margin-bottom: 10px;
                 position: relative;
+                text-align: center;
+                width: 100%;
 
                 .team-btn {
-                    border: none;
+                    @include border-radius(2px);
-                    height: 42px;
+                    background-color: alpha-color($black, .3);
-                    text-align: center;
-                    font-weight: bold;
-                    border-radius: 5px;
-                    position: relative;
-                    width: 42px;
-                    background-color: rgba(0, 0, 0, 0.3);
                     display: table-cell;
+                    font-weight: bold;
+                    height: 35px;
+                    position: relative;
+                    text-align: center;
                     vertical-align: middle;
+                    width: 35px;
 
                     .badge {
-                        position: absolute;
-                        top: -3px;
-                        right: -6px;
                         font-size: 10px;
+                        position: absolute;
+                        right: -6px;
+                        top: -3px;
                     }
                 }
 
                 &.active {
                     .team-btn {
-                        border: 1px solid #fff;
                         background-color: transparent;
+                        border: 1px solid $white;
                     }
                 }
 
                 &.active:before {
-                    background: black;
+                    background: $black;
                     content: '';
                     height: 100%;
                     left: 0;
@@ -58,7 +57,7 @@
                 }
 
                 &.unread:before {
-                    background: black;
+                    background: $black;
                     border-radius: 50%;
                     content: '';
                     height: 5px;
@@ -69,8 +68,8 @@
                 }
 
                 a.team-disabled {
+                    @include opacity(.5);
                     cursor: not-allowed;
-                    opacity: 0.5;
                 }
             }
 
@@ -81,10 +80,14 @@
     }
 
     .sidebar--left {
-        left: 75px;
+        left: 65px;
+
+        .nav-pills__unread-indicator {
+            left: 80px;
+        }
     }
 
     .app__content {
-        margin-left: 295px;
+        margin-left: 285px;
     }
 }

webapp/sass/responsive/_mobile.scss

@@ -1165,9 +1165,6 @@
     }
 
     .multi-teams {
-        .team-sidebar {
-            width: 75px;
-        }
 
         .app__content {
             margin-left: 0;
@@ -1177,7 +1174,11 @@
             left: 0;
 
             &.move--right {
-                left: 75px;
+                left: 65px;
+
+                .nav-pills__unread-indicator {
+                    left: 15px;
+                }
             }
         }
 
@@ -1521,15 +1522,11 @@
 
 @media screen and (max-width: 320px) {
     .multi-teams {
-        .team-sidebar {
-            width: 65px;
-        }
-
         .sidebar--left {
             width: 220px;
 
-            &.move--right {
+            .nav-pills__unread-indicator {
-                left: 65px;
+                width: 190px;
             }
         }
     }

webapp/sass/routes/_settings.scss

@@ -15,7 +15,6 @@
     }
 
     .authorized-apps__wrapper {
-        background-color: #fff;
         padding: 10px 0;
     }
 

webapp/utils/utils.jsx

@@ -610,7 +610,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .search-item-container, .app__body .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('.app__body .modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3));
-        changeCss('.app__body .channel-intro, .app__body .modal .settings-modal .settings-table .settings-content .divider-dark, .app__body hr, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .channel-intro, .app__body .modal .settings-modal .settings-table .settings-content .divider-dark, .app__body hr, .app__body .modal .settings-modal .settings-table .settings-links, .app__body .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header, .app__body .user-settings .authorized-app:not(:last-child)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .post.current--user .post__body, .app__body .post.post--comment.other--root.current--user .post-comment, .app__body pre, .app__body .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
         changeCss('.app__body .post.post--comment.other--root.current--user .post-comment, .app__body .more-modal__list .more-modal__row, .app__body .member-div:first-child, .app__body .member-div, .app__body .access-history__table .access__report, .app__body .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('@media(max-width: 1800px){.app__body .inner-wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07));
@@ -637,7 +637,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .channel-header__info .status .offline--icon', 'fill:' + theme.centerChannelColor);
         changeCss('.app__body .navbar .status .offline--icon', 'fill:' + theme.centerChannelColor);
         changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.25));
-        changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.6));
+        changeCss('.app__body .post-reaction:not(.post-reaction--current-user)', 'color:' + changeOpacity(theme.centerChannelColor, 0.7));
     }
 
     if (theme.newMessageSeparator) {