Ui improvements (#4900)

* PLT-5091 - Updating teams sidebar style

* PLT-4650 - Updating bot indicator

* Removing text decoration

* Fixing dropdown menu in admin console

* Updating bot indicator position on desktop

* Updating bot indicator on mobile

* Moving bot indicator below for mobile

* Adding bg to the bot indicator

* Updating css for bot indicator in compact view

webapp/sass/layout/_post.scss

@@ -1234,10 +1234,10 @@
 .bot-indicator {
     border-radius: 2px;
     font-family: inherit;
-    font-size: 11px;
+    font-size: 10px;
     font-weight: 600;
-    margin: 0 10px 0 -4px;
+    margin: 2px 10px 0 -4px;
-    padding: 2px 4px;
+    padding: 1px 4px;
 }
 
 .permalink-text {

webapp/sass/layout/_team-sidebar.scss

@@ -20,10 +20,14 @@
                 text-align: center;
                 width: 100%;
 
+                a {
+                    text-decoration: none;
+                }
+
                 .team-btn {
                     @include border-radius(2px);
                     background-color: alpha-color($black, .3);
-                    border: 1px solid transparent;
+                    border: 1px solid alpha-color($white, .2);
                     display: table-cell;
                     font-size: 12px;
                     font-weight: bold;

webapp/sass/responsive/_mobile.scss

@@ -175,6 +175,14 @@
     }
 
     .post {
+        &:not(.post--compact) {
+            .bot-indicator {
+                left: 6px;
+                position: absolute;
+                top: 31px;
+            }
+        }
+
         .post__dropdown {
             display: inline-block;
             height: 28px;

webapp/sass/responsive/_tablet.scss

@@ -16,7 +16,7 @@
         }
 
         .heading {
-            max-width: 150px;
+            max-width: 110px;
         }
     }
 

webapp/sass/routes/_admin-console.scss

@@ -245,40 +245,40 @@
 
     .more-modal__list {
         .filtered-user-list {
-             .filter-controls {
+           .filter-controls {
-                padding-bottom: 1em;
+            padding-bottom: 1em;
-             }
-        }
-
-        .filter-row {
-            margin: 10px 0;
-            overflow: hidden;
         }
     }
 
-    .member-list-holder {
+    .filter-row {
-        background: $white;
+        margin: 10px 0;
-        margin-bottom: 4em;
+        overflow: hidden;
+    }
+}
+
+.member-list-holder {
+    background: $white;
+    margin-bottom: 4em;
+    overflow: visible;
+    padding: 5px 0;
+
+    .more-modal__list {
         overflow: visible;
-        padding: 5px 0;
-
-        .more-modal__list {
-            overflow: visible;
-        }
-
-        .more-modal__row {
-            &:last-child {
-                border: none;
-            }
-        }
     }
 
-    .member-count {
+    .more-modal__row {
-        @include opacity(.7);
+        &:last-child {
-        margin-top: 8px;
+            border: none;
+        }
     }
 }
 
+.member-count {
+    @include opacity(.7);
+    margin-top: 8px;
+}
+}
+
 .brand-img {
     margin-bottom: 1.5em;
     max-width: 150px;
@@ -299,8 +299,10 @@
     z-index: 5;
 
     .dropdown-menu {
+        max-height: 80vh;
         max-width: 200px;
         min-width: 200px;
+        overflow: auto;
     }
 
     .team__header {

webapp/utils/utils.jsx

@@ -618,8 +618,8 @@ export function applyTheme(theme) {
         changeCss('.app__body .post.post--hovered', 'background:' + changeOpacity(theme.centerChannelColor, 0.08));
         changeCss('@media(min-width: 768px){.app__body .post:hover, .app__body .more-modal__list .more-modal__row:hover, .app__body .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.08));
         changeCss('.app__body .date-separator.hovered--before:after, .app__body .date-separator.hovered--after:before, .app__body .new-separator.hovered--after:before, .app__body .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
-        changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15));
+        changeCss('@media(min-width: 768px){.app__body .suggestion-list__content .command:hover, .app__body .mentions__name:hover, .app__body .dropdown-menu>li>a:focus, .app__body .dropdown-menu>li>a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.15));
-        changeCss('.app__body .suggestion--selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
+        changeCss('.app__body .suggestion--selected, .app__body .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('code, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('@media(min-width: 960px){.app__body .post.current--user:hover .post__body ', 'background: none;');
         changeCss('.app__body .sidebar--right', 'color:' + theme.centerChannelColor);