PLT-5699 Improvements to channel switcher (#6486)

* Refactor channel switcher to not wait on server results

* Change channel switcher to quick switcher and include team switching

* Add sections, update ordering and add discoverability button

* Fix styling error

* Use CMD in text if on mac

* Clean yarn cache on every install

* Various UX updates per feedback

* Add shortcut help text for team switcher

* Couple more updates per feedback

* Some minor fixes for GM and autocomplete race

* Updating UI for channel switcher (#6504)

* Updating channel switcher button (#6506)

* Updating switcher modal on mobile (#6507)

* Removed jQuery usage

* Rename function to toggleQuickSwitchModal

1 files changed, 41 insertions, 2 deletions

diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index a7a99249b..d08a9ef45 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -39,6 +39,45 @@
         }
     }
 
+    .sidebar__switcher {
+        border-top: 2px solid;
+        bottom: 0;
+        display: block;
+        height: 45px;
+        line-height: 45px;
+        position: absolute;
+        text-align: center;
+        text-decoration: none;
+        width: 100%;
+
+        &:after {
+            @include single-transition(all, .15s, ease-in);
+            background: alpha-color($black, .1);
+            content: '';
+            display: none;
+            height: 100%;
+            left: 0;
+            position: absolute;
+            top: 0;
+            width: 100%;
+        }
+
+        span {
+            @include single-transition(all, .15s, ease-in);
+            @include opacity(.8);
+        }
+
+        &:hover {
+            &:after {
+                display: block;
+            }
+
+            span {
+                @include opacity(1);
+            }
+        }
+    }
+
     .dropdown-menu {
         max-height: 80vh;
         max-width: 200px;
@@ -62,7 +101,7 @@
 
     .nav-pills__container {
         -webkit-overflow-scrolling: touch;
-        height: calc(100% - 80px);
+        height: calc(100% - 110px);
         overflow: auto;
         position: relative;
     }
@@ -84,7 +123,7 @@
     }
 
     .nav-pills__unread-indicator-bottom {
-        bottom: 20px;
+        bottom: 60px;
     }
 
     .nav {