From 1eed253fc23bf164d18ea506cf3bc35ce0ce1fbb Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Wed, 7 Jun 2017 02:24:23 +0500
Subject: 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    |  1 +
 webapp/sass/layout/_sidebar-left.scss | 47 ++++++++++++++++-------------------
 webapp/sass/responsive/_tablet.scss   |  2 +-
 3 files changed, 23 insertions(+), 27 deletions(-)

(limited to 'webapp/sass')

diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index de7d9cdfb..f92ae042e 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -79,6 +79,7 @@
         .channel-switch-modal {
             .modal-header {
                 background: transparent;
+                border: none;
                 min-height: 0;
                 padding: 0;
 
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index abe49b9c6..9323253c7 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/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 {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index da99cc8e9..70b5e9b8f 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -10,7 +10,7 @@
 
     .channel-header {
         .heading {
-            max-width: 100px;
+            max-width: 90px;
         }
     }
 
-- 
cgit v1.2.3-1-g7c22