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

17 files changed, 596 insertions, 274 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;
     }
 }
 
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 1386b4169..dd8440d19 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -1,57 +1,82 @@
 @charset 'UTF-8';
 
 .channel-header {
-    @include flex(0 0 57px);
-    border-left: none;
+    @include flex(0 0 70px);
+    border-bottom: 1px solid;
     font-size: 14px;
-    line-height: 56px;
     position: relative;
     width: 100%;
     z-index: 9;
 
-    .member-popover__trigger,
-    .pinned-posts-button {
+    .channel-header__icon {
+        @include border-radius(50%);
+        border: 1px solid;
         cursor: pointer;
-        display: inline-block;
-        margin-left: 7px;
+        height: 37px;
+        line-height: 36px;
+        margin: 16px 10px 0 0;
         min-width: 30px;
         text-align: center;
-        white-space: nowrap;
+        width: 37px;
+
+        &.wide {
+            @include border-radius(37px);
+            padding: 0;
+            white-space: nowrap;
+            width: auto;
+
+            > div {
+                padding: 0 13px 0 15px;
+            }
+        }
+
+        .icon__text {
+            font-weight: 600;
+            margin-right: 9px;
+        }
+
+        a {
+            display: block;
+        }
 
         .fa {
             font-size: 19px;
         }
-    }
-
-    .member-popover__container,
-    .member-popover__trigger {
-        display: inline;
-    }
 
-    .member-popover__trigger {
         & + div {
             display: none;
         }
-    }
 
-    .member-popover__trigger {
-        .fa {
-            margin-left: 4px;
+        .icon {
             position: relative;
+        }
+
+        .icon__pin,
+        .icon__members {
             top: 2px;
         }
+
+        .icon__mentions {
+            top: 5px;
+        }
+
+        .icon__flag {
+            top: 3px;
+        }
     }
 
-    .pinned-posts-button svg {
-        position: relative;
-        top: 5px;
+    .move--left & {
+        .icon--hidden {
+            display: none;
+        }
     }
 
     &.alt {
         margin: 0;
 
         th {
-            font-weight: normal !important;
+            font-weight: normal;
+            vertical-align: top;
 
             &.header-list__right {
                 padding-right: 4px;
@@ -69,15 +94,15 @@
 
         &:first-child {
             border-left: none;
-            padding-left: 15px;
-            padding-right: 1em;
+            padding: 0 0 0 20px;
             text-align: left !important;
             width: 100%;
         }
 
         &:last-child {
-            padding-right: 6px;
-            width: 8.9%;
+            .channel-header__icon {
+                margin-right: 17px;
+            }
         }
     }
 
@@ -93,13 +118,26 @@
 
     .heading {
         display: inline-block;
-        font-size: 1.3em;
-        font-weight: 600;
+        font-size: 17px;
+        font-weight: 400;
         margin: 0 4px 0 0;
-        max-width: 100%;
+        max-width: calc(100vw - 780px);
         overflow: hidden;
         text-overflow: ellipsis;
-        vertical-align: middle;
+        vertical-align: top;
+        white-space: nowrap;
+
+        .move--left & {
+            max-width: calc(100vw - 830px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 880px);
+            }
+        }
+
+        .multi-teams & {
+            max-width: calc(100vw - 830px);
+        }
     }
 
     .caret {
@@ -131,62 +169,74 @@
 
 .header-dropdown__icon {
     color: inherit;
-    font-size: 12px;
+    font-size: 21px;
     margin-left: 1px;
     position: relative;
-    top: 1px;
+    top: 2px;
 }
 
 .channel-header__info {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
+    margin-top: 12px;
+
+    .channel-header__title {
+        .header-dropdown__icon {
+            color: $dark-gray;
+        }
+
+        > a {
+            display: inline-block;
+            text-decoration: none;
+        }
+
+        .modal {
+            white-space: normal;
+        }
+    }
 
-    > div {
-        display: block;
+    .channel-header__description {
+        display: inline-block;
+        height: 22px;
+        margin-top: 3px;
+        max-width: calc(100vw - 730px);
+        overflow: hidden;
+        text-overflow: ellipsis;
         white-space: nowrap;
         word-break: break-word;
 
-        &.dropdown {
-            float: left;
-            max-width: 90%;
-            padding-right: 1em;
+        .markdown__heading {
+            font-size: 1em;
+            margin: 0;
+        }
 
-            .header-dropdown__icon {
-                color: $dark-gray;
-            }
+        .multi-teams & {
+            max-width: calc(100vw - 780px);
+        }
 
-            a {
-                text-decoration: none;
-            }
+        &.light {
+            @include opacity(.6);
+            color: inherit;
 
-            .modal {
-                white-space: normal;
+            &:hover,
+            &:focus {
+                color: inherit;
             }
         }
 
-        &.description {
-            margin-top: 2px;
-            max-height: 45px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-
-            .markdown-inline-img {
-                max-height: 45px;
-            }
+        .move--left & {
+            max-width: calc(100vw - 780px);
         }
 
-        &.popover {
-            white-space: normal;
+        .markdown-inline-img {
+            max-height: 45px;
         }
+    }
 
-        .status {
-            width: 18px;
+    .status {
+        width: 18px;
 
-            svg {
-                max-height: 20px;
-                width: 16px;
-            }
+        svg {
+            max-height: 20px;
+            width: 16px;
         }
     }
 }
@@ -261,7 +311,7 @@
         @include legacy-pie-clearfix;
         @include display-flex();
         @include flex-direction(row-reverse);
-        padding: 9px 10px;
+        padding: 16px 47px 12px 12px;
         position: relative;
 
         &:before {
@@ -305,11 +355,12 @@
         .sidebar-header-dropdown,
         .admin-navbar-dropdown {
             font-size: .85em;
+            height: 100%;
             left: 0;
-            margin-right: -15px;
+            margin-right: -22px;
             position: absolute;
             right: 22px;
-            top: 10px;
+            top: 0;
 
             li {
                 width: 100%;
@@ -323,7 +374,7 @@
                 color: $white;
                 display: block;
                 font-size: 1em;
-                height: 40px;
+                height: 100%;
                 left: 0;
                 line-height: 1.8;
                 padding: 10px;
@@ -331,7 +382,7 @@
             }
 
             .dropdown-menu {
-                margin-right: 3px;
+                margin-right: 10px;
                 margin-top: 4px;
                 width: 199px;
 
@@ -344,8 +395,16 @@
 
             .sidebar-header-dropdown__icon,
             .admin-navbar-dropdown__icon {
+                border-radius: 36px;
                 fill: $white;
                 float: right;
+                height: 36px;
+                line-height: 36px;
+                position: relative;
+                right: -3px;
+                text-align: center;
+                top: 7px;
+                width: 36px;
             }
         }
 
@@ -377,9 +436,7 @@
         }
 
         .team__name {
-            float: left;
             line-height: 22px;
-            margin-top: -2px;
         }
 
         .user__name {
@@ -419,8 +476,30 @@
 }
 
 .channel-header__favorites {
+    @include opacity(.5);
     float: left;
-    margin: 1px 10px 0 0;
+    height: 20px;
+    margin: 0 8px 0 0;
+    padding-top: 3px;
+    position: relative;
+    z-index: 1;
+
+    &.inactive {
+        color: inherit;
+
+        &:hover,
+        &:active {
+            color: inherit;
+        }
+    }
+
+    &.active {
+        @include opacity(1);
+    }
+
+    i {
+        font-size: 17px;
+    }
 }
 
 .app__body {
@@ -476,6 +555,7 @@
             &.active {
                 color: $primary-color;
                 @include opacity(1);
+
                 .icon {
                     fill: $primary-color;
                 }
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 59b348d9e..09b6534b0 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/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;
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index b8c623e2d..b227d818c 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -1487,16 +1487,21 @@
 
     .flag-icon__container {
         display: inline-block;
-        font-size: 12px;
+        height: 15px;
         margin-left: 7px;
         position: relative;
-        top: 1px;
+        top: 2px;
+        vertical-align: top;
         visibility: hidden;
 
         &.visible {
             visibility: visible;
         }
 
+        svg {
+            width: 12px;
+        }
+
         path {
             fill: inherit;
         }
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index ed587305a..cc0c4920f 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -16,6 +16,33 @@
         padding-top: 44px;
     }
 
+    .sidebar-item {
+        .icon {
+            display: inline-block;
+            margin: 0 7px 0 1px;
+            position: relative;
+            text-align: left;
+            vertical-align: top;
+            width: 15px;
+        }
+
+        .icon__lock {
+            top: 2px;
+        }
+
+        .icon__globe {
+            top: 1px;
+        }
+    }
+
+    .sidebar-item__name {
+        display: inline-block;
+        max-width: 167px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: top;
+    }
+
     .sidebar__divider {
         color: $white;
         font-size: .9em;
@@ -44,7 +71,6 @@
     }
 
     .sidebar__switcher {
-        border-top: 1px solid;
         bottom: 0;
         display: block;
         padding-bottom: 0;
@@ -54,18 +80,30 @@
         button {
             @include single-transition(all, .15s, ease-in);
             display: block;
-            height: 42px;
-            text-align: center;
+            font-weight: 600;
+            height: 50px;
+            line-height: 50px;
+            padding: 0;
             text-decoration: none;
             width: 100%;
 
             > span {
-                @include single-transition(all, .15s, ease-in);
-                @include opacity(.6);
+                display: inline-block;
                 position: relative;
+                vertical-align: middle;
                 z-index: 5;
             }
 
+            .icon {
+                display: none;
+                margin-right: 15px;
+
+                svg {
+                    position: relative;
+                    top: 7px;
+                }
+            }
+
             &:hover {
                 span {
                     @include opacity(1);
@@ -93,15 +131,20 @@
     }
 
     .badge {
-        background-color: $primary-color;
+        @include border-radius(100px);
+        font-size: 11px;
+        height: 16px;
+        line-height: 16px;
+        min-width: 18px;
+        padding: 0 5px;
         position: absolute;
-        right: 10px;
-        top: 5px;
+        right: 15px;
+        top: 8px;
     }
 
     .nav-pills__container {
         -webkit-overflow-scrolling: touch;
-        height: calc(100% - 99px);
+        height: calc(100% - 120px);
         overflow: auto;
         position: relative;
     }
@@ -119,11 +162,11 @@
     }
 
     .nav-pills__unread-indicator-top {
-        top: 66px;
+        top: 80px;
     }
 
     .nav-pills__unread-indicator-bottom {
-        bottom: 50px;
+        bottom: 60px;
     }
 
     .nav {
@@ -135,12 +178,10 @@
 
         li {
             > h4 {
-                color: #aaaaaa;
                 font-size: 1em;
-                font-weight: 400;
-                letter-spacing: -.3px;
-                margin: 1.1em 0 .5em;
-                padding: 0 10px 0 15px;
+                font-weight: 600;
+                margin: 1.5em 0 .7em;
+                padding: 0 12px 0 17px;
                 text-transform: uppercase;
             }
 
@@ -155,17 +196,24 @@
                 line-height: 1.5;
                 outline: none;
                 overflow: hidden;
-                padding: 3px 10px 3px 25px;
+                padding: 5px 0 5px 17px;
                 text-overflow: ellipsis;
                 white-space: nowrap;
 
+                .icon {
+                    &.icon__globe,
+                    &.icon__lock {
+                        @include opacity(.5);
+                    }
+                }
+
                 &.has-badge {
-                    padding-right: 30px;
+                    .sidebar-item__name {
+                        max-width: 142px;
+                    }
                 }
 
                 &.has-close {
-                    padding-right: 30px;
-
                     &:hover {
                         .btn-close {
                             @include opacity(.8);
@@ -177,11 +225,11 @@
                         @include opacity(0);
                         display: none;
                         font-family: 'Open Sans', sans-serif;
-                        font-size: 20px;
+                        font-size: 21px;
                         font-weight: 600;
                         position: absolute;
-                        right: 15px;
-                        top: -1px;
+                        right: 18px;
+                        top: 0px;
 
                         &:hover {
                             @include opacity(1);
@@ -204,7 +252,14 @@
                         left: 0;
                         position: absolute;
                         top: 0;
-                        width: 5px;
+                        width: 3px;
+                    }
+                }
+
+                .icon {
+                    &.icon__globe,
+                    &.icon__lock {
+                        @include opacity(.7);
                     }
                 }
 
@@ -229,9 +284,8 @@
     }
 
     .add-channel-btn {
-        color: #aaaaaa;
         float: right;
-        font-size: 22px;
+        font-size: 1.9em;
         font-weight: 700;
         line-height: 18px;
         margin: -2px 0 0 0;
@@ -245,35 +299,46 @@
     }
 
     .status-wrapper {
+        height: 36px;
+        width: 36px;
+
         .status {
-            bottom: -9px;
+            bottom: -4px;
             height: 18px;
             right: -5px;
             width: 18px;
 
-            svg {
-                top: 3px;
-                max-height: 12px;
+            &.status-edit {
+                .fa {
+                    top: 4px;
+                }
             }
 
-            .icon__container {
+            .fa {
                 position: relative;
-                top: 3px;
+                top: 2px;
+            }
 
+            .icon__container {
                 &:after {
                     border-radius: 20px;
                     content: '';
-                    height: 9px;
-                    left: 5px;
+                    height: 10px;
+                    left: 4px;
                     position: absolute;
-                    top: 2px;
-                    width: 9px;
+                    top: 4px;
+                    width: 10px;
                 }
+            }
 
-                svg {
-                    top: 0;
-                    z-index: 1;
-                }
+            svg {
+                height: 13px;
+                left: 3px;
+                max-height: initial;
+                position: relative;
+                top: 3px;
+                width: 13px;
+                z-index: 1;
             }
         }
     }
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;
+    }
+}
diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss
index a96685c87..67ec9e3a7 100644
--- a/webapp/sass/responsive/_desktop.scss
+++ b/webapp/sass/responsive/_desktop.scss
@@ -80,22 +80,20 @@
 }
 
 @media (max-width: 1024px) {
-    .inner-wrap {
-        &.move--left {
-            .channel-header {
-                .heading {
-                    width: 100px;
-                }
-            }
-        }
-    }
-
     .channel-header {
         .search-bar__container {
             .search__form {
                 width: 150px;
             }
         }
+
+        .heading {
+            max-width: calc(100vw - 800px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 750px);
+            }
+        }
     }
 
     .integration-option {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 24db3821f..862c3a59c 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,12 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .channel-header {
+        .channel-header__icon {
+            display: none;
+        }
+    }
+
     .member-role .member-menu,
     .member-drop .member-menu {
         right: 0;
@@ -76,10 +82,10 @@
         @include box-shadow(none);
         background: alpha-color($black, .8);
         border: none;
-        height: calc(100% - 40px);
+        height: calc(100% - 50px);
         max-width: 100%;
         position: fixed;
-        top: 47px;
+        top: 40px !important;
         width: 100%;
 
         &.in {
@@ -865,14 +871,18 @@
                 white-space: nowrap;
 
                 .heading {
+                    font-size: 17px;
+                    font-weight: 400;
                     line-height: normal;
                     position: relative;
-                    top: 11px;
+                    top: 14px;
                     vertical-align: top;
                 }
 
                 .header-dropdown__icon {
-                    top: 18px;
+                    font-size: 12px;
+                    margin-left: 5px;
+                    top: 20px;
                     vertical-align: top;
                 }
             }
@@ -891,12 +901,12 @@
                 @include translate3d(0, 100%, 0);
                 background: alpha-color($black, .9);
                 display: block;
-                height: calc(100% - 40px);
+                height: calc(100% - 48px);
                 left: 0;
                 overflow: auto;
                 padding: 1.4em 0 0;
                 position: fixed;
-                top: 42px;
+                top: 48px;
                 visibility: hidden;
                 width: 100%;
 
@@ -981,21 +991,36 @@
     }
 
     .search-bar__container {
-        @include flex(0 0 44px);
+        @include flex(0 0 50px);
         background: $primary-color;
         color: $white;
         padding: 0;
 
+        .search-form__container {
+            padding: 0;
+        }
+
         .search__form {
             @include single-transition(all, .2s, linear);
             @include translateX(0);
             border: none;
-            height: 45px;
-            padding: 7px 20px 0 49px;
-            position: relative;
+            margin-top: 9px;
             width: 100%;
-            margin-left: 0px;
-            margin-right: 0px;
+
+            .search-bar {
+                font-size: 14px;
+                height: 32px;
+                padding: 0 40px;
+            }
+
+            .search__icon {
+                left: 15px;
+                top: 7px;
+
+                svg {
+                    width: 17px;
+                }
+            }
 
             .icon--refresh {
                 @include opacity(.6);
@@ -1009,7 +1034,7 @@
                 background: $white;
                 border: none;
                 color: $dark-gray;
-                padding: 0 31px 0 31px;
+                padding: 0 31px;
             }
         }
 
@@ -1053,7 +1078,7 @@
         }
 
         .nav-pills__container {
-            height: calc(100% - 42px);
+            height: calc(100% - 60px);
         }
 
         > div {
@@ -1110,7 +1135,7 @@
                 }
 
                 h4 {
-                    margin: 16px 0 8px;
+                    margin: 2em 0 1.5em;
                 }
 
                 > a {
@@ -1148,10 +1173,10 @@
             }
 
             .emoji-rhs {
-                position: relative;
                 display: none;
-                top: 1px;
+                position: relative;
                 right: -1px;
+                top: 1px;
             }
 
             .msg-typing:empty {
@@ -1171,27 +1196,32 @@
             }
         }
 
-        .sidebar__collapse,
-        .sidebar__search-icon {
-            display: block;
+        .sidebar-collapse__container {
+            display: table-cell;
+            vertical-align: top;
         }
 
         .sidebar__search-clear {
+            @include opacity(1);
+            color: inherit;
             display: block;
-            top: 6px;
-            height: 30px;
-            width: 35px;
-            margin-right: 18px;
+            height: 32px;
+            margin-right: 0;
+            text-align: center;
+            top: 0;
+            width: 42px;
+
             &.visible {
                 visibility: visible;
             }
         }
 
         .sidebar__search-clear-x {
-            margin-left: 14px;
-            font-size: 22px;
+            font-size: 21px;
             font-weight: 700;
-            opacity: .7;
+            line-height: 0;
+            position: relative;
+            top: 9px;
         }
 
         .sidebar--right__close {
@@ -1199,12 +1229,12 @@
         }
 
         .sidebar-right__body {
-            height: calc(100% - 44px);
+            height: calc(100% - 56px);
         }
     }
 
     .search-items-container {
-        height: calc(100% - 44px);
+        height: calc(100% - 56px);
     }
 
     .inner-wrap {
@@ -1261,10 +1291,10 @@
 
     .app__content {
         margin: 0;
-        padding-top: 45px;
+        padding-top: 56px;
 
         .channel__wrap & {
-            padding-top: 45px;
+            padding-top: 56px;
         }
 
         #channel-header {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 70b5e9b8f..8b81f30ca 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -1,6 +1,30 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 960px) {
+    .inner-wrap {
+        &.move--left {
+            .channel-header {
+                .heading {
+                    max-width: calc(100vw - 600px);
+
+                    .multi-teams & {
+                        max-width: calc(100vw - 650px);
+                    }
+                }
+            }
+
+            .channel-header__info {
+                .channel-header__description {
+                    max-width: calc(100vw - 600px);
+
+                    .multi-teams & {
+                        max-width: calc(100vw - 650px);
+                    }
+                }
+            }
+        }
+    }
+
     .textarea-wrapper {
         .textbox-preview-link,
         .textbox-help-link {
@@ -8,15 +32,23 @@
         }
     }
 
-    .channel-header {
-        .heading {
-            max-width: 90px;
+    .channel-header__info {
+        .channel-header__description {
+            max-width: calc(100vw - 660px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 710px);
+            }
         }
     }
 
-    .search__form {
-        .sidebar--right & {
-            width: 300px;
+    .channel-header {
+        .heading {
+            max-width: calc(100vw - 700px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 750px);
+            }
         }
     }
 
@@ -137,7 +169,6 @@
             transform: translateX(0) !important;
 
             .search-bar__container {
-                padding-right: 8px;
                 z-index: 5;
             }
         }
diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss
index 46c1676ea..bb583c73a 100644
--- a/webapp/sass/routes/_about-modal.scss
+++ b/webapp/sass/routes/_about-modal.scss
@@ -25,8 +25,16 @@
                     font-size: 16px;
                 }
 
-                .fa {
-                    margin: 0 4px 0 8px;
+                .icon {
+                    margin: 0 5px 0 8px;
+                    position: relative;
+                    top: 1px;
+
+                    svg {
+                        @include opacity(.8);
+                        height: 14px;
+                        width: 14px;
+                    }
                 }
             }
         }
diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss
index 6a041d6ec..4d2b031e4 100644
--- a/webapp/sass/utils/_mixins.scss
+++ b/webapp/sass/utils/_mixins.scss
@@ -31,28 +31,8 @@
 // Webrtc button
 @mixin webrtc-button {
     .webrtc__button {
-        @include border-radius(50px);
-        background: $button--ready;
-        display: block;
-        height: 33px;
-        text-align: center;
-        width: 33px;
-
-        &.on,
-        &:hover {
-            background: darken($button--ready, 5%);
-        }
-
         &.offline {
-            background: $video-circle-offline;
-
-            &:hover {
-                background: $video-circle-offline;
-            }
-        }
-
-        svg {
-            fill: $white;
+            @include opacity(.5);
         }
     }
 }