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

6 files changed, 44 insertions, 30 deletions

diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 7d1125b19..fae09a21a 100644
--- a/webapp/sass/layout/_post.scss
+++ b/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;
-    padding: 2px 4px;
+    margin: 2px 10px 0 -4px;
+    padding: 1px 4px;
 }
 
 .permalink-text {
diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss
index 2bf072ed0..52f2dbd06 100644
--- a/webapp/sass/layout/_team-sidebar.scss
+++ b/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;
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 39f2b1a35..b0302afba 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/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;
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 64b8ab6dd..5e5e6180a 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -16,7 +16,7 @@
         }
 
         .heading {
-            max-width: 150px;
+            max-width: 110px;
         }
     }
 
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 6ab1645e8..64fad6aec 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -245,38 +245,38 @@
 
     .more-modal__list {
         .filtered-user-list {
-             .filter-controls {
-                padding-bottom: 1em;
-             }
+           .filter-controls {
+            padding-bottom: 1em;
         }
+    }
 
-        .filter-row {
-            margin: 10px 0;
-            overflow: hidden;
-        }
+    .filter-row {
+        margin: 10px 0;
+        overflow: hidden;
     }
+}
 
-    .member-list-holder {
-        background: $white;
-        margin-bottom: 4em;
-        overflow: visible;
-        padding: 5px 0;
+.member-list-holder {
+    background: $white;
+    margin-bottom: 4em;
+    overflow: visible;
+    padding: 5px 0;
 
-        .more-modal__list {
-            overflow: visible;
-        }
+    .more-modal__list {
+        overflow: visible;
+    }
 
-        .more-modal__row {
-            &:last-child {
-                border: none;
-            }
+    .more-modal__row {
+        &:last-child {
+            border: none;
         }
     }
+}
 
-    .member-count {
-        @include opacity(.7);
-        margin-top: 8px;
-    }
+.member-count {
+    @include opacity(.7);
+    margin-top: 8px;
+}
 }
 
 .brand-img {
@@ -299,8 +299,10 @@
     z-index: 5;
 
     .dropdown-menu {
+        max-height: 80vh;
         max-width: 200px;
         min-width: 200px;
+        overflow: auto;
     }
 
     .team__header {
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 1ddb28690..e7ed9567b 100644
--- a/webapp/utils/utils.jsx
+++ b/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('.app__body .suggestion--selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
+        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, .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);