PLT-6905 - Updating channel header design (#6789)

* PLT-6905 - Updating channel header design

* Updating border-radius

* Updating radius for wide icons

* Updating trigger for overlay

* Updating UI for channel header

* Updating channel header sizing

* Updating channel header css

* Updating sidebar css

* Updating status icons

* Adjusting border

* Updating comment

* Removing type from status icon

* Fixing UI issues for the channel header/sidebar

* make "Add a channel description" open the channel header modal

* Updating status and opacity

* Updating stauts icon positioning

* Updating description and heading size

* Updating UI changes

* Updating UI changes

* add a focused class to the parent div .search__form and then remove when hover away

* Fix active state for pinned posts icon

* Updating UI changes

* Update channel header text

1 files changed, 43 insertions, 3 deletions

diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss
index ab73e075b..8181ac270 100644
--- a/webapp/sass/layout/_sidebar-right.scss
+++ b/webapp/sass/layout/_sidebar-right.scss
@@ -39,6 +39,25 @@
         }
     }
 
+    .sidebar-right__table {
+        display: table;
+
+        > div:not(.sidebar-collapse__container) {
+            display: table-cell;
+
+            &:last-child {
+                .channel-header__icon {
+                    margin-right: 17px;
+                }
+            }
+        }
+
+        .search-form__container {
+            padding-right: 10px;
+            width: 100%;
+        }
+    }
+
     .post-body {
         img {
             max-height: 200px;
@@ -131,7 +150,6 @@
         @include flex(1 1 auto);
         @include flex-direction(column);
         border-left: $border-gray;
-        border-top: $border-gray;
         height: calc(100% - 56px);
     }
 
@@ -191,7 +209,7 @@
 
     .sidebar--right__header {
         @include flex(0 0 44px);
-        border-bottom: $border-gray;
+        border-bottom: 1px solid;
         color: inherit;
         font-size: 1em;
         height: 44px;
@@ -222,7 +240,7 @@
             @include opacity(.9);
             margin: 0 3px;
             position: relative;
-            top: 1px;
+            top: 3px;
         }
     }
 
@@ -234,3 +252,25 @@
 .sidebar-right-container {
     height: 100%;
 }
+
+.sidebar-collapse__container {
+    display: none;
+}
+
+.sidebar-collapse {
+    @include single-transition(all, .2s, linear);
+    @include translateX(0);
+    cursor: pointer;
+    font-size: 16px;
+    height: 48px;
+    line-height: 0;
+    padding-left: 1px;
+    text-align: center;
+    width: 50px;
+    z-index: 5;
+
+    .fa {
+        position: relative;
+        top: 18px;
+    }
+}