Channel switcher UI improvements (#6564)

* Channel switcher UI improvements

* Reverting mattermost theme

* Fixing spacing above the button

* Updating switcher button

* PLT-6691 - Fixing tablet header

webapp/sass/components/_modal.scss

@@ -79,6 +79,7 @@
         .channel-switch-modal {
             .modal-header {
                 background: transparent;
+                border: none;
                 min-height: 0;
                 padding: 0;
 

webapp/sass/layout/_sidebar-left.scss

@@ -44,42 +44,37 @@
     }
 
     .sidebar__switcher {
-        border-top: 2px solid;
+        border-top: 1px solid;
         bottom: 0;
         display: block;
-        height: 45px;
-        line-height: 45px;
         position: absolute;
-        text-align: center;
-        text-decoration: none;
         width: 100%;
 
-        &:after {
+        button {
             @include single-transition(all, .15s, ease-in);
-            background: alpha-color($black, .1);
-            content: '';
-            display: none;
-            height: 100%;
-            left: 0;
-            position: absolute;
-            top: 0;
+            display: block;
+            height: 42px;
+            text-align: center;
+            text-decoration: none;
             width: 100%;
-        }
 
-        span {
-            @include single-transition(all, .15s, ease-in);
-            @include opacity(.8);
-        }
-
-        &:hover {
-            &:after {
-                display: block;
+            > span {
+                @include single-transition(all, .15s, ease-in);
+                @include opacity(.6);
+                position: relative;
+                z-index: 5;
             }
 
-            span {
-                @include opacity(1);
+            &:hover {
+                span {
+                    @include opacity(1);
+                }
             }
         }
+
+        .switch__shortcut {
+            margin-left: 4px;
+        }
     }
 
     .dropdown-menu {
@@ -105,7 +100,7 @@
 
     .nav-pills__container {
         -webkit-overflow-scrolling: touch;
-        height: calc(100% - 110px);
+        height: calc(100% - 99px);
         overflow: auto;
         position: relative;
     }
@@ -127,7 +122,7 @@
     }
 
     .nav-pills__unread-indicator-bottom {
-        bottom: 60px;
+        bottom: 50px;
     }
 
     .nav {

webapp/sass/responsive/_tablet.scss

@@ -10,7 +10,7 @@
 
     .channel-header {
         .heading {
-            max-width: 100px;
+            max-width: 90px;
         }
     }