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

webapp/sass/layout/_navigation.scss

@@ -31,17 +31,17 @@
     .navbar-default {
         background: $primary-color;
         border: none;
-        min-height: 45px;
+        min-height: 50px;
         position: absolute;
 
         .navbar-nav {
             > li {
                 > a {
-                    height: 45px;
+                    height: 50px;
                     padding: 0 1.3em;
 
                     i {
-                        line-height: 45px;
+                        line-height: 50px;
                     }
                 }
             }
@@ -52,22 +52,37 @@
             border-radius: 0;
             fill: $white;
             float: left;
-            height: 44px;
+            height: 50px;
             line-height: 48px;
             margin: 0;
             padding: 0 10px;
-            width: 43px;
+            width: 50px;
             z-index: 5;
 
+            &.navbar-right__icon {
+                @include border-radius(50px);
+                height: 32px;
+                line-height: 0;
+                margin: 9px 10px 0 0;
+                padding: 0;
+                width: 32px;
+            }
+
+            &.menu-toggle {
+                margin-right: 16px;
+            }
+
             .icon-bar {
                 background: $white;
                 width: 21px;
             }
 
-            .icon-search {
-                font-size: 17px;
-                position: relative;
-                top: -2px;
+            .icon__search {
+                svg {
+                    left: -1px;
+                    position: relative;
+                    width: 17px;
+                }
             }
 
             .icon--white {
@@ -84,15 +99,15 @@
         .navbar-brand {
             float: none;
             font-size: 16px;
-            height: 45px;
-            line-height: 45px;
+            height: 50px;
+            line-height: 50px;
             padding: 0 .5em;
 
             .heading {
                 color: $white;
                 display: inline-block;
                 font-weight: 600;
-                line-height: 47px;
+                line-height: 50px;
                 margin-right: 5px;
                 max-width: calc(100% - 200px);
                 overflow: hidden;
@@ -114,20 +129,26 @@
                 margin-right: 1em;
 
                 &.info-popover {
-                    @include background-size(100% 100%);
-                    background-image: url('../images/info__icon.png');
+                    @include border-radius(50px);
                     cursor: pointer;
-                    height: 19px;
+                    height: 32px;
+                    line-height: 32px;
+                    margin: 9px 10px 0 0;
                     position: relative;
-                    top: 13px;
-                    vertical-align: middle;
-                    width: 19px;
+                    text-align: center;
+                    vertical-align: top;
+                    width: 32px;
+
+                    svg {
+                        position: relative;
+                        top: 5px;
+                    }
                 }
             }
         }
     }
 
-    .sidebar-channel {
+    .sidebar-name {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;