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

webapp/sass/components/_modal.scss

@@ -76,6 +76,18 @@
         color: alpha-color($black, .9);
         width: 100%;
 
+        .channel-switch-modal {
+            .modal-header {
+                background: transparent;
+                min-height: 0;
+                padding: 0;
+
+                .close {
+                    top: 10px;
+                }
+            }
+        }
+
         .modal--overflow {
             .modal-body {
                 overflow: visible;

webapp/sass/components/_suggestion-list.scss

@@ -52,6 +52,10 @@
     position: relative;
 }
 
+.suggestion-loader {
+    margin: 6px 11px;
+}
+
 .suggestion-list__divider {
     line-height: 21px;
     margin: 5px 0 5px 5px;

webapp/sass/layout/_navigation.scss

@@ -5,6 +5,24 @@
     background: transparent;
 }
 
+.nav-tabs {
+    margin-bottom: 10px;
+
+    > li {
+        margin-right: 5px;
+
+        > a {
+            border-bottom-color: transparent !important;
+            padding: 7px 15px;
+
+            .small {
+                @include opacity(.8);
+                margin-left: 4px;
+            }
+        }
+    }
+}
+
 #navbar {
     input {
         margin: 0 5px 0 2px;

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 {

webapp/sass/responsive/_mobile.scss

@@ -1059,17 +1059,13 @@
         }
 
         .nav-pills__container {
-            height: 100%;
+            height: calc(100% - 50px);
         }
 
         > div {
             padding-bottom: 70px;
         }
 
-        .nav-pills__unread-indicator-bottom {
-            bottom: 10px;
-        }
-
         .nav-pills__unread-indicator {
             width: 260px;
         }
@@ -1321,6 +1317,7 @@
             }
         }
     }
+
     .post {
         .attachment {
             .attachment__image {
@@ -1545,6 +1542,7 @@
         top: 60px;
         width: calc(100% - 30px);
     }
+
     .post {
         .attachment {
             .attachment__image {
@@ -1557,6 +1555,19 @@
 }
 
 @media screen and (max-width: 480px) {
+    .nav-tabs {
+        margin-top: 1em;
+
+        > li {
+            margin-right: 0;
+
+            a {
+                font-size: .9em;
+                padding: 6px 11px;
+            }
+        }
+    }
+
     .sidebar--right {
         .post {
             &.post--compact {