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

7 files changed, 128 insertions, 64 deletions

diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss
index abf5b772f..c6086e866 100644
--- a/webapp/sass/components/_buttons.scss
+++ b/webapp/sass/components/_buttons.scss
@@ -1,7 +1,7 @@
 @charset 'UTF-8';
 
 .btn {
-    @include single-transition(all, .25s, ease-in);
+    @include single-transition(all, .15s, ease-in);
     @include border-radius($border-rad);
 
     &.btn-primary {
diff --git a/webapp/sass/components/_inputs.scss b/webapp/sass/components/_inputs.scss
index adf3967e6..857772d7c 100644
--- a/webapp/sass/components/_inputs.scss
+++ b/webapp/sass/components/_inputs.scss
@@ -45,3 +45,23 @@ input {
         margin-top: 3px;
     }
 }
+
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: inherit;
+    opacity: 0.5;
+}
+
+::-moz-placeholder { /* Firefox 19+ */
+    color: inherit;
+    opacity: 0.5;
+}
+
+:-ms-input-placeholder { /* IE 10+ */
+    color: inherit;
+    opacity: 0.5;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+    color: inherit;
+    opacity: 0.5;
+}
diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss
index cfc12f1ce..37820cbd9 100644
--- a/webapp/sass/components/_mentions.scss
+++ b/webapp/sass/components/_mentions.scss
@@ -36,6 +36,24 @@
     width: 100%;
     z-index: 101;
 
+    .icon {
+        @include opacity(.5);
+        display: inline-block;
+        margin: 0 7px 0 0;
+        position: relative;
+        text-align: center;
+        top: 2px;
+        vertical-align: top;
+        width: 16px;
+
+        &.icon__globe {
+            svg {
+                height: 14px;
+                width: 14px;
+            }
+        }
+    }
+
     .status {
         font-size: 15px;
         text-align: center;
@@ -59,11 +77,12 @@
     @include border-radius(20px);
     display: block;
     font-size: 15px;
-    height: 20px;
-    line-height: 20px;
-    margin-right: 6px;
+    height: 16px;
+    line-height: 16px;
+    margin-right: 7px;
+    margin-top: 3px;
     text-align: center;
-    width: 20px;
+    width: 16px;
 
     .mention--align {
         display: inline-block;
diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss
index 610cdb31d..46e83f32d 100644
--- a/webapp/sass/components/_popover.scss
+++ b/webapp/sass/components/_popover.scss
@@ -4,6 +4,7 @@
 .popover {
     @include border-radius($border-rad);
     color: lighten($black, 25%);
+    padding: 0;
 
     &.bottom,
     &.right,
@@ -220,17 +221,70 @@
 .member-list__popover {
     max-width: initial;
 
+    .more-modal__header {
+        padding: 14px 0;
+
+        .icon {
+            @include opacity(.8);
+            margin: 0 38px 0 24px;
+            position: relative;
+            top: 2px;
+        }
+
+        span {
+            font-weight: 500;
+        }
+    }
+
     .more-modal__list {
         .more-modal__row {
-            min-height: inherit;
+            border-bottom: none;
+            border-top: 1px solid;
+            cursor: pointer;
+            height: 45px;
+            padding: 5px 19px 5px 17px;
+
+            &:hover {
+                border-left: 3px solid transparent;
+                padding-left: 14px;
+
+                .more-modal__actions {
+                    @include opacity(1);
+                }
+            }
+
+            &.more-modal__row--button {
+                border-left: none;
+                height: 40px;
+                position: relative;
+
+                button {
+                    font-weight: 500;
+                    height: 100%;
+                    left: 0;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        .more-modal__name {
+            line-height: 33px;
+        }
+
+        .more-modal__image {
+            margin: 0;
         }
 
         .more-modal__details {
             line-height: 32px;
+            padding-left: 30px;
         }
 
         .more-modal__actions {
-            line-height: 31px;
+            @include opacity(0);
+            line-height: 42px;
             margin: 0;
         }
     }
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index c25915252..e7fab0290 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -1,14 +1,7 @@
 @charset 'UTF-8';
 
-.channel-header {
-    .search-bar__container {
-        padding: 0 7px 0 3px;
-    }
-}
-
 .search-bar__container {
-    @include flex(0 0 56px);
-    padding: 12px 5px 0 0;
+    @include flex(0 0 79px);
 
     .channel-header__links {
         .sidebar--right & {
@@ -31,30 +24,10 @@
     }
 }
 
-.sidebar__collapse {
-    @include single-transition(all, .2s, linear);
-    @include translateX(0);
-    cursor: pointer;
-    display: none;
-    fill: $white;
-    font-size: 35px;
-    left: 0;
-    line-height: 40px;
-    padding-left: 1px;
-    position: absolute;
-    text-align: center;
-    width: 49px;
-    z-index: 5;
-}
-
-.sidebar__search-icon {
-    @include opacity(.5);
-    color: $dark-gray;
-    display: none;
-    font-size: 14px;
-    margin-left: 10px;
+.search__icon {
+    left: 10px;
     position: absolute;
-    top: 15px;
+    top: 8px;
 }
 
 .sidebar__search-clear {
@@ -69,31 +42,33 @@
     width: 40px;
 }
 
+.search-form__container {
+
+}
+
 .search__form {
     position: relative;
 
     .search-bar__container & {
-        @include border-radius(2px);
+        @include border-radius(50px);
         border: 1px solid $light-gray;
-        margin: 0;
-        width: 300px;
+        margin: 16px 10px 0 0;
+        width: 229px;
     }
 
     .sidebar--right & {
-        float: left;
-        margin-right: 7px;
-        width: 325px;
+        width: 100%;
     }
 
     .search-bar {
+        background: transparent;
+        border: none;
         box-shadow: none;
-        height: 40px;
-        padding-right: 30px;
-
-        .search-bar__container & {
-            border: none;
-            height: 30px;
-        }
+        font-size: 14px;
+        height: 35px;
+        outline: none;
+        padding: 0 30px 0 40px;
+        width: 100%;
     }
 
     .icon--refresh {
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;
         }
     }
 
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
index c127bc5cc..839f9c8c1 100644
--- a/webapp/sass/components/_webrtc.scss
+++ b/webapp/sass/components/_webrtc.scss
@@ -2,14 +2,9 @@
 
 .webrtc__header {
     @include webrtc-button;
-    float: left;
-    margin-right: 10px;
-    position: relative;
-    top: 13px;
 
     svg {
         position: relative;
-        width: 20px;
     }
 }