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, 9 insertions, 8 deletions

diff --git a/webapp/sass/components/_status-icon.scss b/webapp/sass/components/_status-icon.scss
index 2e1ba61b3..03d9d0705 100644
--- a/webapp/sass/components/_status-icon.scss
+++ b/webapp/sass/components/_status-icon.scss
@@ -42,10 +42,10 @@
 
 .status {
     display: inline-block;
-    margin-right: 6px;
+    margin: 0 7px 0 1px;
     position: relative;
-    top: 1px;
-    width: 12px;
+    top: 2px;
+    width: 15px;
 
     &.status--group {
         border-radius: 2px;
@@ -54,18 +54,19 @@
         height: 16px;
         left: 1px;
         line-height: 15px;
-        margin-left: -3px;
+        margin: 0 9px 0 -1px;
         text-align: center;
         top: -1px;
-        width: 16px;
+        width: 15px;
 
         .mentions__name & {
-            height: 20px;
+            height: 18px;
             left: 0;
-            line-height: 20px;
+            line-height: 18px;
             margin-left: 0;
+            margin-right: 6px;
             text-align: center;
-            width: 20px;
+            width: 17px;
         }
     }