Mono repo -> Master (#22553)

Combines the following repositories into one:

https://github.com/mattermost/mattermost-server
https://github.com/mattermost/mattermost-webapp
https://github.com/mattermost/focalboard
https://github.com/mattermost/mattermost-plugin-playbooks

webapp/channels/src/sass/admin_console_base/_module.scss

@@ -0,0 +1,2 @@
+// Only for combining all the files in this folder
+@import 'sys_css_variables';

webapp/channels/src/sass/admin_console_base/_sys_css_variables.scss

@@ -0,0 +1,57 @@
+:root {
+    // Cloned default hex values from base/css_variables to be used in the system console
+    --sys-away-indicator: #ffbc1f;
+    --sys-away-indicator-dark: #997113;
+    --sys-button-bg: #166de0;
+    --sys-button-color: #fff;
+    --sys-center-channel-bg: #fff;
+    --sys-center-channel-color: #3d3c40;
+    --sys-dnd-indicator: #f74343;
+    --sys-error-text: #d24b4e;
+    --sys-link-color: #2389d7;
+    --sys-mention-bg: #fff;
+    --sys-mention-color: #145dbf;
+    --sys-mention-highlight-bg: #ffe577;
+    --sys-mention-highlight-link: #166de0;
+    --sys-new-message-separator: #f80;
+    --sys-online-indicator: #3db887;
+    --sys-sidebar-bg: #145dbf;
+    --sys-sidebar-header-bg: #1153ab;
+    --sys-sidebar-header-text-color: #fff;
+    --sys-sidebar-text: #fff;
+    --sys-sidebar-text-60: #fff9;
+    --sys-sidebar-text-80: #fffc;
+    --sys-sidebar-text-active-border: #5d89ea;
+    --sys-sidebar-text-active-color: #fff;
+    --sys-sidebar-text-hover-bg: #4578bf;
+    --sys-sidebar-unread-text: #fff;
+    --sys-denim-button-bg: #1c58d9;
+    --sys-denim-center-channel-text: #3f4350;
+
+    // Cloned RGB values from base/css_variables, to be used as rgba(var(--sys-color), opacity_here) to apply opacity to base colors
+    --sys-away-indicator-rgb: 255, 188, 31;
+    --sys-away-indicator-dark-rgb: 153, 113, 19;
+    --sys-button-bg-rgb: 22, 109, 224;
+    --sys-button-color-rgb: 255, 255, 255;
+    --sys-center-channel-bg-rgb: 255, 255, 255;
+    --sys-center-channel-color-rgb: 61, 60, 64;
+    --sys-dnd-indicator-rgb: 247, 67, 67;
+    --sys-error-text-color-rgb: 210, 75, 78;
+    --sys-link-color-rgb: 35, 137, 215;
+    --sys-mention-bg-rgb: 255, 255, 255;
+    --sys-mention-color-rgb: 20, 93, 191;
+    --sys-mention-highlight-bg-rgb: 255, 229, 119;
+    --sys-mention-highlight-link-rgb: 22, 109, 224;
+    --sys-new-message-separator-rgb: 255, 136, 0;
+    --sys-online-indicator-rgb: 61, 184, 135;
+    --sys-sidebar-bg-rgb: 20, 93, 191;
+    --sys-sidebar-header-bg-rgb: 17, 83, 171;
+    --sys-sidebar-header-text-color-rgb: 255, 255, 255;
+    --sys-sidebar-text-rgb: 255, 255, 255;
+    --sys-sidebar-text-active-border-rgb: 93, 137, 234;
+    --sys-sidebar-text-active-color-rgb: 255, 255, 255;
+    --sys-sidebar-text-hover-bg-rgb: 69, 120, 191;
+    --sys-sidebar-unread-text-rgb: 255, 255, 255;
+    --sys-denim-button-bg-rgb: 28, 88, 217;
+    --sys-denim-center-channel-text-rgb: 63, 67, 80;
+}

webapp/channels/src/sass/base/_css_variables.scss

@@ -0,0 +1,98 @@
+:root {
+    // Default Hex values to be replaced by applyTheme()
+    // these are define to prevent flashes of unstyled content
+    --away-indicator: #ffbc42;
+    --away-indicator-dark: #c79e3f;
+    --button-bg: #166de0;
+    --button-color: #fff;
+    --center-channel-bg: #fff;
+    --center-channel-color: #3d3c40;
+    --dnd-indicator: #d24b4e;
+    --error-text: #d24b4e;
+    --warning-text: #cc8f00;
+    --link-color: #2389d7;
+    --mention-bg: #fff;
+    --mention-color: #145dbf;
+    --mention-highlight-bg: #ffe577;
+    --mention-highlight-link: #166de0;
+    --new-message-separator: #f80;
+    --online-indicator: #06d6a0;
+    --sidebar-bg: #145dbf;
+    --sidebar-header-bg: #1153ab;
+    --sidebar-header-text-color: #fff;
+    --sidebar-text: #fff;
+    --sidebar-text-active-border: #579eff;
+    --sidebar-text-active-color: #fff;
+    --sidebar-text-hover-bg: #4578bf;
+    --sidebar-unread-text: #fff;
+    --sidebar-team-background: #0b428c;
+    --secondary-blue: #22406d;
+    --denim-button-bg: #1c58d9;
+    --denim-status-online: #3db887;
+    --denim-sidebar-active-border: #5d89ea;
+    --title-color-indigo-500: #1e325c;
+
+    // Default RGB values to be replaced by applyTheme() (do not add opacity mutations here)
+    // these are define to prevent flashes of unstyled content
+    --away-indicator-rgb: 255, 188, 66;
+    --button-bg-rgb: 22, 109, 224;
+    --button-color-rgb: 255, 255, 255;
+    --center-channel-bg-rgb: 255, 255, 255;
+    --center-channel-color-rgb: 61, 60, 64;
+    --dnd-indicator-rgb: 247, 67, 67;
+    --error-text-color-rgb: 253, 89, 96;
+    --link-color-rgb: 35, 137, 215;
+    --mention-bg-rgb: 255, 255, 255;
+    --mention-color-rgb: 20, 93, 191;
+    --mention-highlight-bg-rgb: 255, 229, 119;
+    --mention-highlight-link-rgb: 22, 109, 224;
+    --new-message-separator-rgb: 255, 136, 0;
+    --online-indicator-rgb: 6, 214, 160;
+    --sidebar-bg-rgb: 20, 93, 191;
+    --sidebar-header-bg-rgb: 17, 83, 171;
+    --sidebar-header-text-color-rgb: 255, 255, 255;
+    --sidebar-text-rgb: 255, 255, 255;
+    --sidebar-text-active-border-rgb: 87, 158, 255;
+    --sidebar-text-active-color-rgb: 255, 255, 255;
+    --sidebar-text-hover-bg-rgb: 69, 120, 191;
+    --sidebar-unread-text-rgb: 255, 255, 255;
+    --error-box-background: 197, 67, 72;
+    --sidebar-team-background-rgb: 11, 66, 140;
+    --secondary-blue-rgb: 34, 64, 109;
+    --denim-status-online-rgb: 61, 184, 135;
+    --denim-button-bg-rgb: 28, 88, 217;
+    --title-color-indigo-500-rgb: 30, 50, 92;
+
+    // offline indicator color stays the same in all themes, that's why it is separated from the other variables
+    // the color specified here is the new hard-coded color from the compass design system
+    --offline-indicator: rgba(175, 179, 192, 0.64);
+
+    // Elevation values used for box shadows.
+    // Defined as CSS variables so that both sass and JS can use them.
+    --elevation-1: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
+    --elevation-2: 0 4px 6px 0 rgba(0, 0, 0, 0.12);
+    --elevation-3: 0 6px 14px 0 rgba(0, 0, 0, 0.12);
+    --elevation-4: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
+    --elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
+    --elevation-6: 0 20px 32px 0 rgba(0, 0, 0, 0.12);
+
+    // Global Header variables
+    --global-header-background: var(--sidebar-teambar-bg);
+    --global-header-text: var(--sidebar-header-text-color);
+    --global-header-background-rgb: var(--sidebar-teambar-bg-rgb);
+    --global-header-text-rgb: var(--sidebar-header-text-color-rgb);
+
+    // semantic colors
+    // not to be overwritten, since they are shared among themes
+    --semantic-color-general: var(--center-channel-color-rgb);
+    --semantic-color-info: 93, 137, 234;
+    --semantic-color-success: 61, 184, 135;
+    --semantic-color-warning: 245, 171, 0;
+    --semantic-color-danger: 210, 75, 78;
+
+    // Do not use these variables
+    // use --center-channel-color instead
+    --center-channel-text: var(--center-channel-color);
+    // use --center-channel-color-rgb instead
+    --center-channel-text-rgb: var(--center-channel-color-rgb);
+}

webapp/channels/src/sass/base/_module.scss

@@ -0,0 +1,4 @@
+// Only for combining all the files in this folder
+@import 'typography';
+@import 'structure';
+@import 'css_variables';

webapp/channels/src/sass/base/_structure.scss

@@ -0,0 +1,193 @@
+@charset 'UTF-8';
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    position: relative;
+    width: 100%;
+    background: $bg--gray;
+
+    &.sticky {
+        .container-fluid {
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+        }
+    }
+
+    &.admin-onboarding {
+        background-image: url('images/admin-onboarding-background.jpg');
+        background-position: 50%;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+}
+
+*:focus {
+    outline: none;
+}
+
+.sticky {
+    background: $white;
+
+    > .channel-view {
+        overflow: auto;
+        height: 100vh;
+        padding: 0 15px;
+    }
+
+    .inner-wrap {
+        width: 100%;
+
+        > .row {
+            &.content {
+                min-height: calc(100vh - 89px);
+
+                @media (max-width: 768px) {
+                    min-height: calc(100vh - 187px);
+                }
+            }
+        }
+    }
+}
+
+.help-page {
+    overflow: hidden;
+    padding: 3em 0;
+}
+
+.inner-wrap {
+    height: 100%;
+
+    &.sticky {
+        overflow: auto;
+    }
+
+    > .row {
+        &.main {
+            position: relative;
+            height: 100%;
+        }
+    }
+}
+
+.container-fluid {
+    @include pie-clearfix;
+
+    position: relative;
+    height: 100%;
+}
+
+.channel-view {
+    @include clearfix;
+
+    position: relative;
+    height: 100%;
+}
+
+/* stylelint-disable -- grid-template indentation */
+#root,
+body.app__body #root {
+    display: grid;
+    overflow: hidden;
+
+    --columns: min-content min-content minmax(385px, 1fr) minmax(0, auto) min-content;
+    grid-template:
+        'announcement announcement announcement announcement announcement' min-content
+        'header header header header header' min-content
+        'team-sidebar lhs center rhs app-sidebar'
+        'footer footer footer footer footer' min-content
+        / var(--columns);
+    ;
+
+    > :only-child {
+        grid-area: center;
+        width: 100%;
+    }
+
+
+    .announcement-bar {
+        grid-area: announcement;
+    }
+
+    #global-header {
+        grid-area: header;
+    }
+    .team-sidebar {
+        grid-area: team-sidebar;
+    }
+    #SidebarContainer {
+        grid-area: lhs;
+    }
+    #channel_view,
+    .product-wrapper {
+        grid-area: center;
+        overflow: hidden;
+    }
+    .sidebar--right--width-holder {
+        grid-area: rhs;
+    }
+    #sidebar-right {
+        grid-area: rhs;
+
+        @media screen and (min-width: 768px) {
+            position: absolute;
+            right: 0;
+        }
+    }
+    .app-bar {
+        grid-area: app-sidebar;
+    }
+
+    &:not(.console__root) {
+        @media screen and (max-width: 768px) {
+            grid-template:
+                'announcement' min-content
+                'header' min-content
+                'center'
+                'footer' min-content
+                / auto
+            ;
+            .team-sidebar,
+            #SidebarContainer,
+            #channel_view,
+            .product-wrapper,
+            #sidebar-right,
+            .app-bar {
+                grid-area: center;
+            }
+            #SidebarContainer.move--right {
+                position: relative;
+                left: 65px;
+            }
+        }
+    }
+
+    @media screen and (min-width: 768px) and (max-width: 1200px) {
+        &.rhs-open-expanded {
+            .sidebar--right--width-holder {
+                display: none;
+            }
+            #sidebar-right {
+                position: relative;
+                width: 100%;
+            }
+            --columns: min-content min-content 0 1fr min-content;
+        }
+        #sidebar-right {
+            transition: none;
+        }
+    }
+}
+
+/* stylelint-enable -- grid-template indentation */
+
+#channel_view.channel-view {
+    background: var(--center-channel-bg);
+}
+
+img {
+    max-width: 100%;
+}

webapp/channels/src/sass/base/_typography.scss

@@ -0,0 +1,238 @@
+@charset 'UTF-8';
+
+b,
+strong {
+    font-weight: 600;
+}
+
+a {
+    color: $primary-color;
+    cursor: pointer;
+    text-decoration: none;
+    word-break: break-word;
+
+    &:focus,
+    &:hover {
+        color: $primary-color--hover;
+    }
+}
+
+.color--link {
+    color: $link-color;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+}
+
+body {
+    @include font-smoothing;
+
+    font-family: 'Open Sans', sans-serif;
+}
+
+h1,
+h2,
+h3 {
+    font-family: Metropolis, sans-serif;
+}
+
+h1 {
+    font-weight: 600;
+}
+
+.is-empty:empty {
+    display: none;
+}
+
+label {
+    &.has-error {
+        color: $red;
+        font-weight: normal;
+    }
+}
+
+.small {
+    font-size: 12px;
+}
+
+.light {
+    opacity: 0.56;
+}
+
+.word-break--all {
+    word-break: break-all;
+}
+
+.whitespace--nowrap {
+    white-space: nowrap;
+}
+
+.whitespace--normal {
+    white-space: normal;
+}
+
+.overflow--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+ul,
+ol {
+    padding-left: 22px;
+    margin-top: 3px;
+    margin-bottom: 0.11em;
+}
+
+.fa {
+    &.fa-1x {
+        font-size: 1.6rem;
+    }
+}
+
+.font-weight--normal {
+    font-weight: normal;
+}
+
+.font-weight--semibold {
+    font-weight: 600;
+}
+
+.cursor--pointer {
+    cursor: pointer;
+}
+
+// Metropolis font definitions
+@font-face {
+    font-family: 'Metropolis';
+    font-style: normal;
+    font-weight: 600;
+    src: url('../fonts/Metropolis-SemiBold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Metropolis';
+    font-style: italic;
+    font-weight: 600;
+    src: url('../fonts/Metropolis-SemiBoldItalic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Metropolis';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/Metropolis-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Metropolis';
+    font-style: italic;
+    font-weight: 400;
+    src: url('../fonts/Metropolis-RegularItalic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Metropolis';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../fonts/Metropolis-Light.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'Metropolis';
+    font-style: italic;
+    font-weight: 300;
+    src: url('../fonts/Metropolis-LightItalic.woff') format('woff');
+}
+
+/* open-sans-300 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 300;
+    src:
+        local(''),
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-300italic - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+    font-family: 'Open Sans';
+    font-style: italic;
+    font-weight: 300;
+    src:
+        local(''),
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    src:
+        local(''),
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-italic - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+    font-family: 'Open Sans';
+    font-style: italic;
+    font-weight: 400;
+    src:
+        local(''),
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-600italic - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+    font-family: 'Open Sans';
+    font-style: italic;
+    font-weight: 600;
+    src:
+        local(''),
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* open-sans-600 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
+@font-face {
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 600;
+    src:
+        local(''),
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+        url('../fonts/open-sans-v18-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+.app__body.font--open_sans {
+    font-family: 'Open Sans', sans-serif;
+}
+
+.app__body {
+    h1,
+    h2,
+    h3 {
+        font-family: Metropolis, sans-serif;
+    }
+}
+
+.color--link--adminack {
+    padding-left: 20px;
+    color: $white;
+    cursor: pointer;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+}

webapp/channels/src/sass/components/_admin-modal.scss

@@ -0,0 +1,7 @@
+.admin-modal {
+    .modal-header {
+        margin: 1px;
+        background-color: $black;
+        color: $white;
+    }
+}

webapp/channels/src/sass/components/_admin-sidebar-header.scss

@@ -0,0 +1,65 @@
+.AdminSidebarHeader {
+    background: #333;
+
+    > div {
+        &:first-child {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            cursor: pointer;
+        }
+
+        > img {
+            width: 36px;
+            height: 36px;
+            border-radius: 36px;
+        }
+
+        .header__info {
+            @include clearfix;
+
+            position: relative;
+            width: 100%;
+            flex-grow: 1;
+            padding: 3px 15px 0 8px;
+            color: $white;
+
+            .team__name {
+                overflow: hidden;
+                max-width: 100%;
+                font-size: 14px;
+                font-weight: 600;
+                text-decoration: none;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .user__name {
+                font-weight: 400;
+                opacity: 0.8;
+            }
+        }
+
+        .menu-icon {
+            margin-right: 10px;
+            fill: $white;
+            opacity: 0.8;
+        }
+
+        &:hover {
+            .user__name,
+            .menu-icon {
+                opacity: 1;
+            }
+
+            > div > img {
+                opacity: 0.8;
+            }
+        }
+    }
+
+    .Menu {
+        margin-left: 16px;
+    }
+}

webapp/channels/src/sass/components/_alerts.scss

@@ -0,0 +1,37 @@
+@charset 'UTF-8';
+
+.alert {
+    padding: 8px 12px;
+    border-radius: $border-rad;
+
+    .alert-transparent {
+        background: var(--center-channel-bg);
+    }
+}
+
+.alert-grey {
+    background: #f2f2f2;
+    color: #999;
+}
+
+.alert--confirm {
+    display: inline-block;
+    padding: 4px 10px;
+    margin: 1px 0 0 10px;
+}
+
+.alert .btn-close {
+    float: right;
+    font-size: 21px;
+    line-height: 20px;
+
+    &,
+    &:link,
+    &:visited,
+    &:hover,
+    &:focus,
+    &:active {
+        color: inherit;
+        text-decoration: none;
+    }
+}

webapp/channels/src/sass/components/_announcement-bar.scss

@@ -0,0 +1,149 @@
+@charset 'UTF-8';
+
+.announcement-bar {
+    z-index: 999;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    min-height: $announcement-bar-height;
+    max-height: $announcement-bar-height;
+    align-items: center;
+    justify-content: center;
+    background-color: #579eff;
+    color: $white;
+    text-align: center;
+
+    .announcement-bar__text {
+        display: flex;
+        overflow: hidden;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        white-space: nowrap;
+
+        > span {
+            overflow: hidden;
+            padding: 0 8px;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 20px;
+            text-overflow: ellipsis;
+
+            .announcement-bar__configuration {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            &::after {
+                display: block;
+                content: '';
+            }
+        }
+
+        .annnouncementBar__purchaseNow,
+        .annnouncementBar__renewLicense {
+            margin-top: 0;
+        }
+
+        .annnouncementBar__renewLicense {
+            border-color: $white;
+        }
+    }
+
+    a {
+        color: inherit !important;
+        text-decoration: underline;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color: inherit !important;
+        }
+
+        &.announcement-bar__close {
+            position: absolute;
+            top: 5px;
+            right: 0;
+            padding: 0 10px;
+            color: $white;
+            font-family: 'Open Sans', sans-serif;
+            font-size: 20px;
+            font-weight: 600;
+            text-decoration: none;
+
+            &:hover {
+                color: $white;
+                text-decoration: none;
+            }
+        }
+    }
+
+    .fa-wrapper {
+        margin: 0 5px;
+    }
+
+    .resend-verification-wrapper::before {
+        content: "\00a0 ";
+    }
+
+    .content__icon,
+    i {
+        margin-right: 4px;
+        color: #fff;
+        font-family: 'compass-icons';
+        font-size: 16px;
+    }
+
+    button {
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.08);
+        }
+
+        height: 24px;
+        box-sizing: border-box;
+        padding: 4px 8px;
+        border: 1px solid #fff;
+        margin-left: 8px;
+        background-color: inherit !important;
+        border-radius: 4px;
+        font-family: Open Sans;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 16px;
+    }
+}
+
+.announcement-bar-critical {
+    background-color: #f74343;
+}
+
+.announcement-bar-success {
+    background-color: #06d6a0;
+}
+
+.announcement-bar-advisor {
+    background-color: #579eff;
+}
+
+.announcement-bar-advisor-ack {
+    background-color: #06d6a0;
+}
+
+.announcement-bar-general {
+    background-color: #3d3c40;
+}
+
+.announcement-bar__link {
+    margin-left: 4px;
+}
+
+.advisor-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    margin-bottom: 2px;
+    margin-left: 8px;
+}

webapp/channels/src/sass/components/_apps-modal.scss

@@ -0,0 +1,7 @@
+#appsModal {
+    .modal-footer {
+        .btn {
+            margin-bottom: 5px;
+        }
+    }
+}

webapp/channels/src/sass/components/_badge.scss

@@ -0,0 +1,78 @@
+.channel-view {
+    .badge {
+        position: relative;
+        display: flex;
+        min-width: 18px;
+        height: 18px;
+        align-items: center;
+        justify-content: center;
+        padding: 0 5px;
+        border-radius: 100px;
+        font-size: 11px;
+        line-height: 18px;
+    }
+
+    .team-sidebar,
+    .sidebar--left,
+    #SidebarContainer {
+        .active .badge,
+        .badge {
+            background: var(--mention-bg);
+            color: var(--mention-color);
+
+            &.urgent {
+                background-color: var(--dnd-indicator);
+                color: #fff;
+            }
+        }
+    }
+
+    .team-sidebar,
+    #SidebarContainer {
+        .badge {
+            min-width: 20px;
+            height: auto;
+            padding: 0 6px;
+            border-radius: 8px;
+            font-size: 11px;
+            -webkit-font-smoothing: subpixel-antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            font-weight: 700;
+            letter-spacing: 0;
+            line-height: 16px;
+            text-align: center;
+
+            &.badge-max-number {
+                padding: 0 4px 0 5px;
+            }
+        }
+    }
+
+    .team-sidebar {
+        .badge {
+            position: absolute;
+            z-index: 5;
+            top: -3px;
+            right: -3px;
+            display: inline-block;
+            flex-shrink: 0;
+            box-shadow: 0 0 0 3px var(--sidebar-teambar-bg);
+        }
+    }
+
+    #SidebarContainer {
+        .badge {
+            display: inline-block;
+            flex-shrink: 0;
+            margin: 0 4px;
+        }
+    }
+
+    .navbar-toggle {
+        .badge {
+            position: absolute;
+            top: 10px;
+            left: 8px;
+        }
+    }
+}

webapp/channels/src/sass/components/_buttons.scss

@@ -0,0 +1,134 @@
+@charset 'UTF-8';
+
+button {
+    .unread-badge {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        margin: 0 0 0 40px;
+        background: #f74343;
+        border-radius: 50%;
+    }
+
+    &.style--none {
+        padding: 0;
+        border: none;
+        background: transparent;
+
+        &:focus {
+            outline: 0;
+            text-decoration: none;
+        }
+
+        &.btn {
+            padding: 6px 12px;
+        }
+
+        &.btn--block {
+            width: 100%;
+            text-align: left;
+        }
+
+        &:hover,
+        &:active {
+            text-decoration: none;
+        }
+    }
+}
+
+.btn {
+    border-radius: $border-rad;
+    transition: all 0.15s ease;
+
+    &.btn-primary {
+        border-color: transparent;
+        background: $primary-color;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background: $primary-color--hover;
+        }
+    }
+
+    &.btn-danger {
+        color: $white;
+
+        .app__body & {
+            color: $white;
+
+            &:hover,
+            &:focus,
+            &:active {
+                color: $white;
+            }
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+            color: $white;
+        }
+    }
+
+    &.btn-transparent {
+        padding: 7px 12px;
+        border: none;
+        background: transparent;
+    }
+
+    &.btn-inactive {
+        border-color: transparent;
+        background: $light-gray;
+        color: $white;
+    }
+
+    .fa {
+        margin-right: 3px;
+
+        &.margin-right {
+            margin-right: 6px;
+        }
+
+        &.margin-left {
+            margin-left: 6px;
+        }
+    }
+
+    &.btn-link {
+        &:active,
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
+%btn-transition {
+    transition: all 0.15s ease;
+}
+
+.btn-icon {
+    width: 3.2rem;
+    height: 3.2rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: 4px;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    fill: rgba(var(--center-channel-color-rgb), 0.56);
+    font-size: 1.6rem;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        color: rgba(var(--center-channel-color-rgb), 0.72);
+        fill: rgba(var(--center-channel-color-rgb), 0.72);
+    }
+
+    &:active,
+    &--active,
+    &--active:hover {
+        background: rgba(var(--button-bg-rgb), 0.08);
+        color: v(button-bg);
+        fill: v(button-bg);
+    }
+}

webapp/channels/src/sass/components/_channel-header__icon.scss

@@ -0,0 +1,98 @@
+.channel-header__icon {
+    position: relative;
+    z-index: 5;
+    display: flex;
+    min-width: 32px;
+    height: 32px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    margin: 16px 0 0 4px;
+    background: transparent;
+    border-radius: 4px;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    cursor: pointer;
+    fill: rgba(var(--center-channel-color-rgb), 0.56);
+    text-align: center;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        color: rgba(var(--center-channel-color-rgb), 0.72);
+        fill: rgba(var(--center-channel-color-rgb), 0.72);
+    }
+
+    .icon {
+        font-size: 16px;
+
+        svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    .icon.icon__flag {
+        svg {
+            width: 18px;
+            height: 18px;
+        }
+    }
+
+    &:active,
+    &--active,
+    &--active:hover {
+        background: rgba(var(--button-bg-rgb), 0.08);
+        color: v(button-bg);
+        fill: v(button-bg);
+
+        .icon__text {
+            color: v(button-bg);
+        }
+
+        .icon {
+            color: v(button-bg);
+        }
+    }
+
+    &--active-inverted,
+    &--active-inverted:hover {
+        background: v(button-bg);
+        color: v(button-color);
+        fill: v(button-color);
+    }
+
+    .icon__text {
+        margin: 0 2px;
+        font-weight: 600;
+    }
+
+    .icon__search {
+        top: 1px;
+    }
+}
+
+.channel-header__icon--wide {
+    width: auto;
+    min-width: unset;
+    padding: 0 6px;
+}
+
+.channel-header__icon--left {
+    height: unset;
+    padding: 4px;
+    margin: 0 4px 0 0;
+
+    .icon {
+        width: 16px;
+        height: 16px;
+    }
+
+    svg {
+        width: 12px;
+        height: 12px;
+    }
+}
+
+.userGuideHelp {
+    display: inline-table;
+}

webapp/channels/src/sass/components/_channel-invite-modal.scss

@@ -0,0 +1,196 @@
+@charset "UTF-8";
+
+@import 'utils/variables';
+@import 'utils/mixins';
+
+.modal .channel-invite__content,
+.modal .user-groups-modal__content {
+    .multi-select__container {
+        padding: 0 2.4rem;
+    }
+
+    .react-select__multi-value {
+        border-radius: 50px;
+    }
+
+    .multi-select__help {
+        padding: 8px 2.4rem 0;
+    }
+
+    .filtered-user-list {
+        display: block;
+        height: auto;
+    }
+
+    .react-select__multi-value__label {
+        display: flex;
+        align-items: center;
+        padding: 4px;
+        color: inherit;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .react-select__value__name {
+        margin: 0 0 0 8px;
+    }
+
+    .react-select__multi-value__remove {
+        margin-right: 4px;
+    }
+
+    .multi-select__wrapper {
+        position: absolute;
+        z-index: 5;
+        overflow: auto;
+        width: calc(100% - 28px);
+        height: auto;
+        max-height: 272px;
+        padding: 12px 0;
+        margin: -10px 0 0 14px;
+        border-radius: 4px;
+        box-shadow: var(--elevation-4);
+    }
+
+    .multi-select__footer {
+        padding: 0 24px 24px 0;
+        text-align: right;
+    }
+
+    .btn-primary {
+        height: 40px;
+        padding: 0 36px;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .no-channel-message {
+        padding: 1rem;
+        font-size: 1.4rem;
+
+        .primary-message {
+            margin: 0;
+            color: var(--center-channel-color);
+            font-size: inherit;
+            line-height: 28px;
+        }
+    }
+
+    .react-select__value-container {
+        padding: 0 16px;
+        font-size: 16px;
+
+        &.react-select__value-container--has-value {
+            padding: 0 8px;
+        }
+    }
+
+    .more-modal__list {
+        height: auto;
+
+        .more-modal__options {
+            overflow: visible;
+            min-height: auto;
+        }
+    }
+
+    .react-select__control.react-select-auto {
+        overflow: auto;
+        min-height: 48px;
+        max-height: 125px;
+        padding: 3px 0;
+    }
+
+    .loading-screen {
+        position: relative !important;
+        padding: 1rem;
+    }
+
+    .more-modal__actions {
+        display: none;
+    }
+
+    .more-modal__row {
+        height: 40px;
+        padding: 0 2.4rem;
+        border: none;
+
+        .more-modal__name {
+            font-weight: 400;
+        }
+    }
+
+    .more-modal__details {
+        padding-left: 12px;
+    }
+}
+
+.modal .channel-invite__content {
+    display: flex;
+    flex-direction: column;
+
+    .filtered-user-list {
+        order: 0;
+    }
+
+    .invite-as-guest {
+        width: fit-content;
+        order: 1;
+        padding-top: 8px;
+        margin-right: 2.4rem;
+        margin-bottom: 22px;
+        margin-left: auto;
+        font-weight: 600;
+    }
+
+    .multi-select__footer {
+        order: 2;
+        margin-top: 10px;
+
+        .btn-cancel {
+            @include tertiary-button;
+
+            width: auto;
+            height: 40px;
+            margin-right: 10px;
+        }
+
+        .save-button {
+            width: 67px;
+            padding: 0;
+        }
+    }
+
+    .custom-no-options-message {
+        padding: 12px 15px;
+        font-size: 16px;
+        line-height: 24px;
+
+        button {
+            padding: 0;
+            margin-top: -3px;
+            font-size: 16px;
+        }
+    }
+}
+
+body.app__body {
+    .channel-invite,
+    .user-groups-modal-create {
+        .multi-select__wrapper {
+            border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+            background: rgba(var(--center-channel-bg-rgb), 1);
+        }
+    }
+}
+
+body:not(.app__body) {
+    .channel-invite,
+    .user-groups-modal-create {
+        .multi-select__wrapper {
+            border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.16);
+            background: rgba(var(--sys-center-channel-bg-rgb), 1);
+        }
+    }
+}

webapp/channels/src/sass/components/_channel-switcher.scss

@@ -0,0 +1,208 @@
+@charset "UTF-8";
+
+.modal {
+    .channel-switcher,
+    .channel-invite {
+        &.modal-dialog {
+            margin-top: calc(50vh - 240px);
+        }
+
+        .modal-body {
+            max-height: 100%;
+            padding: 0;
+        }
+
+        .modal-content {
+            border-radius: 8px;
+        }
+
+        .modal-header {
+            min-height: 0;
+            padding: 0;
+            border: none;
+            background: transparent;
+
+            .close {
+                top: 6px;
+                right: 4px;
+                display: flex;
+                width: 4rem;
+                height: 4rem;
+                align-items: center;
+                justify-content: center;
+                border-radius: 4px;
+                font-size: 32px;
+                font-weight: 400;
+            }
+        }
+    }
+
+    .channel-switcher {
+        .suggestion-list {
+            position: relative;
+        }
+
+        .suggestion-list__content {
+            height: calc(100vh - 110px);
+            max-height: 100%;
+        }
+    }
+
+    .channel-switcher__suggestion-box {
+        position: relative;
+        height: 362px;
+        padding: 0;
+
+        .icon-magnify {
+            position: absolute;
+            top: 1.1rem;
+            left: 3.4rem;
+            display: flex;
+            width: 2rem;
+            height: 2rem;
+            align-items: center;
+            opacity: 0.48;
+        }
+
+        .form-control {
+            width: calc(100% - 48px);
+            height: 40px;
+            padding: 0 34px;
+            margin: 0 24px;
+            border-radius: 4px;
+
+            &:focus {
+                padding: 0 33px;
+                border: 2px solid v(button-bg);
+            }
+        }
+
+        .suggestion-list {
+            padding-top: 0.6rem;
+            border-top: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+            margin-top: 2.3rem;
+
+            &:first-child {
+                padding-top: 0;
+                border: none;
+                margin-top: 1rem;
+            }
+        }
+
+        .suggestion-list__content {
+            overflow: auto;
+            width: 100%;
+            height: auto;
+            padding: 0;
+            border: none;
+            box-shadow: none;
+        }
+
+        .status-wrapper {
+            overflow: visible;
+            height: 24px;
+            margin-top: 4px;
+            margin-right: 12px;
+
+            .status {
+                right: -2px;
+                bottom: -4px;
+
+                svg {
+                    left: 2px;
+                    max-width: 11px;
+                }
+            }
+        }
+
+        .Avatar {
+            width: 24px;
+            height: 24px;
+
+            &-sm {
+                margin: 0;
+            }
+        }
+
+        .suggestion-list__divider {
+            &:first-child {
+                margin: 0;
+
+                &::before {
+                    display: none;
+                }
+            }
+        }
+
+        .suggestion-list__icon {
+            height: auto;
+        }
+    }
+}
+
+body.app__body {
+    .modal {
+        .channel-switcher,
+        .channel-invite {
+            .modal-header {
+                .close {
+                    // This rule needs to be very specific to override the colour of the close button used for other modals
+                    color: rgba(var(--center-channel-color-rgb), 0.56);
+
+                    &:hover {
+                        background-color:
+                            rgba(
+                                var(--center-channel-color-rgb),
+                                0.08
+                            );
+                        color: rgba(var(--center-channel-color-rgb), 0.72);
+                    }
+
+                    &:active {
+                        background-color: rgba(var(--button-bg-rgb), 0.08);
+                        color: var(--button-bg);
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Colour overrides for the System Console
+body:not(.app__body) {
+    .channel-switcher,
+    .channel-invite {
+        .close {
+            color: rgba(var(--sys-center-channel-color-rgb), 0.56);
+
+            &:hover {
+                background-color:
+                    rgba(
+                        var(--sys-center-channel-color-rgb),
+                        0.08
+                    );
+                color: rgba(var(--sys-center-channel-color-rgb), 0.72);
+            }
+
+            &:active {
+                background-color: rgba(var(--sys-button-bg-rgb), 0.08);
+                color: var(--sys-button-bg);
+            }
+        }
+    }
+}
+
+.channel-switcher__hint {
+    font-size: 12px;
+}
+
+.channel-switcher__header,
+.channel-invite__header {
+    padding: 2.4rem 2.4rem 1.6rem;
+
+    h1 {
+        margin: 0 0 0.8rem;
+        font-size: 2rem;
+        font-weight: 600;
+    }
+}

webapp/channels/src/sass/components/_color-input.scss

@@ -0,0 +1,39 @@
+@charset 'UTF-8';
+
+.color-input {
+    position: relative;
+
+    input {
+        height: 36px;
+    }
+}
+
+.color-icon {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.32);
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.color-pad {
+    padding: 5px;
+    border-color: rgba(var(--center-channel-color-rgb), 0.32) !important;
+    background: v(center-channel-bg) !important;
+    border-radius: 0 2px 2px 0;
+    line-height: 0;
+}
+
+.color-popover {
+    position: absolute;
+    z-index: 12;
+    top: 100%;
+    right: 0;
+    padding-top: 8px;
+}
+
+/* hiding hex input from color picker */
+.chrome-picker .flexbox-fix:nth-child(2) {
+    display: none !important;
+}

webapp/channels/src/sass/components/_day-picker.scss

@@ -0,0 +1,109 @@
+.app__body {
+    .DayPicker {
+        width: 100%;
+        margin-top: 0.3rem;
+        font-size: inherit;
+
+        .DayPicker-NavBar {
+            position: relative;
+        }
+
+        .DayPicker-Caption {
+            padding: 0 0.5rem 0.7rem;
+            border-bottom: 1px solid transparent;
+            margin: 0 0.5rem 0.7rem;
+            text-align: center;
+
+            > div {
+                font-size: inherit;
+            }
+        }
+
+        .DayPicker-Day {
+            position: relative;
+            z-index: 1;
+            min-width: 32px;
+            height: 32px;
+            padding: 0;
+            border-radius: 100%;
+            color: var(--center-channel-color) !important;
+            font-weight: 600;
+
+            &::before {
+                position: absolute;
+                z-index: -1;
+                top: 0;
+                left: 50%;
+                width: 32px;
+                height: 32px;
+                margin-left: -15px;
+                border-radius: 32px;
+                content: " ";
+            }
+        }
+
+        .DayPicker-Day--disabled {
+            color: rgba(var(--center-channel-color-rgb), 0.56) !important;
+        }
+
+        .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside):not(.DayPicker-Day--selected) {
+            &:hover {
+                background-color: var(--center-channel-bg) !important;
+
+                &::before {
+                    background-color: rgba(var(--center-channel-color-rgb), 0.08) !important;
+                }
+            }
+        }
+
+        .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
+            background-color: var(--button-bg) !important;
+            color: var(--button-color) !important;
+
+            ::before {
+                background-color: var(--button-bg) !important;
+            }
+        }
+
+        .DayPicker-Day--today {
+            color: var(--button-bg) !important;
+
+            &::before {
+                background: rgba(var(--button-bg-rgb), 0.12) !important;
+            }
+        }
+
+        .DayPicker-wrapper {
+            padding: 0;
+        }
+
+        .DayPicker-NavButton {
+            top: 0;
+            right: 0.5rem;
+            margin-top: 2px;
+            outline: none;
+        }
+
+        .DayPicker-Weekday {
+            color: inherit;
+            font-weight: bold;
+        }
+
+        .DayPicker-Month {
+            width: 100%;
+            margin: 0;
+        }
+    }
+
+    .DayPickerInput-Overlay {
+        padding: 20px 24px;
+        border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+        background: rgba(var(--center-channel-bg-rgb), 1);
+        border-radius: 4px;
+        box-shadow: 0 8px 24px 0 alpha-color(black, 0.12);
+
+        & .DayPicker {
+            margin-top: 8px;
+        }
+    }
+}

webapp/channels/src/sass/components/_dnd-pickers-dropdown-menu.scss

@@ -0,0 +1,23 @@
+.dnd-pickers-dropdown-menu {
+    position: absolute;
+}
+
+.modal-overflow {
+    overflow: visible;
+}
+
+.DNDTimePickerModal__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 2rem 0;
+    text-align: right;
+
+    .btn {
+        height: 4rem;
+        padding: 0 2rem;
+        border-radius: $border-rad*2;
+        font-size: 14px;
+        font-weight: 600;
+    }
+}

webapp/channels/src/sass/components/_dropdown.scss

@@ -0,0 +1,66 @@
+@charset "utf-8";
+
+.dropdown-menu {
+    background: var(--center-channel-bg);
+    border-radius: 4px;
+
+    &.colorpicker {
+        z-index: 2500;
+        min-width: 125px;
+    }
+
+    .dropdown-item__plugin {
+        display: flex;
+        justify-content: center;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    > li {
+        > a {
+            color: inherit;
+
+            &:hover {
+                color: inherit;
+            }
+        }
+    }
+
+    .a11y--focused {
+        box-shadow: none !important;
+    }
+}
+
+.open {
+    > .dropdown-menu__content {
+        display: block;
+
+        > .dropdown-menu {
+            display: block;
+        }
+    }
+}
+
+.dropdown-menu__content {
+    display: none;
+}
+
+.dropdown-menu__icons {
+    li {
+        .fa {
+            width: 25px;
+            margin-left: -5px;
+            text-align: center;
+        }
+    }
+}
+
+@media screen and (min-width: 769px) {
+    // global header style adjustments
+    .dropdown-menu {
+        top: calc(100% + 4px);
+        min-width: 245px;
+    }
+}

webapp/channels/src/sass/components/_edit-post-time-limit-button.scss

@@ -0,0 +1,23 @@
+.edit-post-time-limit-button {
+    height: 26px;
+    padding: 0 8px;
+    border-color: #5b6672;
+    background: transparent;
+    border-radius: $border-rad*2;
+    color: #5b6672;
+    transition: all 0.15s ease;
+
+    i {
+        margin-right: 4px;
+    }
+
+    span {
+        display: inline !important;
+    }
+
+    &:hover {
+        border-color: $primary-color;
+        background: $primary-color;
+        color: $white;
+    }
+}

webapp/channels/src/sass/components/_edit-post-time-limit-modal.scss

@@ -0,0 +1,14 @@
+.edit-post-time-limit-modal {
+    label {
+        margin-right: 7px;
+        margin-left: 7px;
+        font-weight: normal;
+    }
+
+    .edit-post-time-limit-modal__error {
+        display: inline-block;
+        width: 65%;
+        color: red;
+        text-align: left;
+    }
+}

webapp/channels/src/sass/components/_emoji-picker-tabs.scss

@@ -0,0 +1,65 @@
+@charset "UTF-8";
+
+.emoji-picker {
+    pointer-events: auto;
+
+    li.custom-emoji-tab:not(.active) {
+        a {
+            width: max-content;
+            padding-top: 7px !important;
+
+            svg,
+            div {
+                color: rgba(var(--center-channel-color-rgb), 0.56);
+                fill: rgba(var(--center-channel-color-rgb), 0.56);
+            }
+
+            &:hover {
+                svg,
+                div {
+                    color: rgba(var(--center-channel-color-rgb), 0.72);
+                    fill: rgba(var(--center-channel-color-rgb), 0.72);
+                }
+            }
+        }
+    }
+
+    li.custom-emoji-tab.active {
+        a {
+            width: max-content;
+            padding-top: 7px !important;
+
+            svg,
+            div {
+                color: var(--button-bg);
+                fill: var(--mention-bg-rgb);
+            }
+
+            &:hover {
+                svg,
+                div {
+                    color: var(--button-bg);
+                    fill: var(--mention-bg-rgb);
+                }
+            }
+        }
+    }
+
+    .nav.nav-tabs {
+        width: fit-content;
+        width: -moz-fit-content;
+    }
+}
+
+.custom-emoji-tab__icon__text {
+    display: flex;
+    flex-direction: row;
+}
+
+.custom-emoji-tab {
+    display: flex;
+}
+
+.custom-emoji-tab__icon {
+    margin-right: 7px;
+}

webapp/channels/src/sass/components/_emoticons.scss

@@ -0,0 +1,622 @@
+@charset "UTF-8";
+
+.reacticon {
+    position: relative;
+    top: 2px;
+    display: inline-block;
+    fill: inherit;
+    opacity: 0.7;
+    vertical-align: middle;
+    visibility: hidden;
+}
+
+.emoticon {
+    display: inline-flex;
+    overflow: hidden;
+    width: 21px;
+    min-width: 21px;
+    height: 21px;
+    min-height: 21px;
+    align-items: end;
+    justify-content: space-between;
+    border: none !important;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+
+    &--unicode {
+        font-size: 21px;
+
+        .os--windows & {
+            font-size: 16px;
+            line-height: 1.3;
+        }
+    }
+
+    &:not(.emoticon--unicode) {
+        color: transparent;
+
+        &::selection {
+            background-color: transparent;
+            color: transparent;
+        }
+    }
+
+    &--post-menu {
+        @extend .emoticon;
+
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+        min-height: 16px;
+    }
+}
+
+.emoticon-suggestion {
+    @include clearfix;
+
+    width: 100%;
+    height: 30px;
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 30px;
+
+    > div {
+        &:first-child {
+            width: 30px;
+            text-align: center;
+        }
+    }
+}
+
+.emoticon-suggestion__image {
+    max-width: 20px;
+    max-height: 20px;
+    padding: 0;
+    margin-top: -2px;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.emoji-picker {
+    position: absolute;
+    z-index: 1100;
+    display: flex;
+    width: 350px;
+    flex-direction: column;
+    border: 1px solid;
+    margin-right: 3px;
+    background: var(--center-channel-bg);
+    border-radius: $border-rad;
+    border-radius: 4px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    user-select: none;
+
+    @include clearfix;
+
+    .emoji-picker__header {
+        background: var(--sidebar-header-bg);
+    }
+
+    &.emoji-picker--single {
+        .emoji-picker__header {
+            position: relative;
+        }
+    }
+
+    .browser--ie & {
+        width: 325px;
+    }
+
+    .app__content & {
+        margin-right: 0;
+    }
+
+    &.bottom {
+        margin-top: 10px;
+    }
+
+    .nav-tabs {
+        display: flex;
+        flex: 0 0 34px;
+        justify-content: flex-end;
+        margin-bottom: 0;
+
+        li {
+            height: 34px;
+            flex: 1;
+            font-size: 12px;
+            font-weight: 600;
+
+            &:first-child {
+                margin-left: 7px;
+            }
+
+            a {
+                height: 40px;
+                padding: 7px 12px;
+                border: none !important;
+                border-bottom: 2px solid transparent !important;
+                margin-right: 5px;
+                margin-left: 5px;
+                background: transparent;
+                outline: none;
+
+                &:hover,
+                &:active,
+                &:focus {
+                    background: transparent;
+                }
+            }
+
+            &.active {
+                a {
+                    height: 34px;
+                    padding-top: 9px;
+                    margin-right: 5px;
+                    margin-left: 5px;
+                    background: transparent;
+                    border-radius: 0;
+                    opacity: 1;
+
+                    &:hover,
+                    &:active,
+                    &:focus {
+                        background: transparent;
+                    }
+                }
+            }
+        }
+
+        svg {
+            position: relative;
+            top: 2px;
+        }
+    }
+
+    .tab-content {
+        border-top: 1px solid rgba(61, 60, 64, 0.2);
+    }
+}
+
+.emoji-picker__categories {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: space-between;
+    padding: 0 12px;
+    margin: 8px 0 8px 0;
+
+    .emoji-picker__category {
+        display: inline-flex;
+        width: 28px;
+        height: 28px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        color: rgba(var(--center-channel-color-rgb), 0.48);
+        text-decoration: none;
+
+        &:hover {
+            background-color: rgba(var(--center-channel-color-rgb), 0.04);
+            color: rgba(var(--center-channel-color-rgb), 0.72);
+        }
+
+        &:active {
+            color: var(--button-bg);
+            color: v(center-channel-color);
+        }
+
+        &--selected {
+            background: rgba(var(--button-bg-rgb), 0.08);
+            border-radius: 4px;
+            color: var(--button-bg);
+            fill: var(--button-bg);
+        }
+
+        &.disable {
+            pointer-events: none;
+        }
+
+        i {
+            font-size: 18px;
+        }
+    }
+}
+
+.emoji-picker__header,
+.modal-body .emoji-picker .emoji-picker__header {
+    position: absolute;
+    top: 0;
+    display: none; // only visible < 480px width screen
+    width: 100%;
+    padding: 13px 10px 13px 15px;
+    border: 1px solid $light-gray;
+    background: $primary-color;
+    color: var(--sidebar-header-text-color);
+
+    .emoji-picker__header-title {
+        margin-top: 2px;
+        font-size: 17px;
+    }
+
+    .emoji-picker__header-close-button {
+        width: 30px;
+        height: 30px;
+        background: transparent;
+        color: var(--sidebar-header-text-color);
+        opacity: 1;
+
+        &:hover {
+            background: rgba($black, 0.1);
+        }
+    }
+}
+
+.modal-body .emoji-picker .emoji-picker__header {
+    .emoji-picker__header-title {
+        margin-top: 0;
+    }
+}
+
+.emoji-picker__search-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-color: transparent !important;
+    margin: 12px 12px 0 12px;
+
+    .skin-tones-animation {
+        &-enter {
+            transform: translateX(100%);
+        }
+
+        &-enter-active {
+            transform: translateX(0%);
+            transition: transform 200ms ease-in-out;
+        }
+
+        &-exit {
+            position: absolute;
+            width: 100%;
+            transform: translateX(0%);
+        }
+
+        &-exit-active {
+            transform: translateX(90%);
+            transition: transform 200ms ease-in-out;
+        }
+    }
+
+    .skin-tones {
+        z-index: 10;
+        display: flex;
+        height: 100%;
+        align-items: center;
+        background: var(--center-channel-bg);
+
+        &--active {
+            position: absolute;
+            width: 100%;
+            justify-content: space-around;
+
+            .skin-tones__close,
+            .skin-tones__icons {
+                position: relative;
+                display: inline-flex;
+                justify-content: center;
+                opacity: 1;
+            }
+        }
+
+        .skin-tones__icon {
+            display: flex;
+            width: 32px;
+            height: 32px;
+            align-items: center;
+            justify-content: center;
+            margin-right: 4px;
+            background: var(--button-bg-rgb);
+            opacity: 1;
+
+            &:hover {
+                background-color: rgba(var(--center-channel-color-rgb), 0.08);
+                border-radius: 4px;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+
+        .skin-tones__expand-icon {
+            margin: 0;
+        }
+
+        .emoji-picker__item {
+            &:last-child {
+                margin: 0;
+            }
+        }
+    }
+
+    .skin-tones__content {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+    }
+
+    .emoji-picker__text-container {
+        position: relative;
+        z-index: 5;
+        width: 284px;
+        height: 32px;
+        border: 1px solid rgba(var(--center-channel-color-rgb), 0.24);
+        margin-right: 8px;
+        border-radius: 4px;
+
+        &:focus-within {
+            border: 2px solid v(button-bg);
+
+            & .emoji-picker__search-icon {
+                padding-top: 7px;
+                padding-left: 8px;
+            }
+        }
+    }
+
+    .skin-tones__close {
+        display: flex;
+        align-items: center;
+        transition: opacity 0.35s ease;
+    }
+
+    .skin-tones__icons {
+        opacity: 0;
+        transition: opacity 0.35s ease;
+    }
+
+    .skin-tones__close-text {
+        width: 54px;
+        margin: 0 15px 0 15px;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 14px;
+    }
+
+    .skin-tones__close-icon {
+        display: flex;
+        width: 28px;
+        height: 28px;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        background: none;
+        border-radius: 4px;
+        color: rgba(v(center-channel-color-rgb), 0.56);
+
+        &:hover {
+            background: rgba(v(center-channel-color-rgb), 0.08);
+            color: rgba(v(center-channel-color-rgb), 0.72);
+        }
+
+        &:active,
+        &--active,
+        &--active:hover {
+            background: rgba(var(--button-bg-rgb), 0.08);
+            color: v(button-bg);
+            fill: v(button-bg);
+        }
+    }
+
+    .color-selector {
+        z-index: 11;
+        display: flex;
+        width: 32px;
+        height: 32px;
+        align-items: center;
+        justify-content: center;
+        margin-left: 8px;
+        border-radius: 4px;
+        transition: all 0.35s ease;
+
+        &:hover {
+            background-color: rgba(var(--center-channel-color-rgb), 0.08);
+        }
+
+        .emoji-picker__item {
+            margin: 0;
+
+            &:hover {
+                background: transparent;
+            }
+        }
+    }
+
+    .emoji-picker__search-icon {
+        position: absolute;
+        padding-top: 8px;
+        padding-left: 9px;
+        font-size: 14px;
+    }
+
+    .emoji-picker__search {
+        width: 100%;
+        height: 26px;
+        padding: 4px 0 0 31px;
+        border-width: 0;
+        background: var(--center-channel-bg);
+        border-radius: inherit;
+        font-size: 13px;
+
+        &:focus {
+            padding: 2px 0 0 30px;
+            outline: none;
+        }
+    }
+}
+
+.emoji-picker__items {
+    position: relative;
+    width: 100%;
+    height: 270px;
+    padding: 4px 0 4px 12px;
+    border-top-width: 1px;
+    border-top-style: solid;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .emoji-picker__container {
+        position: relative;
+        min-width: 325px;
+        min-height: 100%;
+    }
+
+    .emoji-picker__category-header {
+        position: relative;
+        padding-top: 3px;
+        margin-top: 6px;
+        color: rgba(var(--center-channel-color-rgb), 0.48);
+        font-size: 12px;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    .emoji-picker__preview_sprite {
+        display: inline-block;
+        height: 45px;
+        padding: 3px;
+        margin: 3px;
+        vertical-align: top;
+    }
+}
+
+.emoji-picker__item:nth-of-type(9n) {
+    margin-right: 0;
+}
+
+.emoji-picker__row {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.emoji-picker__item {
+    position: relative;
+    display: inline-flex;
+    overflow: hidden;
+    width: 36px;
+    height: 36px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    cursor: pointer;
+    vertical-align: middle;
+
+    &.selected,
+    &:hover {
+        background-color: rgba(var(--center-channel-color-rgb), 0.16);
+    }
+
+    &:active {
+        background-color: rgba(var(--center-channel-color-rgb), 0.32);
+    }
+
+    > div {
+        text-align: center;
+    }
+
+    img {
+        position: relative;
+
+        &.emoji-category--custom {
+            top: auto;
+            left: auto;
+            width: auto;
+            max-width: 22px;
+            height: auto;
+            max-height: 22px;
+            transform: scale(1);
+        }
+    }
+}
+
+.emoji-tooltip {
+    z-index: 99999;
+}
+
+$emoji-picker-footer-margin: 12px;
+$emoji-half-height: 33px;
+
+.emoji-picker__footer {
+    $border-width: 1px;
+
+    display: flex;
+    min-height: $border-width + $emoji-half-height + $emoji-picker-footer-margin * 2; // prevents tiny layout shift when emoji replaces placeholder
+    align-items: center;
+    justify-content: space-between;
+    border-top: solid $border-width rgba(61, 60, 64, 0.2);
+}
+
+.emoji-picker__custom {
+    flex-shrink: 0;
+    margin: $emoji-picker-footer-margin;
+    text-decoration: none;
+
+    a,
+    a:hover {
+        background: rgba(var(--button-bg-rgb), 0.08);
+        border-radius: 4px;
+        color: var(--button-bg) !important; // it gets overriden by link color
+        fill: var(--button-bg);
+        font-size: 12px;
+        font-weight: 600;
+        text-decoration: none;
+    }
+
+    a:hover {
+        background-color: rgba(var(--button-bg-rgb), 0.12);
+    }
+}
+
+.emoji-picker__preview {
+    overflow: hidden;
+    margin: $emoji-picker-footer-margin;
+    background: var(--center-channel-bg);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.emoji-picker__preview-placeholder {
+        span {
+            font-weight: bold;
+        }
+    }
+
+    .emoji-picker__preview-image-label-box {
+        display: inline;
+
+        .emoji-picker__preview-name {
+            font-weight: bold;
+            user-select: text;
+        }
+    }
+
+    .emoji-picker__preview-image-box {
+        margin-right: 12px;
+        vertical-align: middle;
+
+        &,
+        .sprite-preview {
+            display: inline-block;
+            width: $emoji-half-height;
+            height: $emoji-half-height;
+        }
+    }
+
+    .emoji-picker__preview-image {
+        max-width: $emoji-half-height;
+        max-height: $emoji-half-height;
+    }
+}

webapp/channels/src/sass/components/_files.scss

@@ -0,0 +1,787 @@
+@charset 'UTF-8';
+
+.file-preview__container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 8rem;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding-left: 8px;
+    margin: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+
+.file-preview {
+    @include clearfix;
+
+    position: relative;
+    display: inline-block;
+    width: 120px;
+    height: 100px;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    border: 1px solid $light-gray;
+    margin-right: 10px;
+
+    .spinner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 32px;
+        height: 32px;
+        margin-top: -16px;
+        margin-left: -16px;
+    }
+}
+
+.app__body {
+    .file-preview__remove {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        display: flex;
+        width: 2.8rem;
+        height: 2.8rem;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        color: rgba(v(center-channel-color-rgb), 0.56);
+        font-size: 1.4rem;
+        text-align: center;
+        text-decoration: none;
+
+        &:focus {
+            color: rgba(v(center-channel-color-rgb), 0.56);
+        }
+
+        &:hover {
+            background: rgba(v(center-channel-color-rgb), 0.08);
+            color: rgba(v(center-channel-color-rgb), 0.72);
+        }
+
+        &:active {
+            background: rgba(var(--button-bg-rgb), 0.08);
+            color: v(button-bg);
+        }
+    }
+}
+
+.image-comment {
+    width: 300px;
+    height: 300px;
+    background-position: left top;
+    background-repeat: no-repeat;
+}
+
+.file-icon {
+    width: 100%;
+    height: 100%;
+
+    &.text {
+        @include file-icon('../images/icons/text.svg');
+    }
+
+    &.audio {
+        @include file-icon('../images/icons/audio.svg');
+    }
+
+    &.video {
+        @include file-icon('../images/icons/video.svg');
+    }
+
+    &.ppt {
+        @include file-icon('../images/icons/ppt.svg');
+    }
+
+    &.generic,
+    &.other {
+        @include file-icon('../images/icons/generic.svg');
+    }
+
+    &.code {
+        @include file-icon('../images/icons/code.svg');
+    }
+
+    &.excel {
+        @include file-icon('../images/icons/excel.svg');
+    }
+
+    &.word {
+        @include file-icon('../images/icons/word.svg');
+    }
+
+    &.pdf {
+        @include file-icon('../images/icons/pdf.svg');
+    }
+
+    &.patch {
+        @include file-icon('../images/icons/patch.svg');
+    }
+
+    &.image {
+        @include file-icon('../images/icons/image.svg');
+    }
+}
+
+.pdf-preview-spacer {
+    height: 5px;
+}
+
+.pdf-max-pages {
+    position: relative;
+    bottom: 8px;
+    left: 0;
+    display: block;
+    width: 100%;
+}
+
+.pdf-download-btn-spacer {
+    margin-right: 4px;
+}
+
+.file-view--single {
+    position: relative;
+    margin: 5px 0;
+
+    &:not(.image-permalink) {
+        margin: 5px 0 0;
+    }
+
+    .file__image {
+        @include pie-clearfix;
+
+        .image-header {
+            display: flex;
+            align-items: baseline;
+        }
+
+        .image-name {
+            display: inline-block;
+            overflow: hidden;
+            margin: -4px 0 0 0;
+            color: rgba(v(center-channel-color-rgb), 0.72);
+            cursor: pointer;
+            font-size: 12px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            div {
+                display: inline;
+            }
+        }
+
+        .image-container {
+            @include pie-clearfix;
+
+            position: relative;
+            width: 100%;
+            max-width: 1024px;
+            height: 100%;
+        }
+
+        .image-preload {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .fa {
+                font-size: 20px;
+                opacity: 0.6;
+            }
+        }
+
+        $max-image-height: 350px;
+
+        .image-loaded {
+            bottom: 0;
+            min-width: 40px;
+            max-width: 100%;
+            min-height: 40px;
+            max-height: $max-image-height;
+            border-radius: 4px;
+            transition: all 0.1s linear;
+
+            .file-preview__button {
+                display: block;
+
+                &,
+                .small-image-utility-buttons-wrapper {
+                    max-width: 100%;
+                    max-height: $max-image-height;
+                }
+            }
+
+            .image-permalink {
+                max-width: 320px;
+                max-height: 180px;
+            }
+
+            img {
+                position: relative;
+                z-index: 2;
+                overflow: hidden;
+                max-height: $max-image-height;
+                align-self: center;
+                border-radius: 4px;
+                cursor: pointer;
+                transition: all 0.1s linear;
+
+                &.image-permalink {
+                    max-width: 100%;
+                    height: auto;
+                }
+
+                &.compact-display {
+                    max-height: 175px;
+                }
+
+                &:hover {
+                    box-shadow: 0 2px 5px 0 rgba($black, 0.1), 0 2px 10px 0 rgba($black, 0.1);
+                }
+
+                &.min-preview {
+                    max-width: 100%;
+                    max-height: 50px;
+                }
+
+                &.min-preview--portrait {
+                    max-width: 50px;
+                    max-height: inherit;
+                }
+
+                &.small-image--inside-container {
+                    width: unset;
+                    max-height: inherit;
+                    border-width: 0;
+                    margin: 0;
+                    border-radius: 0;
+                    box-shadow: none;
+                }
+            }
+
+            &.svg {
+                display: block;
+                width: 100%;
+                height: inherit;
+
+                img {
+                    height: inherit;
+
+                    &:hover {
+                        box-shadow: 0 2px 5px 0 rgba($black, 0.1), 0 2px 10px 0 rgba($black, 0.1);
+                    }
+                }
+            }
+
+            >.file-preview__button {
+                min-width: 40px;
+                min-height: 40px;
+                text-align: left;
+            }
+        }
+
+        .image-fade-in {
+            opacity: 1;
+        }
+    }
+
+    .file-details__name {
+        display: block;
+        font-size: 14px;
+        font-weight: bold;
+    }
+
+    .file-details__name:hover {
+        cursor: pointer;
+        text-decoration: underline;
+    }
+}
+
+.post-image__archived-tooltip-title {
+    padding-bottom: 1px;
+    font-weight: 600;
+}
+
+.post-image__archived-tooltip-description {
+    opacity: 0.56;
+}
+
+.post-image__columns {
+    position: relative;
+    display: flex;
+    flex-flow: wrap;
+}
+
+.post-image__column {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    width: 320px;
+    max-width: 100%;
+    height: 6.4rem;
+    align-items: center;
+    border: 1px solid rgba(v(center-channel-color-rgb), 0.16);
+    margin: 4px 12px 4px 0;
+    background: v(center-channel-bg);
+    border-radius: 4px;
+    color: v(center-channel-color);
+    cursor: pointer;
+    transition: box-shadow 0.15s ease;
+
+    &--archived {
+        cursor: default;
+
+        svg {
+            margin: 0 4px;
+        }
+    }
+
+    &:hover,
+    &:focus-within,
+    &.keep-open {
+        overflow: visible;
+        box-shadow: 0 2px 3px 0 rgba($black, 0.1), 0 2px 3px 0 rgba($black, 0.1);
+
+        .file-dropdown-icon {
+            display: flex;
+        }
+
+        > .post-image__details {
+            overflow: visible;
+        }
+    }
+
+    &:hover {
+        box-shadow: $elevation-1;
+
+        .post-image__download {
+            opacity: 1;
+        }
+    }
+
+    &:focus-within {
+        .post-image__download {
+            opacity: 1;
+        }
+    }
+
+    &--placeholder {
+        visibility: hidden;
+    }
+
+    &.file-preview {
+        flex-shrink: 0;
+        flex-wrap: nowrap;
+        margin: 0 10px 0 0;
+        cursor: auto;
+
+        .post-image__details {
+            padding-right: 3.2rem;
+
+            .post-image__name {
+                white-space: normal;
+            }
+        }
+    }
+}
+
+.post-image__load {
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+}
+
+.post-image {
+    position: relative;
+    overflow: hidden;
+    width: 4rem;
+    height: 4rem;
+    background-color: $white;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: 4px;
+    text-align: center;
+
+    &.small {
+        background-position: center;
+    }
+
+    &.normal {
+        background-position: top left;
+    }
+
+    .spinner {
+        .file__loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin-top: -16px;
+            margin-left: -16px;
+        }
+    }
+
+    .file__loaded {
+        max-width: initial;
+
+        &.landscape,
+        &.quadrat {
+            height: 100px;
+        }
+
+        &.portrait {
+            width: 120px;
+        }
+    }
+}
+
+.post-image__thumbnail {
+    @include cursor(zoom-in);
+
+    z-index: 1;
+    display: flex;
+    width: 6.3rem;
+    height: 100%;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+}
+
+.file-dropdown-icon {
+    display: none;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    margin-left: 8px;
+    background-color: var(--center-channel-bg);
+    border-radius: 4px;
+    color: rgba(var(--center-channel-color-rgb), 0.72);
+    cursor: pointer;
+    fill: rgba(var(--center-channel-color-rgb), 0.72);
+    text-decoration: none;
+    transition: opacity 0.15s ease;
+
+    svg {
+        display: flex;
+    }
+
+    &:hover {
+        display: flex;
+        background-color: rgba(var(--center-channel-color-rgb), 0.08);
+        color: rgba(var(--center-channel-color-rgb), 0.72);
+    }
+
+    &:focus {
+        display: flex;
+    }
+}
+
+.post-image__details {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    height: 100%;
+    flex: 1;
+    align-items: center;
+    font-size: 12px;
+    text-align: left;
+
+    .post-image__archived-name {
+        align-items: center;
+        justify-content: start;
+    }
+
+    .post-image__archived-filename {
+        overflow: hidden;
+        max-width: 165px;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        font-weight: 600;
+        outline: none;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        word-break: break-word;
+    }
+
+    .post-image__archived-label {
+        padding-left: 7px;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        font-size: 10px;
+        font-weight: normal;
+    }
+
+    .post-image__detail_wrapper {
+        display: flex;
+        flex: 1;
+        padding: 0;
+
+        .post--compact & {
+            padding-left: 8px;
+        }
+
+        .post-image__detail {
+            width: 100%;
+            height: 100%;
+            line-height: normal;
+
+            .post-image__name {
+                display: block;
+                overflow: hidden;
+                max-width: 151px;
+                margin-bottom: 3px;
+                font-weight: 600;
+                outline: none;
+                text-decoration: none;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                word-break: break-word;
+
+                &--archived {
+                    color: rgba(var(--center-channel-color-rgb), 0.56);
+                }
+
+                a {
+                    border-radius: 100px;
+                }
+            }
+
+            .post-image__archived {
+                display: inline-block;
+                overflow: hidden;
+                max-width: 134px;
+                color: rgba(var(--center-channel-color-rgb), 0.56);
+                float: left;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .post-image__type {
+                display: inline-block;
+                overflow: hidden;
+                max-width: 134px;
+                float: left;
+                opacity: 0.6;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .post-image__size {
+                margin-left: 4px;
+                opacity: 0.6;
+            }
+        }
+    }
+
+    .post-image__download {
+        top: 0;
+        right: 0;
+        display: flex;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        padding: 0 1.6rem;
+        line-height: 0;
+        opacity: 1;
+        text-align: center;
+        transition: opacity 0.15s ease;
+
+        a {
+            display: flex;
+            width: 3.2rem;
+            height: 3.2rem;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            color: rgba(v(center-channel-color-rgb), 0.56);
+            font-size: 1.6rem;
+            text-decoration: none;
+
+            &:focus {
+                color: rgba(v(center-channel-color-rgb), 0.56);
+            }
+
+            &:hover {
+                background: rgba(v(center-channel-color-rgb), 0.08);
+                color: rgba(v(center-channel-color-rgb), 0.72);
+            }
+
+            &:active {
+                background: rgba(var(--button-bg-rgb), 0.08);
+                color: v(button-bg);
+            }
+        }
+
+        span {
+            display: inline-block;
+        }
+
+        svg {
+            display: inline-block;
+            width: 30px;
+            height: 30px;
+            border: 1px solid;
+            border-radius: 50%;
+            opacity: 0.7;
+            transition: all 0.1s linear;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+
+    div.MenuWrapper + .post-image__download {
+        padding-left: 8px;
+    }
+
+    .post-image__progressBar {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 7px;
+        margin-bottom: 0;
+        border-radius: 0;
+    }
+
+    .progress-bar {
+        background-color: rgb(40, 90, 185);
+    }
+
+    .post-image__uploadingTxt {
+        color: rgba(v(center-channel-color-rgb), 0.56);
+    }
+}
+
+.file-details__container {
+    display: flex;
+    background: $white;
+
+    .file-details {
+        width: 320px;
+        height: 270px;
+        padding: 14px;
+        text-align: left;
+        vertical-align: top;
+
+        .file-details__name {
+            margin: 5px 0;
+            color: alpha-color($black, 0.9);
+            font-size: 16px;
+            word-break: break-word;
+        }
+
+        .file-details__info {
+            color: alpha-color($black, 0.5);
+        }
+    }
+
+    .file-details__preview {
+        width: 320px;
+        height: 270px;
+        border-right: 1px solid $light-gray;
+        vertical-align: center;
+
+        img {
+            width: 80px;
+        }
+
+        &--archived {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        // helper to center the image icon in the preview window
+        .file-details__preview-helper {
+            display: inline-block;
+            height: 100%;
+            vertical-align: middle;
+        }
+    }
+}
+
+.file-playback__controls {
+    position: absolute;
+    z-index: 2;
+    right: 5px;
+    bottom: 0;
+    cursor: pointer;
+    font-size: 22px;
+    transition: opacity 0.6s;
+
+    &.stop {
+        opacity: 0;
+    }
+}
+
+.view-image__loading {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 140px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 28px;
+    background: $black;
+
+    .fa {
+        color: $white;
+        font-size: 20px;
+        opacity: 0.6;
+    }
+}
+
+.image-loading__container {
+    position: relative;
+    overflow: hidden;
+    max-height: inherit;
+}
+
+.file-preview__button {
+    display: inline-block;
+    max-height: inherit;
+    vertical-align: top;
+}
+
+.small-image__container {
+    display: flex;
+    min-width: 48px;
+    max-width: calc(100% - 5px);
+    min-height: 48px;
+    max-height: inherit;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.32);
+    margin: 5px 2px;
+    background: var(--center-channel-bg);
+    border-radius: 4px;
+
+    &:hover {
+        z-index: 2;
+        box-shadow: 0 2px 5px 0 rgba($black, 0.1), 0 2px 5px 0 rgba($black, 0.1);
+        transition: all 0.1s linear;
+    }
+
+    &:hover .image-preview-utility-buttons-container {
+        display: inline-block;
+    }
+}
+
+.small-image__container--min-width {
+    width: 48px;
+}

webapp/channels/src/sass/components/_forms.scss

@@ -0,0 +1,199 @@
+@charset 'UTF-8';
+
+.radio,
+.checkbox {
+    &.margin-bottom--none {
+        margin-bottom: 0;
+    }
+
+    &.no-padding {
+        padding: 0;
+
+        label {
+            padding: 0;
+        }
+    }
+}
+
+.form-control {
+    ::placeholder {
+        color: inherit;
+    }
+
+    &.form-sm {
+        height: 32px;
+        font-size: 13px;
+    }
+}
+
+.form-legend {
+    border: none;
+    margin: 0 0 0.8rem;
+    color: inherit;
+    font-size: inherit;
+    font-weight: 600;
+}
+
+.input__help {
+    margin: 10px 0 0 0;
+    color: inherit;
+    opacity: 0.8;
+    word-break: break-word;
+
+    &.dark {
+        opacity: 1;
+    }
+
+    &.error {
+        color: darken($red, 20%);
+    }
+}
+
+.form-horizontal {
+    .modal-intro {
+        margin: -10px 0 30px;
+    }
+
+    .form__label {
+        padding-right: 3px;
+        font-size: 1.1em;
+        font-weight: 600;
+        text-align: left;
+
+        &.light {
+            padding-top: 2px;
+            font-size: 1.05em;
+            font-style: italic;
+            font-weight: normal;
+            opacity: 0.6;
+        }
+    }
+
+    .form-control {
+        font-weight: normal;
+    }
+
+    .form-group {
+        margin-bottom: 25px;
+
+        &.less {
+            margin-bottom: 10px;
+        }
+    }
+}
+
+.help-block {
+    margin: 10px 0 0;
+    color: $dark-gray;
+    font-size: 0.95em;
+}
+
+.form-group {
+    max-width: 100%;
+
+    &.form-group--small {
+        margin-bottom: 10px;
+    }
+}
+
+.has-error {
+    .help-block,
+    .radio,
+    .checkbox,
+    .radio-inline,
+    .checkbox-inline {
+        color: $red;
+    }
+
+    .form__label {
+        &.control-label {
+            color: inherit !important;
+        }
+    }
+
+    &.radio,
+    &.checkbox,
+    &.radio-inline,
+    &.checkbox-inline {
+        label {
+            color: $red;
+        }
+    }
+}
+
+.multi-select__radio {
+    label {
+        display: flex;
+        align-items: center;
+    }
+
+    input[type='radio'] {
+        width: 13px;
+        margin-top: 0;
+    }
+
+    .flex-parent {
+        display: flex;
+        align-items: center;
+    }
+
+    .icon {
+        display: flex;
+        width: 14px;
+        height: 21px;
+        align-items: center;
+        justify-content: center;
+        padding-right: 1px;
+        margin-right: 6px;
+
+        & + span {
+            margin-right: 4px;
+            font-weight: 600;
+        }
+    }
+
+    span {
+        &:last-child {
+            opacity: 0.8;
+        }
+    }
+}
+
+.app__body {
+    .form-control {
+        border-color: rgba(var(--center-channel-color-rgb), 0.16);
+        background: v(center-channel-bg);
+        color: v(center-channel-color);
+
+        &:focus {
+            border-color: rgba(var(--center-channel-color-rgb), 0.4);
+        }
+
+        &.inline {
+            display: inline-block;
+            width: auto;
+        }
+
+        &::-moz-placeholder,
+        &:-moz-placeholder {
+            color: inherit !important;
+            opacity: 0.6;
+        }
+    }
+}
+
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+    background-color: #f9f9f9;
+}
+
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+    outline: none;
+}
+
+.notification-sound-dropdown {
+    padding-top: 5px;
+}

webapp/channels/src/sass/components/_groups.scss

@@ -0,0 +1,805 @@
+#ldap_groups {
+    overflow: visible;
+}
+
+.groups-list {
+    padding: 2rem 2rem 2rem 2rem;
+    transition: all 0.4s ease-in-out 0s;
+
+    &.groups-list-less-padding {
+        padding: 0;
+    }
+
+    .groups-list--global-actions {
+        position: relative;
+        display: flex;
+        padding: 8px 20px;
+        background: $white;
+
+        .group-list-search {
+            position: relative;
+            display: flex;
+            max-width: 280px;
+            height: 30px;
+            flex-grow: 1;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            margin-top: 2px;
+            border-radius: 15px;
+            stroke: $dark-gray;
+
+            input {
+                width: 100%;
+                border: 0;
+                margin-right: 15px;
+                margin-left: 25px;
+                font-size: 0.95em;
+            }
+
+            input:focus {
+                outline: none;
+            }
+
+            .group-filter-action {
+                padding: 8px 10px 0 0;
+
+                &.hidden {
+                    visibility: hidden;
+                }
+            }
+        }
+
+        .group-list-link-unlink {
+            display: flex;
+            flex-grow: 1;
+            justify-content: flex-end;
+        }
+
+        .group-search-filters {
+            position: absolute;
+            top: 40px;
+            width: 303px;
+            padding: 20px;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            background-color: white;
+
+            .search-groups-btn {
+                right: 20px;
+                bottom: 20px;
+                float: right;
+            }
+
+            .cancel-filters {
+                float: right;
+            }
+
+            .filter-row {
+                height: 30px;
+                vertical-align: middle;
+            }
+
+            .filter-check {
+                display: inline-block;
+                width: 18px;
+                height: 18px;
+                border: 2px solid $dark-gray;
+                margin-right: 7px;
+                border-radius: 3px;
+                vertical-align: middle;
+
+                &.checked {
+                    border: 0;
+
+                    svg {
+                        background: $white;
+                        fill: $primary-color;
+                    }
+                }
+            }
+        }
+    }
+
+    .groups-list--header {
+        display: flex;
+        flex-direction: row;
+        padding: 0.5em 0;
+        border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+        font-size: 1.1em;
+        font-weight: bold;
+
+        .group-name {
+            margin-left: 16px;
+        }
+
+        .group-description {
+            display: block;
+            width: 150px;
+            color: $black;
+            opacity: 1;
+
+            &.adjusted {
+                width: 100px;
+            }
+        }
+
+        .group-actions {
+            width: 130px;
+        }
+    }
+
+    .groups-list--body {
+        background: $bg--gray;
+        cursor: pointer;
+
+        .groups-list-loading {
+            padding: 40px;
+            text-align: center;
+        }
+
+        .groups-list-empty {
+            margin-top: 1rem;
+            background: alpha-color($white, 0.5);
+            color: $gray;
+            font-size: 1.6rem;
+            text-align: center;
+
+            span {
+                display: inline-block;
+                width: 100%;
+                height: 100%;
+                padding-top: 20px;
+                padding-bottom: 20px;
+            }
+        }
+    }
+
+    .groups-list--footer {
+        display: flex;
+        height: auto;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 5px;
+        border-top: solid 1px rgba(0, 0, 0, 0.1);
+        background: $white;
+
+        .btn-link {
+            color: $dark-gray;
+
+            &.disabled {
+                opacity: 0.5;
+            }
+        }
+
+        .counter {
+            margin-bottom: 2px;
+            color: $dark-gray;
+            font-size: 1.1em;
+        }
+    }
+
+    .group-check {
+        display: flex;
+        min-width: 18px;
+        min-height: 18px;
+        align-items: center;
+        justify-content: space-around;
+        border: 2px solid $dark-gray;
+        margin: 5px 5px 4px 14px;
+        border-radius: 3px;
+
+        &.checked {
+            border: 0;
+
+            svg {
+                background: $white;
+                fill: $primary-color;
+            }
+        }
+    }
+
+    .group-name {
+        display: flex;
+        flex: 1.8;
+        flex-grow: 1;
+        align-items: center;
+    }
+
+    .group-content {
+        display: flex;
+        flex: 1;
+        padding-left: 20px;
+    }
+
+    .group-description {
+        display: flex;
+        overflow: hidden;
+        width: 150px;
+        height: 100%;
+        align-items: center;
+        opacity: 0.65;
+
+        &.adjusted {
+            width: 120px;
+        }
+
+        &.roles {
+            overflow: visible;
+        }
+
+        i {
+            margin-right: 5px;
+        }
+
+        >a {
+            padding: 3px 5px;
+            color: $black;
+            text-decoration: none;
+
+            &:hover {
+                background-color: $light-gray;
+                border-radius: 3px;
+            }
+
+            &.warning {
+                color: $red;
+            }
+        }
+    }
+
+    .group-description-link {
+        >a {
+            &:hover {
+                background-color: transparent;
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .group-actions {
+        width: 130px;
+        padding-right: 20px;
+        text-align: right;
+    }
+
+    .group {
+        &.checked {
+            background-color: lighten($primary-color, 40%);
+
+            .group-description {
+                opacity: 1;
+            }
+        }
+
+        &:nth-child(even) {
+            background: alpha-color($white, 0.5);
+        }
+
+        &.checked:nth-child(even) {
+            background-color: lighten($primary-color, 40%);
+        }
+
+        .group-row {
+            .group-name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .group-row {
+        display: flex;
+        height: 34px;
+        flex-direction: row;
+        align-items: center;
+        border: 2px solid $transparent;
+
+        &:hover {
+            border-left: 2px solid $primary-color;
+            background-color: lighten($primary-color, 45%);
+
+            .group-description {
+                opacity: 1;
+            }
+        }
+
+        &.selected {
+            animation-duration: 3s;
+            animation-name: rowhighlight;
+        }
+
+        &.group-row-large {
+            height: 80px;
+        }
+    }
+
+    .channel-icon {
+        opacity: 0.8;
+    }
+}
+
+#groupDisplayName {
+    &.group-profile {
+        padding-bottom: 0;
+    }
+}
+
+#groupMention {
+    .group-profile {
+        padding-top: 0;
+    }
+
+    .group-at-mention-input {
+        padding-left: 26px;
+    }
+}
+
+.group-profile {
+    padding: 20px;
+}
+
+.group-users {
+    .group-users--header {
+        padding: 10px 20px;
+        background: #333;
+        color: $white;
+
+        a {
+            color: $white;
+            text-decoration: underline;
+        }
+    }
+
+    .group-users--body {
+        position: relative;
+        margin: 15px 15px 0 15px;
+
+        .group-users-loading {
+            position: absolute;
+            display: none;
+            width: 100%;
+            height: 100%;
+            background: $light-gray;
+            text-align: center;
+
+            &.active {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .fa-spinner {
+                    max-width: 10%;
+                }
+            }
+        }
+
+        .group-users-empty {
+            padding: 20px;
+            background: alpha-color($white, 0.5);
+            color: $gray;
+            font-size: 1.5em;
+            text-align: center;
+        }
+
+        .group-users-row {
+            &:nth-child(even) {
+                background: alpha-color($white, 0.5);
+            }
+
+            display: flex;
+            align-items: center;
+            padding: 10px 15px;
+
+            .profile-picture {
+                width: 32px;
+                height: 32px;
+                margin: 5px 10px;
+                border-radius: 100%;
+            }
+
+            .user-data {
+                margin-left: 10px;
+
+                .name-row {
+                    display: flex;
+                }
+
+                .display-name,
+                .email {
+                    color: $gray;
+                }
+            }
+
+            .email-label {
+                margin-right: 5px;
+            }
+        }
+    }
+
+    .group-users--footer {
+        display: flex;
+        height: auto;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 5px;
+        margin: 0 15px 15px 15px;
+        background: $white;
+
+        &.empty {
+            height: 0;
+            padding: 0;
+            border-top: 0;
+        }
+
+        .btn-link {
+            color: $dark-gray;
+
+            &.disabled {
+                opacity: 0.5;
+            }
+        }
+
+        .counter {
+            margin-bottom: 2px;
+            color: $dark-gray;
+            font-size: 1.1em;
+        }
+    }
+}
+
+.channel-moderation {
+    .channel-moderation--body {
+        padding: 20px;
+
+        .channel-moderation--table {
+            width: 100%;
+
+            th {
+                &:first-child {
+                    width: 100%;
+                    padding-left: 0;
+                }
+
+                padding: 6px 20px;
+                border-bottom: solid 1px alpha-color(#ccc, 0.75);
+            }
+
+            tr {
+                &:not(:last-child) {
+                    border-bottom: solid 1px alpha-color(#ccc, 0.75);
+                }
+
+                &:last-child {
+                    td {
+                        padding-bottom: 0;
+                    }
+                }
+            }
+
+            td {
+                padding: 20px 0;
+
+                &:first-child {
+                    padding-left: 0;
+                }
+
+                &:not(:first-child) {
+                    text-align: center;
+                    vertical-align: middle;
+                }
+            }
+
+            .checkbox {
+                display: inline-block;
+                width: 18px;
+                height: 18px;
+                padding: 0;
+                border: 2px solid $dark-gray;
+                background: none;
+                border-radius: 3px;
+
+                > * {
+                    pointer-events: none;
+                }
+
+                &.disabled {
+                    border-color: $light-gray;
+                }
+
+                &.checked {
+                    border: 0;
+
+                    svg {
+                        fill: #145dbf;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.group-teams-and-channels {
+    .group-teams-and-channels-loading {
+        padding: 40px;
+        text-align: center;
+    }
+
+    .group-teams-and-channels-empty {
+        padding: 20px;
+        background: alpha-color($white, 0.5);
+        color: $gray;
+        font-size: 1.5em;
+        text-align: center;
+    }
+
+    .group-teams-and-channels--header {
+        font-size: 1.1em;
+        font-weight: bold;
+    }
+
+    .group-teams-and-channels--body {
+        padding: 20px;
+
+        .group-teams-and-channels-row.has-children {
+            .type {
+                margin-left: 20px;
+            }
+        }
+
+        .group-teams-and-channels-row {
+            &:nth-child(even) {
+                background: alpha-color($white, 0.5);
+            }
+
+            .team-icon,
+            .channel-icon {
+                width: 16px;
+                height: 16px;
+                margin: 0 7px 0 4px;
+                color: inherit;
+                opacity: 0.7;
+            }
+
+            .arrow-icon {
+                .fa {
+                    padding: 0 4px;
+                    cursor: pointer;
+                }
+            }
+
+            .channel-icon {
+                margin: 1px 2px 0 20px;
+            }
+
+            .team-icon-private {
+                font-size: 0.35em;
+            }
+
+            .actions {
+                button {
+                    padding: 5px;
+                }
+            }
+
+            .type {
+                flex: 1;
+                margin-left: -29px;
+                color: #454448;
+                opacity: 50%;
+            }
+
+            .name-no-arrow {
+                margin-left: 16px;
+            }
+
+            .name-content {
+                display: flex;
+                flex: 1;
+
+                .name {
+                    flex: 1;
+                }
+
+                .arrow-icon {
+                    margin-left: 10px;
+
+                    .fa-caret-right {
+                        padding: 5px;
+                        cursor: pointer;
+                    }
+
+                    .open {
+                        transform: rotate(90deg);
+                        transform-origin: 55% 50%;
+                        transition: transform 300ms;
+                    }
+                }
+            }
+
+            .remove {
+                height: 30px;
+            }
+        }
+
+        .teams-list {
+            .teams-list--header {
+                display: flex;
+                justify-content: space-between;
+                border-bottom: 1px solid $dark-gray;
+                font-size: 1.1em;
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+.group-settings {
+    .group-settings--body {
+        padding: 0 20px 20px 20px;
+    }
+}
+
+.group-profile-add-menu {
+    position: relative;
+    margin-top: -36px;
+    margin-left: 10px;
+
+    .fa-caret-down {
+        margin-left: 5px;
+    }
+
+    .add-team-or-channel-menu {
+        position: absolute;
+        top: 33px;
+        width: 100%;
+        padding: 5px 8px;
+        border: 1px solid $gray;
+        background: $white;
+        border-radius: 2px;
+
+        a {
+            display: block;
+            padding: 7px;
+            color: $dark-gray;
+        }
+    }
+}
+
+.group-user-profile-picture {
+    width: 32px;
+    height: 32px;
+    margin: 5px 10px;
+    border-radius: 100%;
+}
+
+.group-users-to-remove-modal-description {
+    padding: 16px;
+    background-color: #f5f5f5;
+}
+
+.group-description.group-user-removal-column {
+    height: 40px;
+}
+
+#team_groups .group-row .group-description,
+#channel_groups .group-row .group-description {
+    width: 170px;
+}
+
+.section-separator {
+    position: relative;
+    z-index: 0;
+    height: 4rem;
+    margin: 0;
+    text-align: center;
+
+    hr {
+        position: relative;
+        z-index: 5;
+        top: 2rem;
+        border-color: #333;
+        margin: 0;
+        opacity: 0.12;
+    }
+}
+
+.email-group-row {
+    overflow: hidden;
+    width: 90%;
+    text-overflow: ellipsis;
+}
+
+.group-users--header-padded {
+    padding-left: 24px;
+}
+
+.icon-over-input {
+    position: absolute;
+    padding-top: 9px;
+    padding-left: 12px;
+    opacity: 0.8;
+}
+
+.AdminChannelDetails_archiveContainer {
+    position: relative;
+    left: -22px;
+    display: block;
+    width: 920px;
+    padding-top: 20px;
+    padding-left: 20px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin-top: 20px;
+}
+
+.AdminChannelDetails_archiveContainer .ArchiveButton {
+    padding: 9px 16px;
+}
+
+.AdminChannelDetails_archiveContainer .channel-icon__archive,
+.AdminChannelDetails_archiveContainer .channel-icon__unarchive {
+    width: 16px;
+    height: 16px;
+}
+
+$archived-color: #166de0;
+$unarchived-color: #f74343;
+
+.ArchiveButton___archived {
+    border-color: rgba($archived-color, 1);
+    color: rgba($archived-color, 1);
+
+    svg {
+        fill: rgba($archived-color, 1);
+    }
+}
+
+.ArchiveButton___unarchived {
+    border-color: rgba($unarchived-color, 1);
+    color: rgba($unarchived-color, 1);
+
+    svg {
+        fill: rgba($unarchived-color, 1);
+    }
+}
+
+.ArchiveButton {
+    border-width: 1px;
+    border-style: solid;
+    background-color: transparent;
+    border-radius: 4px;
+}
+
+.ArchiveButton___unarchived:hover {
+    background-color: rgba($unarchived-color, 0.06);
+    color: rgba($unarchived-color, 1);
+}
+
+.ArchiveButton___archived:hover {
+    background-color: rgba($archived-color, 0.06);
+    color: rgba($archived-color, 1);
+}
+
+.ArchiveButton:focus,
+.ArchiveButton:focus:active,
+.ArchiveButton:active {
+    outline: none;
+}
+
+.ArchiveButton___archived:focus {
+    color: rgba($archived-color, 1);
+}
+
+.ArchiveButton___unarchived:focus {
+    color: rgba($unarchived-color, 1);
+}
+
+.ArchiveButton___archived:focus:active {
+    background-color: rgba($archived-color, 0.12);
+}
+
+.ArchiveButton___unarchived:focus:active {
+    background-color: rgba($unarchived-color, 0.12);
+}
+
+.ArchiveButton:active {
+    box-shadow: none;
+}

webapp/channels/src/sass/components/_icons.scss

@@ -0,0 +1,64 @@
+@charset 'UTF-8';
+
+.icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+}
+
+.icon--no-spacing::before {
+    margin: 0;
+}
+
+.icon--small {
+    width: 16px;
+    height: 16px;
+}
+
+.icon--small-filled {
+    width: 14px;
+    height: 14px;
+}
+
+.icon--standard {
+    width: 20px;
+    height: 20px;
+    font-size: 1.6rem;
+}
+
+.icon-10 {
+    font-size: 12px;
+}
+
+.icon-12 {
+    font-size: 14.4px;
+}
+
+.icon-16 {
+    font-size: 18px;
+}
+
+.icon-20 {
+    font-size: 24px;
+}
+
+.icon-28 {
+    font-size: 31.2px;
+}
+
+.icon-32 {
+    font-size: 36px;
+}
+
+.icon-40 {
+    font-size: 48px;
+}
+
+.icon-52 {
+    font-size: 60px;
+}
+
+.icon-64 {
+    font-size: 72px;
+}

webapp/channels/src/sass/components/_infinite-scroll.scss

@@ -0,0 +1,12 @@
+@charset 'UTF-8';
+
+.infinite-scroll {
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+.infinite-scroll:hover {
+    overflow-y: scroll; // for Firefox and browsers that doesn't support overflow-y:overlay property
+    overflow-y: overlay;
+}

webapp/channels/src/sass/components/_inputs.scss

@@ -0,0 +1,103 @@
+@charset 'UTF-8';
+
+.help-text {
+    display: block;
+    margin: 10px 0 0;
+    color: $dark-gray;
+
+    ul,
+    ol {
+        padding-left: 23px;
+    }
+
+    a {
+        opacity: 0.5;
+    }
+
+    .help-link {
+        margin-right: 5px;
+    }
+
+    .btn {
+        font-size: 13px;
+    }
+
+    &.remove-filename {
+        position: relative;
+        top: -2px;
+        margin-bottom: 5px;
+    }
+}
+
+.form-control {
+    border-radius: $border-rad;
+    text-align: left;
+
+    &:focus {
+        box-shadow: none;
+    }
+
+    &.no-padding {
+        padding: 0;
+        line-height: 32px;
+    }
+
+    &.no-resize {
+        resize: none;
+    }
+
+    &[disabled],
+    [readonly] {
+        @include alpha-property(background, $white, 0.1);
+
+        color: inherit;
+        cursor: auto;
+    }
+}
+
+fieldset {
+    &[disabled] {
+        .form-control {
+            @include alpha-property(background, $white, 0.1);
+
+            color: inherit;
+            cursor: auto;
+        }
+    }
+}
+
+.admin-textarea {
+    resize: none;
+}
+
+input {
+    &[type='radio'],
+    &[type='checkbox'] {
+        margin-top: 3px;
+        font-size: 14px;
+    }
+}
+
+input::-webkit-file-upload-button {
+    display: none;
+}
+
+::-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;
+}

webapp/channels/src/sass/components/_line-switch.scss

@@ -0,0 +1,9 @@
+@charset 'UTF-8';
+
+.line-switch {
+    justify-content: space-between;
+}
+
+.line-switch__label {
+    margin: 0;
+}

webapp/channels/src/sass/components/_links.scss

@@ -0,0 +1,38 @@
+@charset 'UTF-8';
+
+a {
+    color: $primary-color;
+    cursor: pointer;
+    text-decoration: none;
+    word-break: break-word;
+
+    &:hover,
+    &:focus {
+        color: $primary-color--hover;
+        outline: 0;
+    }
+}
+
+button.style--link {
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--link-color);
+    cursor: pointer;
+    line-height: normal;
+    word-break: break-word;
+
+    &:hover,
+    &:focus {
+        text-decoration: underline;
+    }
+}
+
+.text-danger {
+    color: desaturate($red, 20%);
+
+    &:hover,
+    &:focus {
+        color: desaturate($red, 20%);
+    }
+}

webapp/channels/src/sass/components/_mentions.scss

@@ -0,0 +1,59 @@
+@charset 'UTF-8';
+
+del .mention-link,
+del .group-mention-link {
+    text-decoration: line-through;
+}
+
+del .mention-link:hover,
+del .mention-link:focus,
+del .group-mention-link:hover,
+del .group-mention-link:focus {
+    text-decoration: line-through underline;
+}
+
+.mention {
+    position: relative;
+    z-index: 10;
+    padding-bottom: 2px;
+    background: $primary-color;
+    border-radius: 3px;
+    color: $white;
+}
+
+.badge {
+    display: inline-block;
+    min-width: 10px;
+    padding: 3px 7px;
+    background-color: #777;
+    border-radius: 10px;
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.mention--highlight {
+    padding: 0 1px;
+    background-color: var(--mention-highlight-bg);
+    border-radius: 4px;
+    color: var(--mention-highlight-link);
+
+    .mention-link,
+    .mention-link:hover,
+    .mention-link:focus {
+        color: var(--mention-highlight-link);
+    }
+
+    .mention--highlight {
+        padding: 0;
+        background: none;
+    }
+}
+
+.group-mention-link {
+    color: var(--link-color);
+}

webapp/channels/src/sass/components/_module.scss

@@ -0,0 +1,54 @@
+// Only for combining all the files in this folder
+@import 'forms';
+@import 'alerts';
+@import 'announcement-bar';
+@import 'badge';
+@import 'buttons';
+@import 'channel-header__icon';
+@import 'channel-invite-modal';
+@import 'channel-switcher';
+@import 'dropdown';
+@import 'emoticons';
+@import 'emojisprite';
+@import 'emoji-picker-tabs';
+@import 'files';
+@import 'icons';
+@import 'inputs';
+@import 'links';
+@import 'mentions';
+@import 'modal';
+@import 'multi-select';
+@import 'oauth';
+@import 'popover';
+@import 'post';
+@import 'post-menu';
+@import 'post-right';
+@import 'react-select';
+@import 'remove-image';
+@import 'save-button';
+@import 'scrollbar';
+@import 'search';
+@import 'status-icon';
+@import 'suggestion-list';
+@import 'tooltip';
+@import 'tutorial';
+@import 'videos';
+@import 'color-input';
+@import 'system-notice';
+@import 'permissions';
+@import 'admin-modal';
+@import 'edit-post-time-limit-button';
+@import 'edit-post-time-limit-modal';
+@import 'day-picker';
+@import 'groups';
+@import 'select';
+@import 'admin-sidebar-header';
+@import 'sidebar-card';
+@import 'sidebar-header-dropdown-button';
+@import 'single_image_view';
+@import 'sidebar-header';
+@import 'toggle';
+@import 'team-channel-settings';
+@import 'infinite-scroll';
+@import 'line-switch';
+@import 'apps-modal';

webapp/channels/src/sass/components/_multi-select.scss

@@ -0,0 +1,54 @@
+@charset 'UTF-8';
+
+.multi-select__container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding: 0 15px;
+
+    .btn {
+        height: 36px;
+        margin-left: 16px;
+    }
+}
+
+.multi-select__focused {
+    > div {
+        border-radius: 4px;
+        box-shadow: 0 0 1px 3px rgba(var(--link-color-rgb), 0.5), 0 0 0 1px var(--link-color);
+    }
+
+    input {
+        box-shadow: none !important;
+    }
+}
+
+.multi-select__help {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 15px 0;
+
+    &:empty {
+        display: none;
+    }
+
+    > div:not(.multi-select__note),
+    > span {
+        opacity: 0.6;
+    }
+}
+
+.multi-select__note {
+    display: table;
+    width: 100%;
+    padding: 8px 13px;
+    border-radius: 3px;
+
+    > div {
+        display: table-cell;
+
+        &.note__icon {
+            width: 15px;
+        }
+    }
+}

webapp/channels/src/sass/components/_oauth.scss

@@ -0,0 +1,47 @@
+@charset 'UTF-8';
+
+.prompt {
+    width: 600px;
+    max-width: 90%;
+    padding: 1em 2em 0;
+    border: 1px solid $light-gray;
+    margin: 50px auto;
+    background: $white;
+
+    .prompt__heading {
+        display: table;
+        width: 100%;
+        margin: 1em 0;
+        font-size: em(18px);
+        line-height: normal;
+        table-layout: fixed;
+
+        > div {
+            display: table-cell;
+            vertical-align: top;
+
+            &:first-child {
+                width: 70px;
+            }
+        }
+
+        img {
+            margin-right: 15px;
+        }
+    }
+
+    .prompt__allow {
+        margin: 1em 0;
+        font-size: em(20px);
+    }
+
+    .prompt__buttons {
+        padding: 1.5em 0;
+        border-top: 1px solid $light-gray;
+        text-align: right;
+    }
+
+    .prompt__error {
+        display: inline-block;
+    }
+}

webapp/channels/src/sass/components/_permissions.scss

@@ -0,0 +1,389 @@
+@keyframes rowhighlight {
+    0% {
+        background-color: $transparent;
+    }
+
+    20% {
+        background-color: beige;
+    }
+
+    80% {
+        background-color: beige;
+    }
+
+    100% {
+        background-color: $transparent;
+    }
+}
+
+.permissions-block {
+    .more-schemes {
+        width: 100%;
+        padding: 10px;
+        text-align: center;
+        text-decoration: none;
+    }
+
+    &.closed {
+        .permissions-tree {
+            max-height: 0;
+            padding: 0 1.5rem;
+            overflow-y: hidden;
+        }
+    }
+
+    .no-team-schemes {
+        padding: 20px;
+        margin: 20px;
+        background: rgba(255, 255, 255, 0.5);
+        color: $gray;
+        font-size: 16px;
+        text-align: center;
+    }
+
+    .team-override-unavailable {
+        padding: 20px;
+        color: #3333337d;
+        opacity: 50%;
+
+        .team-override-unavailable__inner {
+            padding: 20px;
+            background-color: $white;
+        }
+    }
+
+    .teams-list {
+        padding: 20px;
+
+        .no-team-schemes {
+            margin: 0;
+        }
+
+        .team {
+            display: flex;
+            padding: 10px;
+
+            &:nth-child(even) {
+                background: rgba(255, 255, 255, 0.5);
+            }
+
+            .remove {
+                flex-grow: 0;
+            }
+        }
+    }
+}
+
+.permissions-tree {
+    max-height: 2000px;
+    padding: 0.8em 1.5rem;
+    transition: all 0.4s ease-in-out 0s;
+
+    &.guest {
+        .permission-row {
+            padding-left: 15px;
+        }
+
+        .permission-group {
+            .permission-group-row {
+                padding-left: 15px;
+
+                .permission-name {
+                    min-width: 300px;
+                }
+            }
+        }
+    }
+
+    .permissions-tree--header {
+        display: flex;
+        flex-direction: row;
+        padding: 0.5em 0;
+        border-bottom: 1px solid #ccc;
+        font-size: 1.1em;
+        font-weight: bold;
+
+        .permission-name {
+            min-width: 300px;
+            margin-left: 16px;
+        }
+
+        .permission-description {
+            display: block;
+            width: 100%;
+            color: $black;
+            opacity: 1;
+        }
+    }
+
+    .permissions-tree--body {
+        background-color: $bg--gray;
+        background-image: linear-gradient(transparent 50%, alpha-color($white, 0.5) 50%);
+        background-size: 68px 68px;
+        cursor: pointer;
+    }
+
+    .permission-arrow {
+        display: flex;
+        min-width: 10px;
+        min-height: 10px;
+        align-items: center;
+        justify-content: space-around;
+        margin: 5px 7px 4px 6px;
+        transition: transform 300ms;
+
+        &.open {
+            margin-top: 6px;
+            transform: rotate(90deg);
+            transform-origin: 55% 50%;
+            transition: transform 300ms;
+        }
+    }
+
+    .permission-check {
+        display: flex;
+        min-width: 18px;
+        min-height: 18px;
+        align-items: center;
+        justify-content: space-around;
+        border: 2px solid $dark-gray;
+        margin-right: 5px;
+        border-radius: 3px;
+
+        &.checked,
+        &.intermediate {
+            border: 0;
+
+            svg {
+                background: $white;
+                fill: $primary-color;
+            }
+        }
+    }
+
+    .permission-name {
+        display: inline-block;
+        min-width: 300px;
+    }
+
+    .permission-description {
+        display: flex;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        opacity: 0.65;
+
+        span {
+            display: inline-block;
+            overflow: hidden;
+            width: 100%;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    .permission-group {
+        .permission-group-row {
+            .permission-name {
+                min-width: 268px;
+            }
+        }
+
+        .permission-group-permissions {
+            overflow: hidden;
+            max-height: 0;
+            transition: max-height 300ms;
+
+            &.open {
+                max-height: 400px;
+                transition: max-height 300ms;
+            }
+
+            .permission-row {
+                padding: 0 0 0 48px;
+
+                .permission-name {
+                    min-width: 242px;
+                }
+            }
+
+            .permission-group-row {
+                padding: 0 0 0 25px;
+
+                &.combined {
+                    padding: 0 0 0 48px;
+                }
+
+                .permission-name {
+                    min-width: 244px;
+                }
+            }
+
+            .permission-group-permissions {
+                .permission-row {
+                    padding: 0 0 0 78px;
+
+                    .permission-name {
+                        min-width: 213px;
+                    }
+                }
+
+                .permission-group-row {
+                    padding: 0 0 0 60px;
+
+                    &.combined {
+                        padding: 0 0 0 78px;
+                    }
+
+                    .permission-name {
+                        min-width: 192px;
+                    }
+                }
+            }
+        }
+    }
+
+    .permission-row,
+    .permission-group-row {
+        display: flex;
+        height: 34px;
+        flex-direction: row;
+        align-items: center;
+        border: 2px solid $transparent;
+
+        &:hover {
+            border-left: 2px solid $primary-color;
+            background-color: lighten($primary-color, 40%);
+
+            .permission-description {
+                opacity: 1;
+            }
+        }
+
+        &.selected {
+            animation-duration: 3s;
+            animation-name: rowhighlight;
+        }
+
+        &.read-only {
+            .permission-check {
+                border: none;
+                background-color: $gray;
+
+                &.checked,
+                &.intermediate {
+                    svg {
+                        background: $white;
+                        fill: $gray;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.permissions-scheme-summary {
+    padding: 10px 20px 0 20px;
+    border-left: 2px solid $transparent;
+    margin: 0 20px;
+    cursor: pointer;
+
+    &:nth-child(2) {
+        margin-top: 20px;
+    }
+
+    &:last-child {
+        margin-bottom: 20px;
+    }
+
+    &:nth-child(odd) {
+        background: rgba(255, 255, 255, 0.5);
+    }
+
+    &:hover {
+        border-left: 2px solid $primary-color;
+        background-color: lighten($primary-color, 40%);
+    }
+
+    .permissions-scheme-summary--header {
+        display: flex;
+        flex-direction: row;
+        font-size: 1.1em;
+
+        .title {
+            flex-grow: 1;
+            font-size: 14px;
+            font-weight: bold;
+        }
+
+        .actions {
+            flex-grow: 0;
+
+            a {
+                display: inline-block;
+                padding: 0 3px;
+            }
+        }
+    }
+
+    .permissions-scheme-summary--teams {
+        padding: 1.5em 0 0.5em;
+
+        .team {
+            display: inline-flex;
+            height: 25px;
+            align-items: center;
+            justify-content: center;
+            padding: 0 8px;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            background: rgba(0, 0, 0, 0.05);
+            border-radius: 13px;
+            color: alpha-color($black, 0.6);
+            font-size: 11px;
+        }
+    }
+}
+
+.team-scheme-extra-teams-overlay {
+    .tooltip-inner {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.permission-scheme-summary-error-message {
+    color: $red;
+}
+
+.team-scheme-details {
+    padding: 20px 20px 5px 20px;
+
+    .form-group {
+        display: flex;
+
+        label {
+            width: 240px;
+        }
+    }
+}
+
+.team-info-block {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+
+    .team-data {
+        flex-grow: 1;
+        padding: 0 0 0 10px;
+
+        .title {
+            font-weight: bold;
+        }
+    }
+
+    .TeamIcon {
+        background: rgba(0, 0, 0, 0.12);
+    }
+}

webapp/channels/src/sass/components/_popover.scss

@@ -0,0 +1,661 @@
+@charset "utf-8";
+
+.app__body .popover.channel-header__popover {
+    box-shadow: none;
+}
+
+.header-popover-text-measurer {
+    position: absolute;
+    width: auto;
+    height: auto;
+    visibility: hidden;
+    white-space: nowrap;
+}
+
+.popover {
+    padding: 0;
+    background: var(--center-channel-bg);
+    border-radius: $border-rad * 2;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    color: lighten($black, 25%);
+    font-family: inherit;
+
+    .app__body & {
+        border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+        .user-profile-popover {
+            border: 1px solid rgba(var(--center-channel-color-rgb), 0.2);
+            background: transparent !important;
+            box-shadow: none !important;
+
+            .popover-title {
+                position: relative;
+                border-color: var(--center-channel-bg);
+                background: none;
+
+                &::before {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    content: '';
+                }
+
+                span {
+                    position: relative;
+                    z-index: 1;
+                }
+            }
+
+            .popover-content {
+                border-top: none;
+                background: v(center-channel-bg);
+                border-radius: 0 0 3px 3px;
+                box-shadow: rgba(var(--center-channel-color-rgb), 0.08) 0 17px 50px 0, rgba(var(--center-channel-color-rgb), 0.08) 0 12px 15px 0;
+
+                .shared-user-icon {
+                    width: 16px;
+                    height: 16px;
+                    margin-left: 8px;
+                    color: rgba(61, 60, 64, 0.72);
+                    font-size: 16px;
+                    line-height: 20px;
+
+                    &::before {
+                        margin: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    &.channel-header__popover {
+        z-index: 999;
+        margin-left: 8px;
+        font-size: 12px;
+
+        &.chanel-header__popover--lhs_offset {
+            margin-left: 73px;
+        }
+
+        .popover-content {
+            padding: 2px 3px;
+
+            .markdown__list {
+                margin: 0;
+            }
+
+            p {
+                white-space: normal;
+                word-break: normal;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+
+        &.bottom {
+            margin-top: -10px;
+        }
+    }
+
+    &.bottom,
+    &.right,
+    &.top,
+    &.left {
+        > .arrow {
+            display: none;
+
+            &::after {
+                border-color: transparent;
+            }
+        }
+    }
+
+    &.bottom {
+        margin-top: 10px;
+
+        > .arrow {
+            &::after {
+                border-bottom-color: var(--center-channel-bg);
+            }
+        }
+    }
+
+    &.left {
+        > .arrow {
+            &::after {
+                border-left-color: var(--center-channel-bg);
+            }
+        }
+    }
+
+    &.right {
+        > .arrow {
+            &::after {
+                border-right-color: var(--center-channel-bg);
+            }
+        }
+    }
+
+    &.top {
+        > .arrow {
+            &::after {
+                border-top-color: var(--center-channel-bg);
+            }
+        }
+    }
+
+    ul + p,
+    ol + p {
+        margin-top: 0.6em;
+    }
+
+    p + ul,
+    p + ol {
+        margin-top: 0.6em;
+    }
+
+    blockquote {
+        overflow: hidden;
+        padding: 0 0 0 20px;
+        font-size: 13px;
+        text-overflow: ellipsis;
+
+        &::before {
+            top: 0;
+            left: 2px;
+            font-size: 15px;
+        }
+    }
+
+    .popover-title {
+        overflow: hidden;
+        max-width: 100%;
+        padding: 12px 12px 0;
+        border-color: var(--center-channel-bg);
+        background: none;
+        text-overflow: ellipsis;
+
+        > span {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    }
+
+    hr {
+        &.divider {
+            margin: 8px 0;
+        }
+
+        &.divider--expanded {
+            border-color: rgba(var(--center-channel-color-rgb), 0.08);
+            margin: 8px -15px;
+        }
+    }
+
+    .popover-content {
+        word-break: break-word;
+
+        p {
+            &:last-child {
+                margin-bottom: 5px;
+            }
+        }
+    }
+
+    .popover__row {
+        padding: 9px 15px 0;
+        margin: 0 -15px 0;
+
+        &.first {
+            border-top: 1px solid transparent;
+            margin-top: 4px;
+        }
+
+        > a,
+        > button {
+            i {
+                margin-right: 5px;
+            }
+        }
+    }
+}
+
+.channel-header__info {
+    .popover-content {
+        overflow: auto;
+        max-height: 250px;
+    }
+}
+
+.user-popover {
+    display: inline-block;
+    cursor: pointer;
+}
+
+.code-popover {
+    .popover-content {
+        padding: 5px;
+    }
+}
+
+.user-popover-image {
+    position: relative;
+    display: block;
+    width: 128px;
+    margin: 0 auto 8px;
+
+    #userAvatar {
+        width: 120px;
+        min-width: 120px;
+        height: 120px;
+    }
+
+    .user-popover-status {
+        position: absolute;
+        top: auto;
+        right: 8px;
+        bottom: 0;
+        display: flex;
+        width: 24px;
+        height: 24px;
+        padding: 2px;
+        background: rgba(var(--center-channel-bg-rgb), 1);
+        border-radius: 50px;
+
+        svg {
+            width: 100%;
+            min-height: 100%;
+        }
+    }
+}
+
+.user-profile-popover .Avatar {
+    display: block;
+    margin: 5px auto;
+}
+
+.user-popover__email {
+    display: block;
+    overflow: hidden;
+    max-width: 300px;
+    text-overflow: ellipsis;
+}
+
+.user-popover__close {
+    display: flex;
+    padding: 6px;
+    border: none;
+    margin-left: auto;
+    background: none;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    font-weight: 400;
+    line-height: 18px;
+
+    &:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        border-radius: 4px;
+    }
+}
+
+.hidden-label + .search-autocomplete__divider {
+    &::before {
+        display: none;
+    }
+}
+
+.search-autocomplete__divider {
+    position: relative;
+    display: flex;
+    height: 2.8rem;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 0 0 2.4rem;
+    margin: 1.2rem 0 0;
+    color: rgba(var(--center-channel-color-rgb), 0.6);
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+
+    span {
+        background: v(center-channel-bg);
+    }
+
+    &:first-child {
+        &::before {
+            display: none;
+        }
+    }
+
+    &::before {
+        position: absolute;
+        top: -7px;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        content: '';
+    }
+}
+
+.search-autocomplete__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.search-help-popover {
+    top: 25px;
+    right: 0;
+    left: auto;
+    width: 296px;
+    max-width: 350px;
+    opacity: 0;
+    visibility: hidden;
+
+    &.autocomplete {
+        display: block;
+
+        .popover-content {
+            position: relative;
+            max-height: 60vh;
+            padding: 0 0 12px;
+            -webkit-overflow-scrolling: touch;
+            overflow-x: hidden;
+
+            &::-webkit-scrollbar-track {
+                width: 0;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border: 1px solid v(center-channel-bg);
+                background-color: rgba(var(--center-channel-color-rgb), 0.24) !important;
+                border-radius: 4px;
+            }
+
+            .rdp-months {
+                justify-content: center;
+
+                .rdp-caption,
+                .rdp-cell {
+                    padding: 0 10px;
+                }
+            }
+        }
+    }
+
+    &.bottom > .arrow {
+        top: -18px;
+        left: 30px;
+        border-width: 9px;
+    }
+
+    .popover-content {
+        overflow: auto;
+        max-height: 500px;
+        padding: 0;
+    }
+
+    h4 {
+        margin-top: 0;
+        font-size: 1.4rem;
+    }
+
+    ul {
+        span {
+            opacity: 0.8;
+        }
+
+        strong,
+        b {
+            opacity: 1;
+        }
+    }
+
+    .tooltip-inner {
+        max-width: 100%;
+    }
+
+    body.enable-animations & {
+        transition-delay: 0s;
+        transition-duration: 0.1s;
+        transition-property: opacity, visibility;
+        transition-timing-function: ease-in, step-end;
+    }
+
+    &.visible {
+        opacity: 1;
+        visibility: visible;
+
+        body.enable-animations & {
+            transition-delay: 0.2s;
+            transition-duration: 0.3s;
+            transition-property: opacity, visibility;
+            transition-timing-function: ease-out, step-start;
+        }
+
+        body.enable-animations .sidebar--right & {
+            transition-delay: 0s;
+            transition-duration: 0.3s;
+            transition-property: opacity, visibility;
+            transition-timing-function: ease-out, step-start;
+        }
+    }
+}
+
+.member-list__popover {
+    max-width: initial;
+    margin-left: 110px;
+
+    &.popover.bottom {
+        margin-top: 2px;
+    }
+
+    .more-modal__body {
+        position: relative;
+        overflow: auto;
+        max-height: 275px;
+        border-top: 1px solid transparent;
+        border-bottom: 1px solid transparent;
+    }
+
+    .more-modal__header {
+        display: flex;
+        padding: 14px 20px;
+
+        .icon {
+            position: relative;
+            margin: 0 38px 0 24px;
+            opacity: 0.8;
+        }
+
+        span {
+            align-self: center;
+            font-weight: 600;
+        }
+
+        button {
+            width: fit-content;
+            margin-left: auto;
+
+            i {
+                margin: 0 5px !important;
+            }
+        }
+
+        .subhead {
+            font-size: 12px;
+            opacity: 0.6;
+
+            span {
+                font-weight: normal;
+            }
+        }
+    }
+
+    .more-modal__button {
+        display: flex;
+
+        .btn {
+            width: 100%;
+            height: 42px;
+            padding: 0;
+            margin: 0 auto;
+        }
+    }
+
+    .more-modal__list {
+        .more-modal__row {
+            overflow: hidden;
+            height: 50px;
+            padding: 0 12px 0 20px;
+            border: none;
+            margin: 1px 0;
+            cursor: pointer;
+
+            .more-modal__actions {
+                padding: 0;
+                margin-left: 12px;
+                opacity: 1;
+
+                button {
+                    width: 2em;
+                    height: 2em;
+                    border-radius: 4px;
+                    line-height: 0;
+                    opacity: 0;
+
+                    &:hover {
+                        background-color: rgba(var(--button-bg-rgb), 0.24);
+                    }
+
+                    &:active {
+                        background-color: rgba(var(--button-bg-rgb), 0.32);
+                    }
+
+                    &.a11y--focused {
+                        opacity: 1;
+                    }
+                }
+            }
+
+            &:hover {
+                padding-left: 17px;
+                border-left: 3px solid transparent;
+
+                .more-modal__actions {
+                    button {
+                        opacity: 1;
+                    }
+                }
+
+                .more-modal__name {
+                    font-weight: 600;
+                }
+            }
+
+            &.more-modal__row--button {
+                position: relative;
+                height: 40px;
+                border-left: none;
+
+                button {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    font-weight: 500;
+                }
+            }
+
+            .shared-user-icon {
+                margin-top: 5px;
+                color: rgba(61, 60, 64, 0.56);
+                font-size: 16px;
+            }
+        }
+
+        .more-modal__name {
+            display: block;
+            font-size: 13.5px;
+            font-weight: normal;
+        }
+
+        .more-modal__image {
+            position: relative;
+            top: -1px;
+            margin: 0;
+        }
+
+        .more-modal__details {
+            padding-left: 16px;
+            line-height: 39px;
+
+            .shared-user-icon {
+                width: 16px;
+                height: 16px;
+                margin-top: 16px;
+                margin-left: 8px;
+                color: rgba(61, 60, 64, 0.72);
+                font-size: 16px;
+                line-height: 16px;
+
+                &::before {
+                    margin: 0;
+                }
+            }
+        }
+
+        .more-modal__actions {
+            margin: 0;
+            line-height: 42px;
+            opacity: 0;
+
+            .icon {
+                position: relative;
+                top: 2px;
+            }
+        }
+    }
+
+    .popover-content {
+        position: relative;
+        width: 260px;
+        max-height: 380px;
+        padding: 0;
+
+        .text-nowrap {
+            overflow: hidden;
+            width: 100%;
+            padding: 6px 10px;
+            font-size: 13px;
+            line-height: 26px;
+        }
+
+        .more__name {
+            overflow: hidden;
+            max-width: 140px;
+            margin-left: 6px;
+            text-overflow: ellipsis;
+        }
+    }
+}
+
+.channel_search {
+    display: flex;
+
+    .search_input {
+        flex: 1;
+        margin-right: 16px;
+        margin-left: 16px;
+    }
+
+    .create_button {
+        margin-right: 16px;
+    }
+}

webapp/channels/src/sass/components/_post-menu.scss

@@ -0,0 +1,116 @@
+@charset 'UTF-8';
+
+.post-menu {
+    position: absolute;
+    z-index: 6;
+    top: -12px;
+    right: 0;
+    display: flex;
+    justify-content: flex-end;
+    padding: 4px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    white-space: normal;
+}
+
+.post-menu__item {
+    display: inline-flex;
+    width: 28px;
+    height: 28px;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    border-radius: 4px;
+    color: rgba(v(center-channel-color-rgb), 0.4);
+    fill: rgba(v(center-channel-color-rgb), 0.4);
+
+    &:active,
+    &--active,
+    &--active:hover {
+        background: rgba(var(--button-bg-rgb), 0.08);
+        color: v(button-bg);
+        fill: v(button-bg);
+    }
+
+    span {
+        display: flex;
+    }
+}
+
+.post-menu__item--show {
+    display: block;
+}
+
+.post-menu__item--wide {
+    width: auto;
+    padding: 0 6px;
+}
+
+.post-menu__item--selected { // Used for the flag icon when it is in the flagged state
+    color: var(--link-color);
+    fill: var(--link-color);
+}
+
+.post-menu__comment-count {
+    margin: 0 0 0 2px;
+    font-weight: 600;
+    -webkit-user-select: none; /* Chrome all / Safari all */
+    -moz-user-select: none;    /* Firefox all */
+    -ms-user-select: none;     /* IE 10+ */
+    user-select: none;
+}
+
+.post-menu__emoticon {
+    cursor: pointer;
+}
+
+@media (min-width: 768px) {
+    .post-menu__item {
+        display: none;
+    }
+
+    .post-menu__item--show {
+        display: block;
+    }
+
+    .post {
+        &:hover,
+        &.post--hovered,
+        &.a11y--active {
+            .post-menu {
+                border-color: rgba(v(center-channel-color-rgb), 0.08);
+                background-color: v(center-channel-bg);
+                box-shadow: $elevation-1;
+            }
+
+            .search-item__jump {
+                color: rgba(v(center-channel-color-rgb), 0.56);
+
+                &:hover {
+                    color: v(link-color);
+                }
+            }
+
+            .post-menu__item {
+                display: inline-flex;
+                color: rgba(v(center-channel-color-rgb), 0.56);
+                fill: rgba(v(center-channel-color-rgb), 0.56);
+
+                &:hover {
+                    background: rgba(v(center-channel-color-rgb), 0.08);
+                    color: rgba(v(center-channel-color-rgb), 0.72);
+                    fill: rgba(v(center-channel-color-rgb), 0.72);
+                }
+
+                &:active,
+                &--active,
+                &--active:hover {
+                    background: rgba(var(--button-bg-rgb), 0.08);
+                    color: v(button-bg);
+                    fill: v(button-bg);
+                }
+            }
+        }
+    }
+}

webapp/channels/src/sass/components/_post-right.scss

@@ -0,0 +1,273 @@
+@charset "utf-8";
+
+.post-right__container,
+.ThreadViewer {
+    display: flex;
+    flex-direction: column;
+
+    .post-right-root-message {
+        padding: 1em 1em 0;
+    }
+
+    .post-right-comments-container {
+        position: relative;
+        margin-right: 5px;
+
+        .post {
+            &:hover {
+                & + .Separator {
+                    .separator__hr {
+                        overflow: visible;
+
+                        &::before {
+                            position: absolute;
+                            top: -16px;
+                            left: 0;
+                            width: 100%;
+                            height: 16px;
+                            background: rgba(v(center-channel-color-rgb), 0.04);
+                            content: '';
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .help__format-text {
+        display: none;
+    }
+
+    .post {
+        &.post--root {
+            padding-top: 2rem;
+
+            .post__body {
+                background: transparent !important;
+            }
+
+            &.post--compact {
+                padding-left: 1em;
+            }
+        }
+
+        .post-pre-header__icons-container {
+            width: 60px; // If the width of post__img changes, this needs to be adjusted accordingly
+            padding-right: 12px; // If the padding of post__img changes, this needs to be adjusted accordingly
+            margin-left: 0; // if left margin of post__content changes, this needs to be adjusted accordingly
+        }
+
+        .post__header {
+            .post-menu {
+                text-align: right;
+            }
+        }
+
+        &.post--comment {
+            .post__body {
+                border-left: none;
+            }
+        }
+
+        .post__content {
+            padding: 0 10px 0 0;
+        }
+
+        .post__body {
+            width: 100%;
+            padding-left: 0;
+        }
+
+        &.post--compact {
+            .post__body {
+                padding-left: 0;
+            }
+
+            &.same--root {
+                &.post--comment {
+                    padding-left: 1em;
+
+                    .post__header {
+                        height: auto;
+                        margin-left: 0;
+                        float: none;
+
+                        .post__time {
+                            opacity: 0.6;
+                        }
+                    }
+                }
+            }
+
+            &.same--user {
+                .post__header {
+                    .col__name {
+                        display: inline-block;
+                    }
+                }
+            }
+
+            .post__img {
+                width: 16px;
+            }
+
+            .card-icon__container {
+                margin: 0 0 0 6px;
+            }
+        }
+
+        .post__img {
+            width: 60px; // if this changes, the width of post-pre-header__icons-container needs to be adjusted accordingly
+            padding: 2px 12px 0 0; // if the right padding changes, the padding of post-pre-header__icons-container needs to be adjusted accordingly
+        }
+
+        .post-body {
+            img {
+                max-height: 200px;
+            }
+        }
+
+        .post-preview .post__img {
+            width: 24px;
+        }
+    }
+
+    hr {
+        border: none;
+    }
+
+    .post-create__container {
+        width: 100%;
+
+        .btn {
+            margin-bottom: 10px;
+
+            &.disabled {
+                border-color: transparent !important;
+                background: grey !important;
+            }
+        }
+
+        .custom-textarea {
+            min-height: 100px;
+            max-height: calc(50vh - 80px);
+        }
+
+        .msg-typing {
+            display: block;
+            min-width: 1px;
+            max-width: 230px;
+            height: 20px;
+            margin-top: 4px;
+            margin-bottom: 0;
+            float: left;
+            font-size: 13px;
+            line-height: 20px;
+            opacity: 0.7;
+        }
+
+        .post-right-comments-upload-in-progress {
+            padding: 6px 0;
+            margin-right: 10px;
+            opacity: 0.7;
+        }
+
+        .emoji-picker {
+            position: absolute;
+            top: -361px;
+            right: 0;
+        }
+
+        form {
+            padding: 0;
+        }
+
+        .post-create {
+            padding: 0.5em 15px 0;
+        }
+
+        .post-create-footer {
+            .post-error {
+                position: relative;
+                top: 0;
+                display: inline-block;
+                margin-bottom: 0;
+                font-size: 0.85em;
+                font-weight: normal;
+                opacity: 0.55;
+            }
+        }
+    }
+}
+
+.post-right__container {
+    flex: 1;
+
+    .ThreadViewer {
+        flex: 1;
+    }
+}
+
+.post-right-header {
+    height: 39px;
+    padding: 10px 10px 0 15px;
+    border-bottom: $border-gray;
+    color: #999;
+    font-size: 1em;
+    font-weight: 400;
+    text-transform: uppercase;
+}
+
+.post-right-root-container {
+    padding: 5px 10px;
+    border-bottom: $border-gray;
+
+    ul {
+        padding-left: 0;
+        margin-bottom: 2px;
+    }
+}
+
+.post-right-channel__name {
+    margin: 8px 0 12px;
+    font-weight: 600;
+}
+
+.card-info-channel__name {
+    margin: 0 0 15px 14px;
+    font-weight: 600;
+}
+
+.post-right-root-container li {
+    display: inline;
+    padding-right: 3px;
+    list-style-type: none;
+}
+
+.post-right-root-time {
+    color: #a8adb7;
+}
+
+.post-right-create-comment-container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 5px;
+    margin-bottom: 18px;
+}
+
+.post-right__scroll {
+    position: relative;
+    flex: 1 1 auto;
+    padding-top: 28px;
+    -webkit-overflow-scrolling: touch;
+
+    .file-preview__container {
+        margin-top: 5px;
+    }
+}
+
+.post-right-comment-time {
+    color: #a8adb7;
+}

webapp/channels/src/sass/components/_react-select.scss

@@ -0,0 +1,196 @@
+.react-select {
+    .a11y--focused {
+        box-shadow: none;
+    }
+
+    .react-select__value-container {
+        padding: 0 8px;
+    }
+
+    .react-select__multi-value {
+        align-items: center;
+        margin: 4px 4px 4px 0;
+        background: rgba(var(--sys-center-channel-color-rgb), 0.08);
+        border-radius: 32px;
+        color: var(--sys-center-channel-color);
+
+        .app__body & {
+            background: rgba(var(--center-channel-color-rgb), 0.08);
+            color: var(--center-channel-color);
+        }
+    }
+
+    .react-select__multi-value__remove {
+        cursor: pointer;
+
+        span {
+            display: flex;
+            width: 16px;
+            height: 16px;
+        }
+
+        &:hover {
+            background: none;
+        }
+
+        svg {
+            width: 16px;
+            height: 16px;
+            fill: rgba(var(--sys-center-channel-color-rgb), 0.64);
+            opacity: 0.6;
+
+            &:hover {
+                fill: rgba(var(--sys-center-channel-color-rgb), 0.8);
+            }
+
+            .app__body & {
+                fill: rgba(var(--center-channel-color-rgb), 0.64);
+
+                &:hover {
+                    fill: rgba(var(--center-channel-color-rgb), 0.8);
+                }
+            }
+        }
+    }
+
+    .react-select__control {
+        height: 36px;
+        min-height: 36px;
+        border-color: rgba(var(--sys-center-channel-color-rgb), 0.2);
+        background: rgba(var(--sys-center-channel-bg-rgb), 1);
+
+        .app__body & {
+            border-color: rgba(var(--center-channel-color-rgb), 0.2);
+            background: var(--center-channel-bg);
+        }
+
+        &.react-select-auto {
+            width: 100%;
+            height: auto;
+        }
+
+        &:hover {
+            .react-select__indicator {
+                opacity: 0.8;
+            }
+        }
+
+        &.react-select__control--is-disabled {
+            background: rgba(var(--sys-center-channel-color-rgb), 0.04);
+
+            .app__body & {
+                background: rgba(var(--center-channel-color-rgb), 0.04);
+            }
+        }
+    }
+
+    .react-select__padded-component {
+        padding: 4px 2px 4px 8px;
+    }
+
+    .react-select__control--is-focused {
+        border-color: rgba(var(--sys-button-bg-rgb), 1) !important;
+        box-shadow: inset 0 0 0 1px rgba(var(--sys-button-bg-rgb), 1);
+
+        .app__body & {
+            border-color: rgba(var(--button-bg-rgb), 1) !important;
+            box-shadow: inset 0 0 0 1px rgba(var(--button-bg-rgb), 1);
+        }
+    }
+
+    .react-select__indicator-separator {
+        background-color: rgba(var(--sys-center-channel-color-rgb), 0.4);
+
+        .app__body & {
+            background-color: rgba(var(--center-channel-color-rgb), 0.4);
+        }
+    }
+
+    .react-select__indicator {
+        padding: 7px 8px;
+        color: inherit;
+        opacity: 0.4;
+        transition: opacity 0.2s ease;
+    }
+
+    .react-select__single-value {
+        color: inherit;
+    }
+
+    // additionally adding `&__***` definitions,
+    // since using portal on the react-select component
+    // renders it as the last child of the body.
+    &__input,
+    .react-select__input {
+        color: var(--sys-center-channel-color);
+
+        .app__body & {
+            color: var(--center-channel-color);
+        }
+    }
+
+    &__menu,
+    .react-select__menu {
+        background: var(--sys-center-channel-bg);
+
+        .app__body & {
+            background: var(--center-channel-bg);
+        }
+
+        &-list {
+            border: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.2);
+            border-radius: 4px;
+
+            .app__body & {
+                border: 1px solid rgba(var(--center-channel-color-rgb), 0.2);
+            }
+        }
+    }
+
+    &__option,
+    & &__option {
+        // hovering
+        &--is-focused {
+            background: rgba(var(--sys-button-bg-rgb), 0.08);
+
+            .app__body & {
+                background: rgba(var(--center-channel-color-rgb), 0.08);
+            }
+        }
+
+        // selected option
+        &--is-selected {
+            background: var(--sys-button-bg);
+            color: var(--sys-button-color);
+
+            .app__body & {
+                background: var(--button-bg);
+                color: var(--button-color);
+            }
+        }
+
+        // selected + hovering
+        &--is-selected:hover {
+            background: rgba(var(--sys-button-bg-rgb), 0.88);
+
+            .app__body & {
+                background: rgba(var(--button-bg-rgb), 0.88);
+            }
+        }
+
+        &:active {
+            background: rgba(var(--sys-button-bg-rgb), 0.16);
+
+            .app__body & {
+                background: rgba(var(--button-bg-rgb), 0.16);
+            }
+        }
+    }
+
+    .react-select-top {
+        .react-select__menu {
+            top: auto;
+            bottom: 100%;
+        }
+    }
+}

webapp/channels/src/sass/components/_remove-image.scss

@@ -0,0 +1,48 @@
+@charset 'UTF-8';
+
+.remove-image {
+    position: relative;
+    display: inline-block;
+}
+
+.remove-image__img {
+    display: flex;
+    overflow: hidden;
+    width: 128px;
+    height: 128px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid alpha-color($black, 0.15);
+    background: $white;
+    border-radius: 4px;
+
+    img {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
+
+.remove-image__btn {
+    position: absolute;
+    top: -8px;
+    right: -9px;
+    display: flex;
+    width: 24px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: alpha-color($black, 0.8);
+    border-radius: 40px;
+    color: white;
+    font-size: 20px;
+
+    &:hover {
+        background: $black;
+    }
+
+    span {
+        margin-left: 1px;
+        line-height: 0;
+    }
+}

webapp/channels/src/sass/components/_save-button.scss

@@ -0,0 +1,7 @@
+@charset 'UTF-8';
+
+.save-button {
+    .icon {
+        margin-right: 10px;
+    }
+}

webapp/channels/src/sass/components/_scrollbar.scss

@@ -0,0 +1,73 @@
+@charset 'UTF-8';
+
+::-webkit-scrollbar {
+    width: 6px;  // for vertical scrollbars
+    height: 6px; // for horizontal scrollbars
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0);
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: $border-rad * 2;
+}
+
+body {
+    &.app__body {
+        scrollbar-3dlight-color: #7d7e94;
+        scrollbar-arrow-color: #c1c1d1;
+        scrollbar-darkshadow-color: #2d2c4d;
+        scrollbar-face-color: rgba(var(--center-channel-bg-rgb), 0.1);
+        scrollbar-highlight-color: #7d7e94;
+        scrollbar-shadow-color: #2d2c4d;
+        scrollbar-track-color: rgba(var(--center-channel-bg-rgb), 0.1);
+    }
+
+    .ps {
+        > .ps__scrollbar-y-rail {
+            > .ps__scrollbar-y {
+                width: 6px !important;
+            }
+        }
+
+        &:hover {
+            > .ps__scrollbar-y-rail {
+                &:hover {
+                    background: transparent;
+                }
+            }
+        }
+    }
+}
+
+.scrollbar--horizontal,
+.scrollbar--vertical {
+    background-color: rgba(var(--sidebar-text-rgb), 0.32);
+    border-radius: 2px;
+}
+
+.scrollbar--vertical--RHS {
+    top: 2px;
+    right: 2px;
+    bottom: 2px;
+    margin-right: 3px;
+    border-radius: 3px;
+}
+
+.scrollbar--thumb--RHS {
+    background-color: rgba(var(--center-channel-color-rgb), 0.32);
+}
+
+.scrollbar--view {
+    .browser--ie & {
+        margin: 0 !important;
+        -ms-overflow-style: none;
+        overflow-x: hidden !important;
+
+        .scrollbar--vertical {
+            visibility: hidden;
+        }
+    }
+}

webapp/channels/src/sass/components/_search.scss

@@ -0,0 +1,459 @@
+@charset "utf-8";
+
+// global header styles
+.search-bar-container--global {
+    width: 100%;
+}
+
+.search-bar__container {
+    .channel-header__links {
+        .sidebar--right & {
+            line-height: 25px;
+        }
+    }
+
+    padding: 0 4px 0 8px;
+}
+
+.icon--rotate {
+    animation: spin 0.7s infinite linear;
+}
+
+.search-item-snippet {
+    @include clearfix;
+
+    text-overflow: ellipsis;
+
+    ul,
+    ol {
+        padding-left: 20px;
+    }
+}
+
+.search__font-icon {
+    position: absolute;
+    top: 0;
+    left: 4px;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    pointer-events: none;
+}
+
+.search__icon {
+    position: absolute;
+    top: 6px;
+    left: 9px;
+    fill: rgba(var(--center-channel-color-rgb), 0.56);
+    pointer-events: none;
+
+    svg {
+        width: 14px;
+        height: 14px;
+
+        body.enable-animations & {
+            transition: opacity $transition-quick ease-out;
+        }
+    }
+}
+
+.input-clear {
+    position: absolute;
+    top: 0;
+    right: 2px;
+    display: flex;
+    width: 2.4rem;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
+    cursor: pointer;
+    font-size: 16px;
+    visibility: hidden;
+
+    &:hover {
+        color: rgba(var(--center-channel-color-rgb), 0.72);
+    }
+
+    &:active {
+        color: v(center-channel-color);
+    }
+
+    &.visible {
+        visibility: visible;
+    }
+
+    body.enable-animations & {
+        transition: opacity $transition-quick ease-out;
+    }
+}
+
+.search__form {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    background: rgba(var(--sidebar-text-rgb), 0.08);
+    border-radius: 4px;
+
+    .searchTypeBadge {
+        position: relative;
+        left: 26px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2px 2px 2px 7px;
+        margin: 0 6px;
+        background: rgba(var(--sidebar-text-rgb), 0.08);
+        border-radius: 4px;
+        color: var(--sidebar-text);
+        font-size: 10px;
+        font-weight: 700;
+
+        .icon-close {
+            padding: 2px;
+            cursor: pointer;
+        }
+
+        &:hover {
+            background: rgba(v(button-bg-rgb), 0.16);
+        }
+    }
+
+    .search-bar {
+        width: 100%;
+        height: 28px;
+        padding: 3px 2.8rem 2px 3rem;
+        border: none;
+        background: transparent;
+        box-shadow: none;
+        color: rgba(var(--global-header-text-rgb), 0.64);
+        font-size: 12px;
+        line-height: 28px;
+        outline: none;
+
+        &::placeholder {
+            color: rgba(var(--global-header-text-rgb), 0.64);
+            opacity: 1;
+        }
+
+        &.a11y--focused {
+            box-shadow: none;
+        }
+    }
+
+    .search-bar__container & {
+        width: 180px;
+        height: 32px;
+        border: 1px solid rgba(var(--center-channel-color-rgb), 0.24);
+        margin: 16px 0 0;
+        border-radius: 4px;
+
+        .input-clear {
+            right: 4px;
+        }
+
+        &:hover {
+            border: 1px solid rgba(var(--center-channel-color-rgb), 0.4);
+        }
+
+        &--focused,
+        &--focused:hover {
+            padding: 0;
+            border: 2px solid v(button-bg);
+
+            .search__icon {
+                top: 6px;
+                left: 8px;
+            }
+
+            .input-clear {
+                right: 3px;
+            }
+        }
+    }
+
+    body.enable-animations .search-bar__container & {
+        transition-delay: 0s;
+        transition-duration: $transition-quick, 0.3s;
+        transition-property: border-color, width;
+        transition-timing-function: ease-in-out, ease-out;
+    }
+
+    .inner-wrap.move--left & {
+        width: 272px;
+    }
+
+    .LoadingSpinner {
+        position: absolute;
+        top: 4px;
+        right: 25px;
+        font-size: 1em;
+        opacity: 0.5;
+    }
+
+    // global header style adjustments
+    &:hover {
+        background: rgba(var(--sidebar-text-rgb), 0.16);
+    }
+
+    &.active {
+        background: rgba(var(--sidebar-text-rgb), 0.32);
+    }
+
+    &:focus-within {
+        background: var(--center-channel-bg);
+
+        .search__font-icon,
+        .input-clear-x {
+            color: rgba(var(--center-channel-color-rgb), 0.56);
+        }
+
+        .searchTypeBadge {
+            background: rgba(var(--button-bg-rgb), 0.08);
+            color: var(--button-bg);
+        }
+
+        .search-bar {
+            color: rgb(var(--center-channel-color-rgb));
+        }
+    }
+
+    .search-help-popover {
+        width: 432px;
+        max-width: 432px;
+    }
+
+    .search__font-icon,
+    .input-clear-x {
+        display: flex;
+        color: rgba(var(--global-header-text-rgb), 0.56);
+    }
+}
+
+.search-items-container {
+    position: relative;
+    height: calc(100% - 56px);
+    flex: 1 1 auto;
+    padding-top: 16px;
+    -webkit-overflow-scrolling: touch;
+
+    &.no-results {
+        display: flex;
+        padding-top: 0;
+    }
+}
+
+.search-items-container div.loading {
+    text-align: center;
+}
+
+.search-items-container img {
+    display: inline-block;
+}
+
+.search-results-header {
+    height: 44px;
+    padding: 0 10px;
+    border-bottom: $border-gray;
+    color: #999;
+    font-size: 1em;
+    font-weight: 400;
+    line-height: 44px;
+    text-transform: uppercase;
+}
+
+.search-item__container {
+    display: flex;
+    flex-direction: column;
+
+    .post {
+        padding: 1em 16px;
+        margin: 0;
+
+        &:first-child {
+            border: none;
+        }
+
+        &:hover {
+            .post__header {
+                padding-right: 105px;
+            }
+        }
+
+        .post__header {
+            padding-right: 70px;
+        }
+
+        .search-channel__name__container {
+            display: flex;
+            flex-direction: row;
+            align-items: baseline;
+            padding: 6px 0 12px;
+        }
+
+        .search-channel__name {
+            overflow: hidden;
+            flex-shrink: 1;
+            font-weight: 600;
+            opacity: 0.72;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .search-channel__archived {
+            flex-shrink: 0;
+            float: right;
+            opacity: 0.5;
+        }
+
+        .search-team__name {
+            overflow: hidden;
+            flex-shrink: 1;
+            padding: 0 8px;
+            border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.5);
+            margin: 0 0 0 8px;
+            font-size: 12px;
+            font-weight: 400;
+            opacity: 0.5;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .post-pre-header__icons-container {
+            width: 53px; // If the width of post__img changes, this needs to be adjusted accordingly
+            padding-right: 10px; // If the padding of post__img changes, this needs to be adjusted accordingly
+            margin-left: 0; // if left margin of post__content changes, this needs to be adjusted accordingly
+        }
+    }
+}
+
+.col__controls {
+    position: absolute;
+    top: -9px;
+    right: 0;
+    font-size: 13px;
+
+    a {
+        vertical-align: top;
+    }
+
+    .search-item__jump {
+        position: relative;
+        padding: 5px 4px 0;
+        border-radius: 4px;
+        color: rgba(var(--center-channel-color-rgb), 0.4);
+        font-size: 12px;
+        font-weight: 600;
+        text-decoration: none;
+    }
+}
+
+.search-item-time {
+    font-size: 0.9em;
+    opacity: 0.7;
+}
+
+.search-results-none {
+    padding: 10px;
+}
+
+.search-highlight {
+    background-color: $yellow;
+}
+
+.search-hint__title {
+    padding: 22px 24px;
+    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    margin: 0;
+    font-weight: bold;
+}
+
+.search-hint__suggestions-list {
+    padding: 8px 0;
+    margin: 0;
+    list-style-type: none;
+}
+
+.search-hint__suggestions-list__option {
+    display: flex;
+    box-sizing: border-box;
+    justify-content: left;
+    padding: 10px 24px;
+    color: var(--center-channel-color);
+    cursor: pointer;
+    text-align: left;
+
+    &.highlighted {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+}
+
+.search-hint__suggestion-list__flex-wrap {
+    width: 51px;
+}
+
+.search-hint__suggestion-list__label {
+    padding: 1px 5px;
+    background: rgba(var(--center-channel-color-rgb), 0.16);
+    border-radius: 4px;
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    text-transform: uppercase;
+}
+
+.search-hint__suggestion-list__value {
+    margin-left: 16px;
+}
+
+.search-hint__search-type-selector {
+    padding: 18px 24px 8px 24px;
+    font-size: 14px;
+    font-weight: 600;
+
+    .button-container {
+        display: flex;
+    }
+
+    button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 8px 16px;
+        border: 1px solid v(button-bg);
+        margin: 18px 8px 16px 0;
+        background: v(center-channel-bg);
+        border-radius: 4px;
+        color: v(button-bg);
+        font-size: 12px;
+        line-height: 1;
+
+        .icon {
+            margin-right: 6px;
+            font-size: 14px;
+        }
+
+        &:hover,
+        &.highlighted {
+            background: rgba(v(button-bg-rgb), 0.04);
+        }
+    }
+}
+
+.sidebar--right__subheader {
+    // Fighting specificity with _sidebar-right.scss (sidebar--right .sidebar--right__subheader ul)
+    ul.search-hint__suggestions-list {
+        padding: 10px 0;
+    }
+
+    .search-hint__suggestions-list__option:first-child {
+        padding-top: 10px;
+    }
+
+    .search-hint__suggestions-list__option:hover {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+}

webapp/channels/src/sass/components/_select.scss

@@ -0,0 +1,42 @@
+@charset 'UTF-8';
+
+.select-suggestion-container {
+    position: relative;
+    margin: 8px 8px 0 0;
+
+    &:hover {
+        &::after {
+            opacity: 0.6;
+        }
+    }
+
+    &::after {
+        position: absolute;
+        top: 8px;
+        right: 1rem;
+        display: inline-block;
+        content: '\F107';
+        font: normal normal normal 14px/1 FontAwesome;
+        font-size: 16px;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        opacity: 0.4;
+        pointer-events: none;
+        text-rendering: auto;
+        transition: opacity 0.15s ease;
+    }
+
+    .form-control {
+        max-width: 100%;
+        height: 32px;
+        padding-right: 3rem;
+        border-radius: 3px;
+        box-shadow: unset;
+        cursor: pointer;
+        font-size: 13px;
+    }
+
+    .suggestion-list__content {
+        border-radius: 3px 3px 3px 0;
+    }
+}

webapp/channels/src/sass/components/_sidebar-card.scss

@@ -0,0 +1,31 @@
+.post-card--info {
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px;
+    border-top: $border-gray;
+    background: var(--center-channel-bg);
+    white-space: nowrap;
+
+    .post-card--post-by {
+        padding-right: 10px;
+    }
+
+    .status-wrapper {
+        height: auto;
+    }
+
+    .more-modal__image {
+        width: 20px;
+        height: 20px;
+        margin: 0 2px 0 4px;
+    }
+
+    .user-popover {
+        font-weight: 600;
+    }
+}

webapp/channels/src/sass/components/_sidebar-header-dropdown-button.scss

@@ -0,0 +1,58 @@
+.SidebarHeaderDropdownButton {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    .header__info {
+        position: relative;
+        width: 100%;
+        flex-grow: 1;
+        padding: 3px 15px 0 8px;
+        color: $white;
+
+        .team__name {
+            overflow: hidden;
+            font-size: 14px;
+            font-weight: 600;
+            text-decoration: none;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .user__name {
+            font-weight: 400;
+        }
+    }
+
+    .unread-badge {
+        position: absolute;
+        right: 2px;
+        bottom: 2px;
+        width: 8px;
+        height: 8px;
+        background: #f74343;
+        border-radius: 50%;
+    }
+
+    .unread-badge-addon {
+        position: absolute;
+        top: 8px;
+        right: 4px;
+        width: 12px;
+        height: 12px;
+        background-color: var(--sidebar-header-bg);
+        border-radius: 32px;
+    }
+
+    .menu-icon {
+        fill: $white;
+        opacity: 0.8;
+    }
+
+    &:hover {
+        .user__name,
+        .menu-icon {
+            opacity: 1;
+        }
+    }
+}

webapp/channels/src/sass/components/_sidebar-header.scss

@@ -0,0 +1,24 @@
+.SidebarHeader {
+    display: flex;
+    padding: 0;
+    cursor: pointer;
+
+    .MenuWrapper {
+        height: 100%;
+    }
+
+    .MenuWrapper:first-child {
+        width: 100%;
+        height: 100%;
+    }
+
+    .status-selector {
+        margin: 3px 8px 0 6px;
+    }
+
+    .sidebar-header-dropdown__icon {
+        svg {
+            fill: var(--sidebar-header-text-color);
+        }
+    }
+}

webapp/channels/src/sass/components/_single_image_view.scss

@@ -0,0 +1,77 @@
+.file-view--single {
+    margin: 0;
+
+    .file__image {
+        position: relative;
+
+        .image-header {
+            // this and the following hover block need to use such an excessive
+            // number of selectors to override the specificity in _files.scss
+            .image-name,
+            button.single-image-view__toggle {
+                color: rgba(var(--center-channel-color-rgb), 0.56);
+            }
+
+            &:hover .image-name,
+            &:hover button.single-image-view__toggle {
+                color: rgba(var(--center-channel-color-rgb), 0.72);
+            }
+
+            button.single-image-view__toggle {
+                display: inline-block;
+                padding: 0;
+                border: none;
+                background: transparent;
+                border-radius: 4px;
+                font-size: 18px;
+                line-height: 18px;
+
+                .icon {
+                    width: 18px;
+                    height: 18px;
+
+                    &::before {
+                        margin-right: 0;
+                        margin-left: 0;
+                    }
+                }
+            }
+
+            &--expanded {
+                position: absolute;
+                z-index: 3;
+                top: -6px;
+                left: -2px;
+
+                button.single-image-view__toggle {
+                    display: none;
+                    width: 24px;
+                    height: 24px;
+                    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+                    background-color: var(--center-channel-bg);
+                    border-radius: 16px;
+                    box-shadow: $elevation-1;
+                    line-height: 20px;
+
+                    &:hover {
+                        border: 1px solid rgba(var(--center-channel-color-rgb), 0.24);
+                        box-shadow: $elevation-2;
+                    }
+                }
+            }
+        }
+
+        &:hover .image-header--expanded button.single-image-view__toggle {
+            display: block;
+            color: rgba(var(--center-channel-color-rgb), 0.56);
+        }
+
+        .image-container {
+            margin: 5px 0;
+
+            &.image-permalink {
+                margin: 5px 0 0;
+            }
+        }
+    }
+}

webapp/channels/src/sass/components/_spinner-button.scss

@@ -0,0 +1,7 @@
+@charset 'UTF-8';
+
+.spinner-button__gif {
+    width: 15px;
+    height: 15px;
+    margin-top: 2px;
+}

webapp/channels/src/sass/components/_status-icon.scss

@@ -0,0 +1,240 @@
+@charset "utf-8";
+
+.status-wrapper {
+    position: relative;
+    display: inline-flex;
+    height: 32px;
+    align-items: center;
+    align-self: center;
+
+    .sidebar--left & {
+        width: 36px;
+        height: 36px;
+
+        .status {
+            right: -6px;
+            bottom: -5px;
+            width: 19px;
+            height: 19px;
+
+            &.status-edit {
+                .fa {
+                    top: 4px;
+                }
+            }
+
+            .fa {
+                position: relative;
+                top: 2px;
+            }
+
+            .icon__container {
+                &::after {
+                    position: absolute;
+                    top: 4px;
+                    left: 4px;
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 20px;
+                    content: '';
+                }
+            }
+
+            svg {
+                position: relative;
+                z-index: 1;
+                top: 0;
+                left: 0;
+                width: 13px;
+                height: 13px;
+                max-height: initial;
+
+                &.offline--icon,
+                .offline--icon {
+                    fill: var(--offline-indicator);
+                }
+            }
+        }
+    }
+
+    .status {
+        position: absolute;
+        top: auto;
+        right: -3px;
+        bottom: -4px;
+        width: 15px;
+        height: 15px;
+        margin: 0;
+        background: var(--center-channel-bg);
+        border-radius: 100px;
+        line-height: 0;
+        visibility: visible;
+
+        .modal & {
+            bottom: -6px;
+        }
+
+        &.status-edit {
+            text-align: center;
+            visibility: hidden;
+
+            i {
+                position: relative;
+                top: 4px;
+                font-size: 10px;
+                opacity: 1;
+            }
+        }
+
+        svg {
+            position: relative;
+            top: 2px;
+            max-height: 11px;
+        }
+
+        .dnd--icon {
+            fill: var(--dnd-indicator);
+        }
+
+        .online--icon {
+            fill: var(--online-indicator);
+        }
+
+        .away--icon {
+            fill: var(--away-indicator);
+        }
+
+        .offline--icon {
+            fill: var(--offline-indicator);
+        }
+    }
+}
+
+.status-selector {
+    .status {
+        body.enable-animations & {
+            transition-delay: 0s;
+            transition-duration: $transition-quick;
+            transition-property: opacity, visibility;
+            transition-timing-function: ease-out, step-start;
+        }
+
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .status-edit {
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    &:hover {
+        .status {
+            opacity: 0;
+            visibility: hidden;
+        }
+
+        .status-edit {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+}
+
+.status {
+    position: relative;
+    top: 2px;
+    display: inline-block;
+    width: 15px;
+    margin: 0 7px 0 1px;
+
+    &.status--group {
+        top: 0;
+        width: 15px;
+        height: 15px;
+        margin: 0 9px 0 -1px;
+        border-radius: 2px;
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 14px;
+        text-align: center;
+    }
+
+    svg {
+        max-height: 14px;
+        backface-visibility: hidden;
+    }
+
+    i,
+    path,
+    ellipse {
+        &.online--icon,
+        &.away--icon,
+        &.dnd--icon {
+            opacity: 1;
+        }
+    }
+
+    .fa-lock {
+        margin-left: 1px;
+    }
+
+    .fa-globe {
+        position: relative;
+        top: -1px;
+    }
+}
+
+.status-dropdown-menu {
+    .online--icon > svg {
+        fill: var(--online-indicator);
+    }
+
+    .away--icon > svg {
+        fill: var(--away-indicator);
+    }
+
+    .dnd--icon > svg {
+        fill: var(--dnd-indicator);
+    }
+
+    .offline--icon {
+        fill: var(--offline-indicator);
+    }
+}
+
+.app__body {
+    .status {
+        &.status--online {
+            color: var(--online-indicator);
+        }
+
+        &.status--away {
+            color: var(--away-indicator);
+        }
+
+        .dnd--icon {
+            fill: var(--dnd-indicator);
+        }
+
+        .online--icon {
+            fill: var(--online-indicator);
+        }
+
+        .away--icon {
+            fill: var(--away-indicator);
+        }
+
+        .offline--icon {
+            fill: var(--offline-indicator);
+        }
+    }
+
+    .sidebar--left {
+        .status {
+            .offline--icon {
+                fill: var(--offline-indicator);
+            }
+        }
+    }
+}

webapp/channels/src/sass/components/_suggestion-list.scss

@@ -0,0 +1,354 @@
+@charset "utf-8";
+
+.app__body {
+    .suggestion--selected {
+        background-color: rgba(var(--center-channel-color-rgb), 0.08);
+    }
+}
+
+.suggestion-list {
+    z-index: 100;
+    width: 100%;
+
+    .post-right__scroll & {
+        margin: 0;
+    }
+
+    .badge {
+        position: absolute;
+        top: 8px;
+        right: 10px;
+        background: rgba(var(--center-channel-color-rgb), 0.48);
+        color: var(--center-channel-bg);
+        font-size: 10px;
+        font-weight: 700;
+    }
+
+    .LoadingSpinner {
+        position: relative;
+        display: flex;
+        height: 40px;
+        align-items: center;
+        justify-content: center;
+        margin: 0 24px;
+    }
+
+    .shared-channel-icon {
+        width: 16px;
+        height: 16px;
+        margin-left: 8px;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        font-size: 16px;
+        line-height: 16px;
+
+        &::before {
+            margin: 0;
+        }
+    }
+}
+
+.suggestion-list--top {
+    position: absolute;
+    bottom: 100%;
+}
+
+.suggestion-list--bottom {
+    position: absolute;
+    top: 0;
+}
+
+.suggestion-list__content {
+    width: 496px;
+    max-width: 100%;
+    max-height: 292px;
+    padding-bottom: 12px;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    background-color: v(center-channel-bg);
+    border-radius: 4px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track {
+        width: 0;
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border: 1px solid v(center-channel-bg);
+        background-color: rgba(var(--center-channel-color-rgb), 0.24) !important;
+        border-radius: 4px;
+    }
+
+    .modal & {
+        width: 100%;
+        max-height: 205px;
+    }
+}
+
+.slash-command {
+    display: flex;
+    align-items: flex-start;
+    padding: 1rem 2.4rem;
+
+    &:first-child {
+        margin: 12px 0 0 0;
+    }
+}
+
+.slash-command__icon {
+    display: flex;
+    width: 3.2rem;
+    height: 3.2rem;
+    flex: 0 0 3.2rem;
+    align-items: center;
+    justify-content: center;
+    background: rgba(var(--center-channel-color-rgb), 0.08);
+    border-radius: 4px;
+    font-size: 20px;
+    font-weight: 600;
+
+    span {
+        opacity: 0.56;
+    }
+}
+
+.slash-command__info {
+    margin-left: 12px;
+    line-height: 1;
+}
+
+.slash-command__desc {
+    margin: 2px 0 0;
+    font-size: 12px;
+    line-height: 1.6;
+    opacity: 0.56;
+}
+
+.suggestion-list__content--top {
+    position: absolute;
+    bottom: 0;
+}
+
+.suggestion-list__content--bottom {
+    position: absolute;
+    top: 0;
+}
+
+.suggestion-list__divider {
+    position: relative;
+    display: flex;
+    height: 2.8rem;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 0 0 2.4rem;
+    margin: 1.2rem 0 0 0;
+    color: rgba(var(--center-channel-color-rgb), 0.6);
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: uppercase;
+
+    &:first-child {
+        &::before {
+            display: none;
+        }
+    }
+
+    &::before {
+        position: absolute;
+        top: -7px;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        content: '';
+    }
+}
+
+.suggestion-list__no-results {
+    position: relative;
+    margin: 7px 10px 2px;
+    line-height: 21px;
+
+    >span {
+        position: relative;
+        z-index: 5;
+        display: inline-block;
+        padding: 0 10px 0 5px;
+        font-size: 0.9em;
+    }
+}
+
+.suggestion-list__item {
+    position: relative;
+    z-index: 101;
+    display: flex;
+    width: 100%;
+    height: 4rem;
+    align-items: center;
+    padding: 0 2.4rem;
+    margin: 0;
+    cursor: pointer;
+    font-size: inherit;
+    line-height: 20px;
+    white-space: nowrap;
+
+    .suggestion-list__ellipsis {
+        display: flex;
+        overflow: hidden;
+        max-width: 89%;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        gap: 8px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        .suggestion-list__main {
+            overflow: hidden;
+            width: 100%;
+            color: rgba(var(--center-channel-color-rgb), 1);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            .suggestion-list__desc {
+                margin-left: 8px;
+                color: rgba(var(--center-channel-color-rgb), 0.56);
+            }
+        }
+    }
+
+    .suggestion-list__flex {
+        display: flex;
+        width: 100%;
+        max-width: 100%;
+        align-items: center;
+
+        .suggestion-list__main {
+            width: unset;
+            max-width: 70%;
+        }
+
+        .badge {
+            position: unset;
+            display: flex;
+            width: 20px;
+            height: 16px;
+            margin-left: 8px;
+        }
+    }
+
+    .suggestion-list_unread-mentions {
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        justify-content: flex-start;
+
+        &.position-end {
+            justify-content: flex-end;
+        }
+    }
+
+    .suggestion-list__unread {
+        font-weight: bold;
+    }
+
+    .suggestion-list__icon {
+        display: inline-flex;
+        flex: 0 0 1.6rem;
+        align-items: center;
+        justify-content: center;
+        fill: v(center-channel-color);
+        opacity: 0.56;
+
+        &--standard {
+            width: 2rem;
+            height: 2rem;
+            flex: 0 0 2.4rem;
+            margin: 0 12px 0 0;
+            font-size: 1.2rem;
+        }
+
+        &--large {
+            width: 2.4rem;
+            height: 2.4rem;
+            flex: 0 0 2.4rem;
+            margin: 0 12px 0 0;
+            font-size: 2rem;
+        }
+
+        .status--group {
+            display: flex;
+            width: 1.8rem;
+            height: 1.8rem;
+            align-items: center;
+            justify-content: center;
+            margin: 0;
+            background-color: rgba(var(--center-channel-color-rgb), 0.2);
+        }
+    }
+
+    .shared-user-icon {
+        width: 16px;
+        height: 16px;
+        margin-left: 8px;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        font-size: 16px;
+        line-height: 16px;
+
+        &::before {
+            margin: 0;
+        }
+    }
+
+    .Avatar {
+        display: block;
+        margin-right: 12px;
+        text-align: center;
+    }
+
+    .status-wrapper {
+        overflow: visible;
+        height: 24px;
+        margin-top: 4px;
+        margin-right: 12px;
+
+        .Avatar.Avatar-sm {
+            margin: 0;
+        }
+
+        .status {
+            right: -4px;
+            bottom: -4px;
+
+            svg {
+                left: 2px;
+                max-width: 11px;
+            }
+        }
+    }
+
+    .suggestion-list__team-name {
+        position: absolute;
+        right: 20px;
+        overflow: hidden;
+        max-width: 20%;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .Tag {
+        flex-shrink: 0;
+    }
+}
+
+.suggestion-list__group-count {
+    display: flex;
+    flex-grow: 1;
+    justify-content: end;
+
+    @media screen and (max-width: 480px) {
+        .Badge__box span {
+            display: none;
+        }
+    }
+}

webapp/channels/src/sass/components/_system-notice.scss

@@ -0,0 +1,81 @@
+@charset 'UTF-8';
+
+.system-notice {
+    position: absolute;
+    z-index: 9999;
+    right: 12px;
+    bottom: 12px;
+    width: 280px;
+    padding: 18px 20px 0;
+    border: 1px solid alpha-color($black, 0.15);
+    background-color: var(--center-channel-bg);
+    border-radius: 4px;
+    box-shadow: 0 20px 30px alpha-color($black, 0.07), 0 14px 20px alpha-color($black, 0.07);
+}
+
+.system-notice__header {
+    display: flex;
+    align-items: flex-start;
+}
+
+.system-notice__logo {
+    height: 36px;
+
+    svg {
+        width: 36px;
+        height: 36px;
+        fill: rgb(22, 109, 224);
+    }
+}
+
+.system-notice__title {
+    overflow: hidden;
+    flex: 10 1 auto;
+    padding: 3px 0 0 8px;
+    line-height: 16px;
+    opacity: 0.7;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.system-notice__info {
+    margin-bottom: 12px;
+    font-size: 12px;
+    opacity: 0.5;
+
+    .fa {
+        margin-right: 4px;
+    }
+}
+
+.system-notice__body {
+    padding: 18px 0 16px;
+    line-height: 16px;
+    opacity: 0.7;
+}
+
+.system-notice__footer {
+    display: flex;
+    border-top: 1px solid alpha-color($black, 0.2);
+    margin: 0 -20px;
+
+    .btn {
+        overflow: hidden;
+        flex: 1;
+        text-overflow: ellipsis;
+
+        &:hover {
+            background: rgb(22, 109, 224);
+            color: $white;
+        }
+
+        &:first-child {
+            border-radius: 0 0 0 4px;
+        }
+
+        &:last-child {
+            border-left: 1px solid alpha-color($black, 0.2);
+            border-radius: 0 0 4px 0;
+        }
+    }
+}

webapp/channels/src/sass/components/_team-channel-settings.scss

@@ -0,0 +1,95 @@
+@charset 'UTF-8';
+
+span.greyed-out {
+    opacity: 0.4;
+}
+
+.row-content {
+    opacity: 0.8;
+}
+
+.groups-list-no-padding {
+    div.group-row {
+        height: 40px;
+        padding-left: 20px;
+    }
+
+    div.groups-list--header {
+        div.group-name.adjusted {
+            margin-left: 20px;
+        }
+
+        div.group-description.adjusted {
+            margin-right: 22px;
+        }
+
+        div.group-description.group-description-adjusted {
+            margin-right: 22px;
+        }
+
+        div.group-name.group-name-adjusted {
+            margin-left: 22px;
+        }
+    }
+}
+
+.help-text-small.help-text-no-padding {
+    margin-top: 0;
+}
+
+.help-text-small.help-text-single-line {
+    height: 17px;
+}
+
+.team-descr-list-column {
+    max-width: 440px;
+}
+
+.large-team-image-col {
+    max-width: 129px;
+    padding-right: 20px;
+
+    .TeamIcon {
+        margin-right: 12px;
+        background: rgba(0, 0, 0, 0.12);
+    }
+}
+
+.team-desc-col,
+.channel-desc-col {
+    line-height: 20px;
+}
+
+.center-row > div {
+    display: inline-block;
+    float: none;
+    vertical-align: middle;
+}
+
+.row-bottom-padding {
+    padding-bottom: 12px;
+}
+
+.csvDomains {
+    padding-bottom: 4px;
+
+    span {
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 17px;
+    }
+}
+
+.help-text-small {
+    max-width: 668px;
+    font-size: 12px;
+    line-height: 17px;
+    opacity: 0.6;
+}
+
+#teams,
+#team_profile,
+#channels,
+#channel_profile {
+    margin-top: 0;
+}

webapp/channels/src/sass/components/_toggle.scss

@@ -0,0 +1,147 @@
+// Based on https://codepen.io/aanjulena/pen/ZLZjzV
+// Colors
+$brand-primary: #2a9fd8;
+$gray: #6b7381;
+$gray-light: lighten($gray, 15%);
+$gray-lighter: lighten($gray, 30%);
+
+// Button Colors
+$btn-default-color: $gray;
+$btn-default-bg: $gray-lighter;
+
+// Toggle Sizes
+$toggle-default-size: 1.5rem;
+$toggle-default-margin: 4rem;
+$toggle-default-font-size: 0.75rem;
+
+// Mixin for Switch Colors
+// Variables: $color, $bg, $active-bg
+@mixin toggle-color($color: $btn-default-color, $bg: $btn-default-bg, $active-bg: $brand-primary) {
+    background: $bg;
+    color: $color;
+
+    &.active {
+        background-color: $active-bg;
+    }
+}
+
+// Mixin for Default Switch Styles
+// Variables: $size, $margin, $color, $bg, $active-bg, $font-size
+@mixin toggle-mixin($size: $toggle-default-size, $margin: $toggle-default-margin, $font-size: $toggle-default-font-size) {
+    $handlePosition: calc($size/7);
+    $handleSize: calc($size - (2 * $handlePosition));
+
+    position: relative;
+    min-width: calc($size * 2);
+    height: $size;
+    // color: $color;
+    // background: $bg;
+    padding: 0;
+    border: none;
+    border-radius: $size;
+    float: right;
+
+    &:focus,
+    &.focus {
+        &,
+        &.active {
+            outline: none;
+        }
+    }
+
+    > .handle {
+        position: absolute;
+        top: $handlePosition;
+        left: $handlePosition;
+        width: $handleSize;
+        height: $handleSize;
+        background: #fff;
+        border-radius: 1rem;
+        transition: left 0.25s;
+    }
+
+    &.active {
+        transition: background-color 0.25s;
+
+        > .handle {
+            right: $handlePosition;
+            left: inherit;
+            transition: left 0.25s;
+        }
+    }
+}
+
+// Apply Mixin to different sizes & colors
+.btn-toggle {
+    @include toggle-color;
+
+    &.disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    &.btn-lg {
+        @include toggle-mixin($size: 2.8rem, $font-size: 1rem, $margin: 5rem);
+    }
+
+    &.btn-sm {
+        @include toggle-mixin($font-size: 0.55rem, $margin: 0.5rem);
+    }
+
+    &.btn-xs {
+        @include toggle-mixin($size:1rem,$margin:0);
+    }
+
+    .bg-text {
+        color: #fff;
+        font-size: 1.4rem;
+        font-weight: 600;
+
+        &.off {
+            padding: 0 1.6rem 0 3.4rem;
+        }
+
+        &.on {
+            padding: 0 3.4rem 0 1.6rem;
+        }
+    }
+}
+
+.btn-toggle-primary {
+    @include toggle-color(
+        $color: rgb(var(--button-color-rgb)),
+        $bg: rgba(var(--center-channel-color-rgb), 0.32),
+        $active-bg: rgb(var(--button-bg-rgb)),
+    );
+
+    &.disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    &.btn-lg {
+        @include toggle-mixin($size: 2.8rem, $font-size: 1rem, $margin: 5rem);
+    }
+
+    &.btn-sm {
+        @include toggle-mixin($font-size: 0.55rem, $margin: 0.5rem);
+    }
+
+    &.btn-xs {
+        @include toggle-mixin($size:1rem,$margin:0);
+    }
+
+    .bg-text {
+        color: #fff;
+        font-size: 1.4rem;
+        font-weight: 600;
+
+        &.off {
+            padding: 0 1.6rem 0 3.4rem;
+        }
+
+        &.on {
+            padding: 0 3.4rem 0 1.6rem;
+        }
+    }
+}

webapp/channels/src/sass/components/_tooltip.scss

@@ -0,0 +1,63 @@
+@charset 'UTF-8';
+
+.tooltip {
+    max-width: 220px;
+    font-family: inherit;
+    pointer-events: none;
+    word-wrap: break-word;
+
+    &#announcement-bar__tooltip {
+        pointer-events: auto;
+    }
+
+    .tooltip-inner {
+        max-width: 100%;
+        padding: 4px 8px;
+        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 18px;
+        text-align: center;
+        word-break: break-word;
+    }
+
+    &.text-nowrap {
+        .tooltip-inner {
+            white-space: nowrap;
+        }
+    }
+
+    .tooltip-help {
+        color: rgba(255, 255, 255, 0.64);
+    }
+}
+
+.floating-ui-tooltip {
+    max-width: 220px;
+    padding: 4px 8px;
+    background: #000;
+    border-radius: 4px;
+    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 18px;
+    opacity: 0;
+    pointer-events: none;
+    text-align: center;
+    transition: opacity 0.15s linear;
+    word-break: break-word;
+
+    &.floating-ui-tooltip--visible {
+        opacity: 0.9;
+        transition: opacity 0.15s linear;
+    }
+}
+
+.floating-ui-tooltip-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #000;
+    transform: rotate(45deg);
+}

webapp/channels/src/sass/components/_tutorial.scss

@@ -0,0 +1,584 @@
+@charset "UTF-8";
+
+@import "sass/utils/variables";
+@import "sass/utils/functions";
+
+$backdrop-index: 999;
+$tip-index: 1000;
+
+.tutorial-tip {
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        &__title {
+            flex: auto;
+            order: 0;
+            margin: 0;
+            font-family: inherit;
+            font-size: 1.4rem;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 2rem;
+        }
+
+        &__close {
+            display: flex;
+            overflow: hidden;
+            width: 3.2rem;
+            height: 3.2rem;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            border: unset;
+            margin-left: 1.2rem;
+            background: transparent;
+            border-radius: 4px;
+            color: rgba(var(--center-channel-color-rgb), 0.56);
+            font-weight: 600;
+
+            &:hover {
+                background: rgba(var(--center-channel-color-rgb), 0.08);
+            }
+
+            &.active {
+                background: rgba(var(--center-channel-color-rgb), 0.08);
+            }
+
+            i {
+                font-size: 1.8rem;
+                line-height: 1.8rem;
+
+                ::before {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    &__body {
+        display: flex;
+        flex-direction: column;
+        margin-top: 0.6rem;
+
+        p {
+            margin: 0 0 0.8rem;
+            font-size: 1.4rem;
+            line-height: 2rem;
+
+            &:last-of-type {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &__btn-ctr {
+        display: flex;
+        flex-grow: 1;
+        justify-content: flex-end;
+    }
+
+    &__btn {
+        display: inline-flex;
+        height: 3.2rem;
+        align-items: center;
+        padding: 10px 16px;
+        border: none;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 12px;
+    }
+
+    &__confirm-btn {
+        background: var(--button-bg);
+        color: var(--button-color);
+
+        &:hover:not(.disabled) {
+            background:
+                linear-gradient(
+                    0deg,
+                    rgba(var(--center-channel-color-rgb), 0.16),
+                    rgba(var(--center-channel-color-rgb), 0.16)
+                ),
+                var(--button-bg);
+        }
+
+        &:active {
+            background:
+                linear-gradient(
+                    0deg,
+                    rgba(var(--center-channel-color-rgb), 0.32),
+                    rgba(var(--center-channel-color-rgb), 0.32)
+                ),
+                var(--button-bg);
+        }
+
+        &:focus {
+            box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
+        }
+
+        .icon-chevron-right::before {
+            margin-right: -7px;
+        }
+    }
+
+    &__cancel-btn {
+        display: inline-flex;
+        align-items: center;
+        margin-right: 4px;
+        background: rgba(var(--button-bg-rgb), 0.08);
+        border-radius: 4px;
+        color: var(--button-bg);
+        text-decoration: none;
+
+        &:hover {
+            background: rgba(var(--button-bg-rgb), 0.04);
+        }
+
+        &:active {
+            background: rgba(var(--button-bg-rgb), 0.08);
+        }
+
+        &:focus {
+            box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
+        }
+
+        .icon-chevron-left::before {
+            margin-left: -7px;
+        }
+    }
+
+    &__circles-ctr {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    &__circular-ring {
+        position: relative;
+        display: flex;
+        width: 12px;
+        height: 12px;
+        align-items: center;
+        justify-content: center;
+        margin-right: 4px;
+        background: transparent;
+        border-radius: 50%;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    &__circular-ring-active {
+        background: rgba(var(--button-bg-rgb), 0.16);
+    }
+
+    &__circle {
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        width: 6px;
+        height: 6px;
+        background: rgba(var(--button-bg-rgb), 0.32);
+        border-radius: 6px;
+
+        &.active {
+            background: rgba(var(--button-bg-rgb), 1);
+        }
+    }
+
+    &__footer {
+        display: flex;
+        flex-direction: column;
+        margin-top: 2.4rem;
+
+        &-buttons {
+            display: flex;
+            align-items: center;
+            justify-content: start;
+        }
+    }
+
+    &__opt {
+        align-self: flex-end;
+        margin-top: 1.2rem;
+        font-size: 12px;
+
+        span {
+            opacity: 0.9;
+        }
+    }
+}
+
+.tip-backdrop {
+    position: absolute;
+    z-index: $backdrop-index;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: alpha-color($black, 0.5);
+}
+
+.tip-overlay {
+    position: absolute;
+    z-index: $tip-index;
+    width: 32rem;
+    padding: 1.8rem 2.4rem 2.4rem;
+    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    background: var(--center-channel-bg);
+    border-radius: 4px;
+    filter: drop-shadow(0 12px 32px rgba($black, 0.12));
+
+    .arrow {
+        position: absolute;
+        left: 24px;
+        display: block;
+        width: 1.7rem;
+        height: 1.7rem;
+        border-width: 1px 0 0 1px;
+        border-style: solid;
+        border-color: rgba(var(--center-channel-color-rgb), 0.16);
+        background: var(--center-channel-bg);
+        transform: rotate(-45deg);
+    }
+
+    .svg-wrapper {
+        display: flex;
+
+        svg {
+            margin: 0 auto;
+        }
+    }
+
+    .handSvg.svg-wrapper {
+        margin: 20px 0 30px 0;
+    }
+
+    &.tip-overlay--sidebar {
+        margin: 154px 0 0 6px;
+
+        .tutorial__footer {
+            position: absolute;
+            bottom: 20px;
+            left: 0;
+            width: 100%;
+            padding: 0 20px;
+        }
+
+        .arrow {
+            top: 32px;
+            left: -9px;
+            margin-top: -10px;
+        }
+
+        &.first-channel {
+            margin-top: 131px;
+        }
+    }
+
+    &.tip-overlay--header--left {
+        margin: 10px 0 0 7px;
+
+        .arrow {
+            top: 34px;
+            left: -9px;
+        }
+
+        &.tip-overlay--header--heading {
+            .arrow {
+                top: 40px;
+            }
+        }
+    }
+
+    &.tip-overlay--header--bottom {
+        margin-top: -10px;
+
+        .arrow {
+            top: -9px;
+            left: 50%;
+            margin-left: -10px;
+        }
+    }
+
+    &.tip-overlay--start-trial {
+        margin-top: 100px;
+        margin-left: 5px;
+        box-shadow: var(--elevation-2);
+
+        .arrow {
+            top: 25px;
+            left: -10px;
+            border-right-color: var(--center-channel-bg);
+            border-left-width: 0;
+        }
+    }
+
+    &.tip-overlay--chat {
+        width: 40.8rem;
+        margin-top: -7px;
+        box-shadow: var(--elevation-2);
+
+        .arrow {
+            bottom: -10px;
+            left: calc(50% - 7px);
+            transform: rotate(-135deg);
+        }
+    }
+
+    &.tip-overlay--add-channels {
+        margin-left: 6px;
+
+        .arrow {
+            top: 81px;
+            left: -9px;
+        }
+
+        &.tip-overlay--top-row-placement {
+            .arrow {
+                top: 41px;
+            }
+        }
+    }
+
+    &.tip-overlay--threads-welcome {
+        margin: 85px 0 0 6px;
+
+        .arrow {
+            top: 24px;
+            left: -9px;
+        }
+    }
+
+    &.tip-overlay--threads-list {
+        margin: 99px 0 0 6px;
+
+        .arrow {
+            top: 24px;
+            left: -9px;
+        }
+    }
+
+    &.tip-overlay--threads-unread {
+        margin: 6px 0 0 126px;
+
+        .arrow {
+            top: -9px;
+            left: 24px;
+            transform: rotate(45deg);
+        }
+    }
+
+    &.tip-overlay--threads-pane {
+        margin: 37px 0 0 -6px;
+
+        .arrow {
+            top: 24px;
+            right: -9px;
+            left: unset;
+            transform: rotate(135deg);
+        }
+    }
+
+    &.tip-overlay--product-switcher {
+        margin-top: 6px;
+        margin-left: 4px;
+
+        .arrow {
+            top: -9px;
+            left: 24px;
+            transform: rotate(45deg);
+        }
+    }
+
+    &.tip-overlay--settings {
+        margin: 7px 0 0 -20px;
+
+        .arrow {
+            top: -9px;
+            right: 24px;
+            left: unset;
+            transform: rotate(45deg);
+        }
+    }
+}
+
+.tip-button {
+    position: relative;
+    z-index: 998;
+    top: -10px;
+    right: -10px;
+    cursor: pointer;
+}
+
+.tip-div {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    &.tip-overlay--chat {
+        right: unset;
+        left: 0;
+    }
+
+    &.tip-overlay--start-trial {
+        top: 15px;
+        right: -15px;
+        left: unset;
+    }
+
+    &.tip-overlay--header {
+        top: 21px;
+        right: 2px;
+
+        .tip-button {
+            opacity: 0.8;
+        }
+    }
+
+    &.tip-overlay--header--left {
+        // needs to be over the top of the dropdown trigger
+        z-index: 1;
+        top: 8px;
+        right: 14px;
+        padding: 0 0 12px 12px;
+
+        &.tip-overlay--header--heading {
+            top: 0;
+            right: -6px;
+            padding: 0 0 12px 12px;
+        }
+    }
+
+    &.tip-overlay--actions {
+        margin-top: -7px;
+        margin-right: 8px;
+    }
+
+    &.tip-overlay--sidebar {
+        top: 10px;
+        right: 10px;
+    }
+
+    &.tip-overlay--add-channels {
+        top: -6px;
+        right: -13px;
+        padding: 0 8px 24px 24px;
+        cursor: pointer;
+    }
+
+    &.tip-overlay--threads-welcome {
+        top: 10px;
+        right: 5px;
+        padding: 0 8px 24px 24px;
+        cursor: pointer;
+    }
+
+    &.tip-overlay--threads-list {
+        top: 58px;
+        right: -2px;
+        padding: 0 8px 24px 24px;
+        cursor: pointer;
+    }
+
+    &.tip-overlay--threads-unread {
+        top: 35px;
+        right: 24px;
+        padding: 0 8px 24px 24px;
+        cursor: pointer;
+    }
+
+    &.tip-overlay--threads-pane {
+        top: 25px;
+        right: unset;
+        left: 4px;
+        cursor: pointer;
+    }
+
+    &.tip-overlay--product-switcher {
+        z-index: $backdrop-index + 1;
+        right: unset;
+        padding: 16px 0 0 20px;
+        margin: 0;
+        cursor: pointer;
+
+        .arrow {
+            top: -13px;
+            right: 44px;
+        }
+    }
+
+    &.tip-overlay--settings {
+        // needs to be over:
+        // the highest .channel-header setting
+        // the tip backdrop because it spills over the highlighted punchout
+        // needs to be underneath the tip.
+        z-index: $backdrop-index + 1;
+        top: 23px;
+        right: 38px;
+        padding: 10px;
+        margin: 0;
+    }
+}
+
+body.announcement-bar--fixed {
+    .tip-overlay {
+        &.tip-overlay--add-channels {
+            margin-top: $announcement-bar-height;
+        }
+
+        &.tip-overlay--header--left {
+            margin-top: 10px + $announcement-bar-height;
+        }
+    }
+}
+
+// Mobile view
+@media screen and (max-width: 768px) {
+    .tip-div {
+        &.tip-overlay--chat {
+            left: calc(50% - 4px);
+        }
+
+        &.tip-overlay--sidebar,
+        &.tip-overlay--threads-welcome {
+            top: 17px;
+        }
+
+        &.tip-overlay--threads-list {
+            top: unset;
+            right: unset;
+            bottom: -16px;
+            left: calc(50% - 16px);
+        }
+    }
+
+    .tip-overlay {
+        top: unset !important;
+        bottom: 0 !important;
+        left: calc(50% - 16rem) !important;
+        margin: 0 0 20px 0 !important;
+
+        .arrow {
+            display: none;
+        }
+
+        &.tip-overlay--chat {
+            left: calc(50% - 204px) !important;
+            margin-left: unset;
+        }
+    }
+}
+
+@media screen and (max-width: 425px) {
+    .tip-overlay {
+        &.tip-overlay--chat {
+            left: calc(50% - 16rem) !important;
+            width: 32rem;
+        }
+    }
+}

webapp/channels/src/sass/components/_videos.scss

@@ -0,0 +1,118 @@
+@charset 'UTF-8';
+
+.post {
+    .video-div {
+        position: relative;
+        overflow: hidden;
+        max-width: 480px;
+        height: 360px;
+        margin-bottom: 8px;
+        border-radius: 4px;
+
+        iframe,
+        video {
+            display: block;
+            max-width: 100%;
+        }
+
+        .video-thumbnail {
+            max-width: 100%;
+            height: auto;
+            cursor: pointer;
+        }
+
+        .video-thumbnail__error {
+            width: 100%;
+            height: 100%;
+            padding: 110px 0;
+            line-height: 2;
+            text-align: center;
+
+            .fa {
+                opacity: 0.5;
+            }
+
+            div {
+                font-size: 1.2em;
+            }
+        }
+
+        .block {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 200px;
+            height: 150px;
+            margin: -75px 0 0 -100px;
+            background-color: alpha-color($black, 0.5);
+            border-radius: 10px;
+        }
+    }
+
+    .video-type {
+        padding: 0;
+        margin: 0;
+        font-size: 15px;
+        opacity: 0.8;
+    }
+
+    .video-title {
+        margin-top: 3px;
+        font-size: 15px;
+    }
+
+    .play-button {
+        position: absolute;
+        top: 26px;
+        right: 51px;
+        width: 100px;
+        height: 100px;
+        border: 4px solid alpha-color($white, 0.4);
+        border-radius: 14px;
+        cursor: pointer;
+
+        span {
+            position: absolute;
+            top: 10px;
+            left: 20px;
+            width: 0;
+            height: 0;
+            border-top: 36px solid transparent;
+            border-bottom: 36px solid transparent;
+            border-left: 60px solid alpha-color($white, 0.4);
+        }
+    }
+
+    .img-div {
+        position: relative;
+        max-width: 480px;
+        max-height: 350px;
+        margin-bottom: 8px;
+        border-radius: 4px;
+        -moz-force-broken-image-icon: 1;
+        transition: all 0.1s linear;
+
+        &:hover {
+            box-shadow: 0 2px 5px 0 rgba($black, 0.1), 0 2px 10px 0 rgba($black, 0.1);
+        }
+
+        &.placeholder {
+            height: 350px;
+        }
+
+        .sidebar--right & {
+            max-width: 100%;
+        }
+    }
+
+    .video-loading {
+        height: 368px;
+    }
+
+    .video-div__placeholder {
+        display: flex;
+        height: 360px;
+        align-items: center;
+        background-color: black;
+    }
+}

webapp/channels/src/sass/layout/_channel-icon.scss

@@ -0,0 +1,19 @@
+.channel-icon {
+    position: relative;
+    display: inline-block;
+    width: 15px;
+    margin: 0 8px 0 0;
+    text-align: left;
+    vertical-align: top;
+}
+
+.channel-icon__lock,
+.channel-icon__globe {
+    top: 1px;
+}
+
+.channel-icon__archive,
+.channel-icon__unarchive {
+    top: 2px;
+    left: -2px;
+}

webapp/channels/src/sass/layout/_content.scss

@@ -0,0 +1,88 @@
+@charset 'UTF-8';
+
+.inner-wrap {
+    &.move--left {
+        .search-btns {
+            display: none;
+        }
+
+        .header-list__right {
+            position: relative;
+            z-index: 6;
+            padding-right: 0 !important;
+            // the negative margin-right is used
+            // to prevent the icons in the header from
+            // moving to the left when the RHS is open
+            //
+            // the below z-index is used to ensure the icons
+            // stays on the top and don't get hidden by the
+            // search's input block
+            float: right;
+        }
+    }
+
+    &.move--right {
+        .search-bar__container {
+            display: none;
+        }
+
+        .search-btns {
+            display: none;
+        }
+
+        .header-list__right {
+            position: relative;
+            z-index: 6;
+            padding-right: 0 !important;
+            margin-right: -18px;
+            // the negative margin-right is used
+            // to prevent the icons in the header from
+            // moving to the left when the RHS is open
+            //
+            // the below z-index is used to ensure the icons
+            // stays on the top and don't get hidden by the
+            // search's input block
+            float: right;
+        }
+    }
+}
+
+.app__content {
+    position: relative;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    padding-top: 50px;
+    background: var(--center-channel-bg);
+
+    .channel__wrap & {
+        padding-top: 0;
+    }
+}
+
+#archive-link-home {
+    flex: 0 0 auto;
+    cursor: pointer;
+    font-size: 13px;
+
+    .fa {
+        font-size: 11px;
+        opacity: 0.7;
+    }
+
+    a {
+        display: block;
+        width: 100%;
+        padding: 10px 20px;
+        color: inherit;
+    }
+}
+
+.delete-message-text {
+    margin-top: 10px;
+}
+
+.col-sm-auto {
+    padding-right: 15px;
+    padding-left: 15px;
+}

webapp/channels/src/sass/layout/_footer.scss

@@ -0,0 +1,27 @@
+@charset 'UTF-8';
+
+.footer-pane {
+    padding-bottom: 1em;
+    background: $bg--gray;
+
+    .footer-link {
+        padding: 0 1.5em;
+
+        &.copyright {
+            padding-right: 0;
+            color: $dark-gray;
+        }
+    }
+
+    .footer-site-name {
+        padding: 1.5em 0 1em;
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+}
+
+.footer,
+.footer-pane, {
+    height: 89px;
+}

webapp/channels/src/sass/layout/_headers.scss

@@ -0,0 +1,866 @@
+@charset "utf-8";
+
+.channel-header {
+    position: relative;
+    z-index: 15;
+    width: 100%;
+    max-height: 63px;
+    flex: 0 0 63px;
+    border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+    background: v(center-channel-bg);
+    font-size: 14px;
+
+    .channel-header__trigger {
+        display: flex;
+        min-width: 0;
+        height: 24px;
+        flex: 1 1 0;
+        align-items: center;
+        padding: 4px 4px;
+        border-radius: 4px;
+
+        &:hover {
+            background: rgba(v(center-channel-color-rgb), 0.08);
+        }
+
+        &.active {
+            background: rgba(v(button-bg-rgb), 0.08);
+
+            .heading,
+            .header-dropdown-chevron-icon {
+                color: v(button-bg);
+            }
+        }
+
+        .heading > span {
+            overflow: hidden;
+            line-height: 20px;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .icon::before {
+        margin-right: 0;
+        margin-left: 0;
+    }
+
+    .channel-header__favorites {
+        position: relative;
+        z-index: 1;
+        height: 24px;
+        padding: 4px;
+        border-radius: 4px;
+        color: var(--center-channel-color);
+        float: left;
+
+        &:hover {
+            background: rgba(v(center-channel-color-rgb), 0.08);
+
+            i {
+                opacity: 0.72;
+            }
+        }
+
+        &.inactive {
+            .icon {
+                color: v(center-channel-color);
+            }
+        }
+
+        &.active {
+            i {
+                opacity: 1;
+            }
+        }
+
+        i {
+            position: relative;
+            top: -1px;
+            font-size: 18px;
+            opacity: 0.56;
+        }
+    }
+
+    .channel-header__mute {
+        position: relative;
+        z-index: 1;
+        height: 24px;
+        padding: 4px;
+        margin-left: 4px;
+        border-radius: 4px;
+        color: v(center-channel-color);
+        float: left;
+
+        &:hover {
+            background: rgba(v(center-channel-color-rgb), 0.08);
+
+            i {
+                opacity: 0.72;
+            }
+        }
+
+        &.inactive {
+            .icon {
+                color: v(center-channel-color);
+            }
+        }
+
+        &.active {
+            i {
+                opacity: 1;
+            }
+        }
+
+        i {
+            position: relative;
+            top: -2px;
+            font-size: 16px;
+            opacity: 0.56;
+        }
+    }
+
+    .channel-header__icon {
+        line-height: 16px;
+
+        .channel-header__members {
+            font-size: 14.4px;
+        }
+
+        .channel-header__pin {
+            font-size: 14.4px;
+        }
+    }
+
+    .flex-parent {
+        display: flex;
+        padding: 0 16px 0 8px;
+    }
+
+    .flex-child {
+        &:first-child {
+            min-width: 0;
+            flex: 1;
+            padding: 0 28px 0 0;
+        }
+
+        .markdown__paragraph-inline {
+            display: inline-block;
+            overflow: hidden;
+            width: 100%;
+            margin: 0;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .channel-header_plugin-dropdown {
+        min-width: 200px;
+        max-width: 300px;
+        padding: 0;
+
+        .icon {
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+            color: rgba(var(--center-channel-color-rgb), 0.56);
+            fill: rgba(var(--center-channel-color-rgb), 0.56);
+            font-size: 1.6rem;
+            text-align: center;
+
+            svg,
+            img {
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        a {
+            padding: 10px 16px;
+            border-left: 3px solid transparent;
+            background: rgba(var(--sidebar-text-rgb), 0.08);
+
+            &:hover {
+                .fa {
+                    opacity: 1;
+                }
+
+                svg {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    .move--left & {
+        .icon--hidden {
+            display: none;
+        }
+    }
+
+    &.alt {
+        margin: 0;
+
+        th {
+            font-weight: normal;
+            vertical-align: top;
+
+            &.header-list__right {
+                padding-right: 4px;
+                white-space: nowrap;
+            }
+        }
+
+        td {
+            border: none;
+        }
+    }
+
+    .heading {
+        overflow: hidden;
+        margin: 0 0 0 2px;
+        font-family: Metropolis, sans-serif;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 16px;
+        text-overflow: ellipsis;
+    }
+
+    .caret {
+        margin-top: 3px;
+    }
+
+    .more {
+        display: inline-block;
+        color: #81848b;
+        font-size: 13px;
+        text-transform: capitalize;
+        vertical-align: top;
+    }
+
+    .disabled {
+        color: #999;
+    }
+
+    .shared-channel-icon {
+        width: 16px;
+        height: 16px;
+        margin: 0 4px;
+        font-size: 16px;
+        line-height: 16px;
+
+        &::before {
+            margin: 0;
+        }
+    }
+}
+
+.row {
+    &.header {
+        position: relative;
+
+        .channel__wrap & {
+            display: none;
+        }
+    }
+}
+
+.header-dropdown__icon {
+    position: relative;
+    top: 0;
+    margin: 0 0 0 4px;
+    color: inherit;
+    font-size: 16px;
+    line-height: 16px;
+}
+
+.channel-header__top {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 4px;
+}
+
+.channel-header__bot {
+    margin-left: 4px;
+}
+
+.channel-header__info {
+    margin-top: 8px;
+    white-space: nowrap;
+
+    .dropdown-toggle {
+        display: flex;
+        overflow: hidden;
+        text-align: left;
+        text-overflow: ellipsis;
+    }
+
+    .header-dropdown__icon {
+        flex: 0 0 auto;
+    }
+
+    .channel-header__title {
+        display: flex;
+
+        .channel-header__favorites {
+            flex: 0 0 auto;
+        }
+
+        .channel-header-archived-icon {
+            opacity: 0.5;
+        }
+
+        > div {
+            display: flex;
+            min-width: 0;
+            flex: 0 1 auto;
+        }
+
+        > a {
+            display: inline-block;
+            width: calc(100% - 65px);
+            text-decoration: none;
+        }
+
+        .MenuWrapper {
+            width: 100%;
+        }
+
+        .modal {
+            white-space: normal;
+        }
+    }
+
+    .channel-header__description {
+        position: relative;
+        display: flex;
+        overflow: hidden;
+        width: 100%;
+        height: 25px;
+        align-items: center;
+        margin: 0;
+        font-size: 12px;
+        text-overflow: ellipsis;
+
+        span[data-emoticon] {
+            .emoticon {
+                position: relative;
+                top: -1px;
+                overflow: hidden;
+            }
+        }
+
+        blockquote {
+            overflow: hidden;
+            padding: 0 0 0 20px;
+            font-size: 13px;
+            text-overflow: ellipsis;
+
+            &::before {
+                top: 0;
+                left: 2px;
+                font-size: 15px;
+            }
+        }
+
+        .header-placeholder {
+            display: flex;
+            overflow: hidden;
+            align-items: center;
+            margin-left: 4px;
+            line-height: 16px;
+
+            span {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .icon {
+                margin-left: 4px;
+            }
+        }
+
+        .header-description__text {
+            display: flex;
+            overflow: hidden;
+            flex-direction: column;
+            align-self: start;
+            margin-top: 4px;
+            margin-left: 4px;
+            line-height: 19px;
+
+            ul {
+                &:first-child {
+                    margin: 0;
+                }
+            }
+
+            li {
+                margin-bottom: 8px;
+
+                p {
+                    display: inline;
+                    margin: 0;
+                }
+            }
+        }
+
+        .markdown__heading {
+            margin: 0;
+            font-size: 1em;
+        }
+
+        code {
+            padding: 2px 5px 0;
+            margin: 1px 0 0;
+        }
+
+        &.light {
+            overflow: visible;
+            color: inherit;
+            opacity: 1;
+
+            button {
+                color: rgba(var(--center-channel-color-rgb), 0.64);
+
+                .edit-icon {
+                    display: none;
+                }
+
+                &:focus,
+                &:hover {
+                    color: rgba(var(--center-channel-color-rgb), 0.72);
+                    text-decoration: none;
+                }
+
+                &:hover {
+                    .edit-icon {
+                        display: block;
+                    }
+                }
+            }
+        }
+
+        .markdown-inline-img {
+            max-height: 45px;
+        }
+
+        .edit-icon {
+            font-size: 14px;
+        }
+
+        .status {
+            margin-left: 6px;
+            line-height: 16px;
+        }
+    }
+
+    .has-guest-header {
+        &::after {
+            position: relative;
+            top: 1px;
+            margin: 0 2px 0 5px;
+            content: "\2022";
+        }
+    }
+
+    .header-status__text {
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+        margin-right: 7px;
+        line-height: 16px;
+
+        span.last-active__text {
+            color: rgba(var(--center-channel-color-rgb), 0.72);
+        }
+
+        .custom-emoji__wrapper {
+            padding-left: 8px;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    .status {
+        width: auto;
+        margin: 0 4px 0 0;
+
+        svg {
+            width: 12px;
+        }
+    }
+}
+
+.channel-header__popover,
+.navbar__popover {
+    p {
+        white-space: pre-wrap;
+    }
+}
+
+.channel-intro {
+    padding: 110px 15px 0;
+    margin: 0 auto 10px;
+
+    &.channel-intro--centered {
+        max-width: 1020px;
+    }
+
+    .intro-links {
+        display: flex;
+        align-items: center;
+        padding: 8px 16px;
+        margin-bottom: 10px;
+
+        .fa,
+        i {
+            margin-right: 5px;
+        }
+    }
+
+    .channel-intro-profile {
+        margin: 0 0 4px;
+        gap: 8px;
+
+        .user-popover {
+            overflow: hidden;
+            max-width: calc(100% - 100px);
+            font-family: Metropolis, sans-serif;
+            font-size: 28px;
+            font-weight: 600;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .channel-intro-img {
+        .status-wrapper {
+            height: 50px;
+            margin: 0 10px 10px 0;
+        }
+
+        img {
+            border-radius: 100px;
+        }
+    }
+
+    .channel-intro__title {
+        margin-bottom: 15px;
+        font-size: 28px;
+        font-weight: 600;
+    }
+
+    .channel-intro__content {
+        padding: 10px 15px;
+        background: $bg--gray;
+        border-radius: 3px;
+    }
+}
+
+// Team Header in Sidebar
+.sidebar--left,
+#SidebarContainer,
+.sidebar--menu,
+.admin-sidebar {
+    .divider {
+        border-top: 1px solid transparent;
+
+        & + .divider {
+            display: none;
+        }
+    }
+
+    .team__header {
+        @include pie-clearfix;
+
+        position: relative;
+        display: flex;
+        max-height: 63px;
+        flex: 0 0 63px;
+        flex-direction: row-reverse;
+        align-items: center;
+        padding: 10px;
+
+        &::before {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: none;
+            content: "";
+            transition: all $transition-quick ease-in-out;
+        }
+
+        &:hover {
+            &::before {
+                background: rgba(var(--sidebar-text-rgb), 0.08);
+            }
+
+            .user__name {
+                color: var(--sidebar-header-text-color);
+            }
+
+            .sidebar-header-dropdown {
+                .sidebar-header-dropdown__toggle {
+                    opacity: 1;
+                }
+            }
+
+            .navbar-right {
+                .dropdown-toggle {
+                    opacity: 1;
+                }
+            }
+        }
+
+        .d-flex {
+            width: 100%;
+
+            .MenuWrapper {
+                flex: 1;
+
+                &.status-dropdown-menu {
+                    flex-grow: 0;
+                }
+            }
+        }
+
+        a {
+            flex-grow: 1;
+            text-decoration: none;
+        }
+
+        a.out_of_office {
+            background-color: transparent !important;
+            cursor: default;
+        }
+
+        .dropdown {
+            padding: 3px 0 0 16px;
+        }
+
+        .dropdown-menu {
+            overflow: auto;
+            min-width: 240px;
+            margin: 4px 0 0 6px;
+
+            .SubMenu {
+                margin: -4px 0 0 -4px;
+            }
+        }
+
+        .status-dropdown-menu {
+            .dropdown-menu {
+                overflow: visible;
+                min-width: 256px;
+            }
+        }
+
+        .sidebar-header-dropdown,
+        .admin-navbar-dropdown {
+            position: absolute;
+            top: 0;
+            right: 22px;
+            left: 0;
+            height: 100%;
+            margin-right: -22px;
+            font-size: 0.85em;
+
+            li {
+                width: 100%;
+            }
+
+            .sidebar-header-dropdown__toggle,
+            .admin-navbar-dropdown__toggle {
+                left: 0;
+                display: block;
+                width: 100%;
+                height: 100%;
+                padding: 10px;
+                background: none;
+                color: $white;
+                font-size: 1em;
+                line-height: 1.8;
+                opacity: 0.8;
+            }
+
+            .dropdown-menu {
+                min-width: 199px;
+                margin-top: 4px;
+                margin-left: 10px;
+
+                a,
+                button {
+                    overflow: hidden;
+                    padding: 3px 20px;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            .admin-navbar-dropdown__icon {
+                position: relative;
+                top: 0;
+                right: -5px;
+                width: 36px;
+                height: 36px;
+                border-radius: 36px;
+                fill: $white;
+                float: right;
+                line-height: 36px;
+                text-align: center;
+            }
+        }
+
+        .Avatar {
+            float: left;
+        }
+
+        .header__info {
+            position: relative;
+            width: 100%;
+            flex-grow: 1;
+            padding: 2px 36px 0 0;
+            color: var(--sidebar-header-text-color);
+        }
+
+        .header__info__content {
+            display: flex;
+            max-width: 120px;
+        }
+
+        .team__name,
+        .user__name {
+            display: block;
+            overflow: hidden;
+            font-size: 16px;
+            font-weight: 600;
+            text-decoration: none;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .team__name {
+            margin: 0;
+            font-family: Metropolis, sans-serif;
+            line-height: 22px;
+        }
+
+        .user__name {
+            position: relative;
+            top: -3px;
+            padding-right: 4px;
+            color: rgba(var(--sidebar-header-text-color-rgb), 0.8);
+            font-size: 14px;
+            font-weight: 400;
+            transition: all $transition-quick ease-in-out;
+        }
+
+        .custom-status {
+            display: flex;
+            font-size: 12px;
+            font-weight: bold;
+
+            &-text {
+                margin-left: 4px;
+            }
+
+            &-emoji {
+                display: flex;
+                min-width: 16px;
+                height: 16px;
+            }
+
+            &-emoji > span:first-child {
+                width: 16px;
+                min-width: 16px;
+                height: 16px;
+                min-height: 16px;
+            }
+        }
+    }
+
+    .search__clear {
+        display: none;
+    }
+}
+
+#navbar_wrapper {
+    .navbar-default {
+        .navbar-toggle {
+            &.menu-toggle {
+                padding: 0 1em;
+            }
+        }
+    }
+}
+
+.channel-header__navbar {
+    font-size: 16px;
+
+    .heading {
+        margin-right: 3px;
+    }
+
+    .header-dropdown__icon {
+        top: 1px;
+    }
+}
+
+.app__body {
+    .channel-header__links {
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        margin-right: 1px;
+        font-family: "Open Sans", sans-serif;
+        font-size: 22px;
+        line-height: 26px;
+        text-align: center;
+
+        th {
+            &:last-child {
+                div {
+                    margin-right: 10px;
+                }
+            }
+        }
+
+        .channel__wrap.move--left & {
+            position: absolute;
+            top: 14px;
+            right: -400px;
+        }
+
+        > a {
+            color: inherit;
+            opacity: 0.6;
+            text-decoration: none;
+            transition: all 0.1s ease-in;
+
+            &:hover {
+                opacity: 0.7;
+            }
+
+            &:focus {
+                color: inherit;
+            }
+
+            &.active {
+                color: $primary-color;
+                opacity: 1;
+
+                .icon {
+                    fill: $primary-color;
+                }
+            }
+        }
+    }
+}
+
+.channel-header-archived-icon {
+    position: relative;
+    top: 2px;
+    margin-right: 5px;
+}

webapp/channels/src/sass/layout/_markdown.scss

@@ -0,0 +1,465 @@
+@charset "UTF-8";
+
+h1.markdown__heading {
+    font-size: 28px;
+}
+
+h2.markdown__heading {
+    font-size: 25px;
+}
+
+h3.markdown__heading {
+    font-size: 22px;
+}
+
+h4.markdown__heading {
+    font-size: 19px;
+}
+
+h5.markdown__heading {
+    font-size: 15px;
+}
+
+h6.markdown__heading {
+    font-size: 1em;
+}
+
+.markdown__heading {
+    margin: 10px 0;
+    font-weight: 700;
+    line-height: 1.5;
+
+    &:first-child {
+        margin: 5px 0 10px;
+    }
+
+    .emoticon {
+        min-width: 1.5em;
+        min-height: 1.5em;
+        vertical-align: top;
+    }
+}
+
+.markdown__paragraph-inline {
+    display: inline;
+
+    +.markdown__paragraph-inline {
+        margin-left: 4px;
+    }
+}
+
+#post-list,
+#rhsContainer {
+    .markdown-inline-img {
+        max-height: 500px;
+        border-radius: 4px;
+        -moz-force-broken-image-icon: 1;
+    }
+
+    div.markdown-inline-img {
+        display: inline-block;
+        width: 100%;
+        min-width: 50px;
+        vertical-align: top;
+    }
+
+    .post {
+        &.post--system {
+            .markdown-inline-img {
+                width: auto;
+                max-width: 200px;
+            }
+        }
+    }
+
+    .markdown-inline-img,
+    .markdown-inline-img__container {
+        margin: 5px 2px;
+    }
+
+    .markdown-inline-img__container {
+        display: inline-block;
+        width: calc(100% - 5px);
+
+        .markdown-image-expand__collapse-button {
+            z-index: 3;
+        }
+
+        .image-preview-utility-buttons-container {
+            top: 14px;
+            right: 12px;
+        }
+
+        .image-loaded-container {
+            display: inline-block;
+        }
+
+        .markdown-inline-img {
+            margin: 0;
+        }
+    }
+
+    .markdown-inline-img--loading {
+        visibility: hidden;
+    }
+
+    .markdown-inline-img--hover {
+        border: 1px solid transparent;
+
+        &:hover {
+            z-index: 2;
+            box-shadow: 0 2px 5px 0 rgba($black, 0.1), 0 2px 5px 0 rgba($black, 0.1);
+            transition: all 0.1s linear;
+        }
+    }
+
+    .markdown-inline-img--no-border {
+        border: unset;
+    }
+
+    .markdown-inline-img--scaled-down {
+        max-height: 18px;
+        margin: 2px;
+        border-radius: 2px;
+
+        &:hover {
+            z-index: 2;
+            box-shadow: 0 2px 2px 0 rgba($black, 0.1), 0 2px 2px 0 rgba($black, 0.1);
+            transition: all 0.1s linear;
+        }
+    }
+
+    .markdown-inline-img--scaled-down-loading {
+        height: 18px;
+        margin: 2px;
+        visibility: hidden;
+    }
+
+    .broken-image {
+        border-radius: unset;
+    }
+
+    .broken-image--scaled-down {
+        max-height: 18px;
+        margin: 2px;
+    }
+}
+
+#channelHeaderDescription,
+#header-popover {
+    .markdown-inline-img {
+        max-height: 18px;
+        margin: 2px;
+        border-radius: 2px;
+        -moz-force-broken-image-icon: 1;
+    }
+
+    .markdown-inline-img--loading {
+        height: 18px;
+        visibility: hidden;
+    }
+
+    .markdown-inline-img--hover {
+        border: 1px solid transparent;
+
+        &:hover {
+            z-index: 2;
+            box-shadow: 0 2px 2px 0 rgba($black, 0.1), 0 2px 2px 0 rgba($black, 0.1);
+            transition: all 0.1s linear;
+        }
+    }
+
+    .markdown-inline-img--no-border {
+        border: unset;
+    }
+
+    div.markdown__paragraph-inline {
+        display: inline-block;
+        line-height: 22px;
+    }
+
+    .broken-image {
+        max-height: 18px;
+        border-radius: unset;
+    }
+
+    .image-loaded-container {
+        display: inline-block;
+    }
+}
+
+.post-code {
+    position: relative;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    code {
+        position: relative;
+        display: block;
+        padding: 0;
+        background-color: inherit;
+        font-size: 13px;
+        text-align: left;
+        white-space: pre;
+    }
+
+    &:hover .post-code__clipboard {
+        opacity: 1;
+    }
+
+    &:hover .post-code__language {
+        opacity: 1;
+    }
+
+    &:hover .post-code__overlay {
+        top: 6px;
+        right: 1px;
+        padding: 4px 4px 0;
+        background: var(--center-channel-bg);
+        border-radius: 4px;
+    }
+
+    &.post-code--wrap {
+        code {
+            white-space: pre-wrap;
+        }
+    }
+
+    .post-code__line-numbers {
+        min-width: 36px;
+        padding: 0 4px 4px;
+        border-right: 1px solid #ccc;
+        margin-right: 12px;
+        color: #ccc;
+        font-family: Menlo, Monaco, Consolas, "Courier New", monospace; // Match the fonts that code elements use
+        user-select: none;
+    }
+
+    .hljs {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        padding: 8.5px;
+        border: 1px solid rgba(v(center-channel-color-rgb), 0.2);
+        margin: 5px 0;
+        border-radius: 0.25em;
+        cursor: auto;
+        font-size: 13px;
+        overflow-x: auto;
+        visibility: visible;
+        white-space: pre;
+    }
+}
+
+.post-code__context-menu {
+    &.react-contextmenu {
+        background-color: $white;
+    }
+
+    .react-contextmenu-item {
+        .span {
+            display: inline-block;
+            padding: 3px 0;
+        }
+
+        &.react-contextmenu-item--divider {
+            border-top: 1px solid rgba(63, 67, 80, 0.16);
+            margin: 5px 15px;
+        }
+
+        &.react-contextmenu-item--divider:hover {
+            background: unset;
+            color: unset;
+        }
+    }
+}
+
+.post-code__overlay {
+    position: absolute;
+    z-index: 5;
+    top: 5px;
+    right: 0;
+    display: flex;
+    height: 36px;
+    padding: 4px 4px 0;
+    border-radius: 0 0 0 2px;
+    color: $white;
+    user-select: none;
+
+    >span {
+        position: relative;
+        padding: 4px;
+        opacity: 0;
+    }
+
+    .post-code__clipboard {
+        width: 28px;
+        height: 28px;
+        margin-right: 0;
+        border-radius: 4px;
+        cursor: pointer;
+
+        &:hover {
+            background-color: rgba(var(--center-channel-color-rgb), 0.08);
+            color: rgba(var(--center-channel-color-rgb), 0.72);
+        }
+
+        &:active {
+            background: rgba(28, 88, 217, 0.08);
+
+            i {
+                color: #1c58d9;
+            }
+        }
+
+        >i {
+            margin-top: 1px;
+            margin-left: -2px;
+            color: rgba(var(--center-channel-color-rgb), 0.56);
+            font-size: 18px;
+        }
+
+        .icon-check {
+            @include fade-in;
+
+            color: #3db887;
+        }
+    }
+
+    .post-code__language {
+        height: 28px;
+        padding: 4px 8px;
+        margin-left: 4px;
+        background-color: rgba(var(--center-channel-color-rgb), 0.56);
+        border-radius: 4px;
+        color: var(--center-channel-bg);
+        user-select: none;
+    }
+}
+
+.post-code__search-highlighting {
+    position: absolute;
+    color: transparent;
+    pointer-events: none;
+    user-select: none;
+}
+
+.post__body {
+    .post-message__text-container {
+        .post-message__text {
+            hr {
+                height: 1px;
+                padding: 0;
+                border: 0 none;
+                margin: 15px 0 16px;
+                background-color: rgba(var(--center-channel-color-rgb), 0.24);
+            }
+        }
+    }
+
+    .codespan__pre-wrap {
+        code {
+            cursor: auto;
+            white-space: pre-wrap;
+        }
+    }
+}
+
+.markdown__table {
+    margin: 5px 0 10px;
+    background: var(--center-channel-bg);
+
+    th,
+    td {
+        padding: 6px 13px;
+        border: 1px solid #ddd;
+    }
+
+    a {
+        white-space: nowrap;
+        word-break: initial;
+    }
+
+    tbody tr {
+        background: var(--center-channel-bg);
+
+        &:nth-child(2n) {
+            background-color: #f8f8f8;
+        }
+    }
+}
+
+ol.markdown__list {
+    display: table;
+    padding: 0;
+    counter-reset: list;
+
+    >li {
+        display: table-row;
+        counter-increment: list;
+
+        &::before {
+            display: table-cell;
+            padding-right: 8px;
+            content: counter(list) ".";
+            text-align: right;
+        }
+    }
+}
+
+blockquote {
+    position: relative;
+    padding: 10px 10px 10px 38px;
+    border: none;
+    margin-bottom: 0;
+    font-size: inherit;
+
+    &::before {
+        position: absolute;
+        top: 5px;
+        left: 8px;
+        display: inline-block;
+        content: '\f10d';
+        font-family: FontAwesome, sans-serif;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: normal;
+        opacity: 0.6;
+        text-decoration: inherit;
+    }
+}
+
+pre {
+    padding: 0;
+    margin: 5px 0;
+    color: inherit;
+}
+
+code {
+    background-color: rgba(var(--center-channel-color-rgb), 0.1);
+    // Reset styles from Bootstrap
+    color: inherit;
+}
+
+.help {
+    code {
+        background: rgba(51, 51, 51, 0.1);
+    }
+
+    .hljs {
+        display: block;
+        padding: 0.5em;
+        background: #f8f8f8;
+        color: #333;
+        overflow-x: auto;
+    }
+
+    .container {
+        margin-bottom: 40px;
+    }
+
+    .links {
+        margin-top: 30px;
+        font-size: 1.2em;
+    }
+}

webapp/channels/src/sass/layout/_module.scss

@@ -0,0 +1,13 @@
+// Only for combining all the files in this folder
+@import 'content';
+@import 'footer';
+@import 'headers';
+@import 'markdown';
+@import 'navigation';
+@import 'sidebar-left';
+@import 'sidebar-menu';
+@import 'sidebar-right';
+@import 'team-button';
+@import 'team-sidebar';
+@import 'webhooks';
+@import 'channel-icon';

webapp/channels/src/sass/layout/_navigation.scss

@@ -0,0 +1,221 @@
+@charset "utf-8";
+
+.nav > li > a:focus,
+.nav > li > a:hover {
+    background: transparent;
+}
+
+.nav-tabs {
+    margin-bottom: 10px;
+    background: var(--center-channel-bg);
+
+    > li {
+        margin-right: 5px;
+
+        &.active {
+            > a {
+                background: var(--center-channel-bg);
+            }
+        }
+
+        > a {
+            padding: 7px 15px;
+            border-bottom-color: transparent !important;
+
+            .small {
+                margin-left: 4px;
+                opacity: 0.8;
+            }
+        }
+    }
+}
+
+#navbar_wrapper {
+    input {
+        margin: 0 5px 0 2px;
+    }
+
+    .navbar-header {
+        display: flex;
+    }
+
+    .flex-parent--center {
+        display: flex;
+        justify-content: center;
+    }
+
+    .browser--ie & {
+        .navbar-default {
+            .navbar-brand {
+                overflow: visible;
+                padding: 1px;
+
+                .heading {
+                    max-width: 100px;
+                }
+            }
+        }
+    }
+
+    .navbar-default {
+        position: absolute;
+        min-height: 50px;
+        border: none;
+        background: var(--sidebar-teambar-bg);
+
+        .navbar-nav {
+            > li {
+                > a {
+                    height: 50px;
+                    padding: 0 1.3em;
+
+                    i {
+                        line-height: 50px;
+                    }
+                }
+            }
+        }
+
+        .navbar-plugin-button {
+            position: relative;
+            top: 1px;
+        }
+
+        .navbar-toggle {
+            z-index: 5;
+            width: 50px;
+            height: 50px;
+            padding: 0 10px;
+            border-width: 0;
+            border-color: transparent;
+            margin: 0;
+            border-radius: 0;
+            fill: var(--sidebar-header-text-color);
+            float: left;
+            line-height: 48px;
+
+            &.navbar-right__icon {
+                display: flex;
+                width: 32px;
+                height: 32px;
+                align-items: center;
+                justify-content: center;
+                padding: 0;
+                margin: 9px 10px 0 0;
+                background: rgba(var(--sidebar-header-text-color-rgb), 0.2);
+                border-radius: 50px;
+                line-height: 0;
+
+                &:hover,
+                &:focus {
+                    background: rgba(var(--sidebar-header-text-color-rgb), 0.3);
+                }
+            }
+
+            &.menu-toggle {
+                margin-right: 16px;
+            }
+
+            .icon-bar {
+                width: 21px;
+                background: var(--sidebar-header-text-color);
+            }
+
+            .icon__search {
+                svg {
+                    position: relative;
+                    left: -1px;
+                    width: 17px;
+                }
+            }
+
+            &.icon__mute {
+                width: 30px;
+                padding: 0;
+                font-size: 15px;
+                opacity: 0.6;
+            }
+
+            .icon--white {
+                color: $white;
+            }
+        }
+
+        .navbar-brand {
+            display: flex;
+            overflow: hidden;
+            height: 50px;
+            flex: 1 1 auto;
+            padding: 0;
+            font-size: 16px;
+            line-height: 50px;
+
+            .app__body & {
+                color: var(--sidebar-header-text-color);
+            }
+
+            .dropdown,
+            .MenuWrapper {
+                max-width: calc(100% - 40px);
+            }
+
+            .heading {
+                overflow: hidden;
+                width: auto;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .header-dropdown__icon {
+                margin-left: 6px;
+            }
+
+            .dropdown-toggle,
+            .MenuWrapper > a {
+                display: flex;
+                overflow: hidden;
+                align-items: center;
+                color: inherit;
+                text-decoration: none;
+            }
+
+            .description {
+                display: inline-block;
+                margin-right: 1em;
+                color: inherit;
+            }
+        }
+    }
+
+    .sidebar-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        span {
+            margin-left: 2px;
+            white-space: nowrap;
+        }
+    }
+
+    .channel-create-btn {
+        margin-right: 15px;
+    }
+
+    .more-channel-table {
+        width: 100%;
+        border: 1px solid #dbdbdc;
+
+        td {
+            padding: 7px;
+        }
+
+        button {
+            width: 110px;
+        }
+    }
+
+    .badge-notify {
+        background: $red;
+    }
+}

webapp/channels/src/sass/layout/_sidebar-menu.scss

@@ -0,0 +1,121 @@
+@charset 'UTF-8';
+
+.sidebar--menu {
+    position: absolute;
+    right: 0;
+    display: none;
+    overflow: auto;
+    width: 220px;
+    height: 100%;
+    padding: 0 0 2em;
+    border-right: $border-gray;
+    background: var(--sidebar-bg);
+    color: rgba(var(--sidebar-text-rgb), 0.8);
+    -webkit-overflow-scrolling: touch;
+
+    .icon {
+        display: inline-block;
+        width: 20px;
+        margin-right: 8px;
+        text-align: center;
+
+        svg {
+            max-width: 16px;
+            max-height: 16px;
+            fill: var(--sidebar-text);
+        }
+    }
+
+    .nav-pills__container {
+        padding-top: 5px;
+    }
+
+    .team__header {
+        @include pie-clearfix;
+
+        display: none;
+        padding: 0 15px;
+        background: var(--sidebar-header-bg);
+
+        a {
+            color: $white;
+        }
+
+        .navbar-right {
+            margin: 16px -5px 0;
+            font-size: 0.85em;
+
+            .dropdown-toggle {
+                padding: 0 10px;
+            }
+
+            .dropdown-menu {
+                li a {
+                    padding: 3 20px;
+                    color: #555;
+                }
+            }
+
+            .dropdown__icon {
+                display: inline-block;
+                width: 4px;
+                height: 16px;
+                background-size: 100% 100%;
+            }
+        }
+
+        .team__name {
+            overflow: hidden;
+            max-width: 80%;
+            float: left;
+            font-size: 1.2em;
+            font-weight: 600;
+            line-height: 50px;
+            text-decoration: none;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    .nav {
+        > li {
+            > a,
+            > button {
+                padding: 0 15px;
+                background: none !important;
+                color: inherit;
+                font-size: 15px;
+                line-height: 40px;
+
+                svg {
+                    position: relative;
+                    top: 4px;
+                    width: 18px;
+                    height: 18px;
+                    fill-opacity: 0.85;
+                }
+
+                .icon {
+                    position: relative;
+                    left: -5px;
+                    display: inline-block;
+                    width: 25px;
+                    text-align: center;
+                }
+
+                .mentions {
+                    font-size: 17px;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+}
+
+.app__body {
+    .modal-tabs {
+        .nav-tabs > li {
+            background-color: var(--center-channel-bg);
+        }
+    }
+}

webapp/channels/src/sass/layout/_sidebar-right.scss

@@ -0,0 +1,321 @@
+@charset "utf-8";
+
+.sidebar--right--width-holder {
+    @media screen and (max-width: 768px) {
+        display: none;
+    }
+
+    width: 400px;
+    transition: width 0.25s 0s ease-in, z-index 0.25s 0s step-end;
+}
+
+.sidebar--right {
+    width: 400px;
+    height: 100%;
+    padding: 0;
+    transform: translateX(100%);
+
+    &.is-open {
+        transition: width 0.25s 0s ease-in, z-index 0.25s 0s step-end;
+    }
+
+    &.expanded {
+        z-index: 13;
+        box-shadow: 0 8px 24px alpha-color($black, 0.24);
+
+        .sidebar-right__body {
+            overflow: hidden;
+        }
+
+        &.is-open {
+            transition: width 0.25s 0s ease-in, z-index 0.15s 0.1s step-start;
+        }
+    }
+
+    .sidebar-right__table {
+        display: table;
+
+        > div:not(.sidebar-collapse__container) {
+            display: table-cell;
+            vertical-align: top;
+
+            &:last-child {
+                .channel-header__icon {
+                    margin-right: 12px;
+                }
+            }
+        }
+
+        .search-form__container {
+            width: 100%;
+        }
+    }
+
+    .sidebar--right__content {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+
+    .sidebar--right__back {
+        display: flex;
+        width: 2.4rem;
+        height: 2.4rem;
+        align-items: center;
+        justify-content: center;
+        margin-right: 4px;
+        border-radius: 4px;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        font-size: 12px;
+        text-decoration: none;
+        transition: all 0.2s ease-in;
+
+        &:hover {
+            background-color: rgba(var(--center-channel-color-rgb), 0.08);
+            color: rgba(var(--center-channel-color-rgb), 0.72);
+        }
+
+        &:active {
+            background-color: rgba(var(--button-bg-rgb), 0.08);
+            color: v(button-bg);
+        }
+    }
+
+    .sidebar-right__body {
+        display: flex;
+        height: 100%;
+        flex: 1 1 auto;
+        flex-direction: column;
+        border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.12);
+        background: v(center-channel-bg);
+
+        .info-card {
+            padding: 5px 15px 60px 15px;
+        }
+
+        .post-right__content {
+            .emoji-picker--active & {
+                pointer-events: none;
+            }
+        }
+    }
+
+    .sidebar__overlay {
+        position: absolute;
+        z-index: 5;
+        width: 100%;
+        height: 100%;
+        background-color: $yellow;
+        opacity: 0.1;
+        pointer-events: none;
+    }
+
+    .input-group {
+        word-break: break-word;
+    }
+
+    .sidebar--right__buttons {
+        float: right;
+    }
+
+    .sidebar--right__expand {
+        margin: 0 4px 0 0;
+
+        i {
+            top: 0;
+        }
+
+        .icon-arrow-collapse {
+            display: none;
+        }
+    }
+
+    .sidebar--right__title {
+        display: flex;
+        height: 2.4rem;
+        flex: 1 1 auto;
+        padding: 0 1.6rem;
+        font-family: Metropolis, sans-serif;
+        font-size: 1.6rem;
+        font-weight: 600;
+
+        @include clearfix;
+    }
+
+    .sidebar--right__title__channel {
+        overflow: hidden;
+        height: 2.4rem;
+        padding: 0 8px;
+        border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+        margin: 0 0 0 8px;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        cursor: pointer;
+        font-family: "Open Sans", sans-serif;
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 2.4rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:hover {
+            border-color: transparent;
+            background: rgba(var(--center-channel-color-rgb), 0.08);
+            border-radius: 4px;
+            color: rgba(var(--center-channel-color-rgb), 0.72);
+        }
+
+        &:active {
+            background: rgba(var(--button-bg-rgb), 0.08);
+            color: v(button-bg);
+        }
+    }
+
+    .sidebar--right__title__subtitle {
+        overflow: hidden;
+        height: 2.4rem;
+        padding: 0 8px;
+        border-left: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+        margin: 0 0 0 8px;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        font-family: "Open Sans", sans-serif;
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 2.4rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .sidebar--right__follow__thread {
+        height: 2.4rem;
+        margin-right: 4px;
+        font-size: 12px;
+        line-height: 16px;
+    }
+
+    .sidebar--right__header {
+        display: flex;
+        overflow: hidden;
+        flex: 0 0 56px;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px 0 0;
+        border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+        background: rgba(var(--center-channel-color-rgb), 0.04);
+        color: inherit;
+        white-space: nowrap;
+
+        .btn-icon {
+            font-size: 20px;
+        }
+
+        .controls {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+        }
+    }
+
+    .sidebar--right__loading {
+        opacity: 0.7;
+        text-align: center;
+
+        .fa {
+            margin-right: 5px;
+        }
+    }
+
+    .sidebar--right__subheader {
+        width: 100%;
+        padding-bottom: 10vh;
+        margin: auto;
+        font-size: 1em;
+        transition: width 0.25s ease-in;
+
+        &.search__hints {
+            margin: 0;
+        }
+
+        h4 {
+            margin: 0 0 16px;
+            font-size: 1em;
+        }
+
+        ul {
+            padding: 0 0 0 30px;
+            margin: 0;
+            opacity: 0.7;
+        }
+
+        li {
+            padding-bottom: 10px;
+            font-size: 0.95em;
+        }
+
+        .usage__icon {
+            position: relative;
+            top: 3px;
+            margin: 0 3px;
+            opacity: 0.9;
+        }
+
+        &.sidebar-expanded {
+            width: 52%;
+        }
+    }
+
+    .suggestion-list__content {
+        max-height: 120px;
+    }
+}
+
+.sidebar-collapse__container {
+    display: none;
+}
+
+.sidebar-collapse {
+    z-index: 5;
+    display: flex;
+    width: 45px;
+    height: 48px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    text-align: center;
+    transform: translateX(0);
+    transition: all 0.2s linear;
+
+    .fa {
+        position: relative;
+        top: 1px;
+    }
+}
+
+// global header style adjustments
+@media screen and (min-width: 769px) {
+    // adjust RHS position and height
+    #sidebar-right {
+        // If this is changed, the interaction with the App Bar icons must be tested
+        //(see .app-bar__icon in components/app_bar/app_bar.scss)
+        z-index: 20;
+        top: 0;
+
+        .sidebar-right-container {
+            height: 100%;
+        }
+
+        .sidebar--right__header {
+            flex-basis: 63px;
+        }
+
+        .sidebar--right__title {
+            height: auto;
+            align-items: center;
+            line-height: 63px;
+        }
+
+        // search bar container is now only for mobile
+        .search-bar__container {
+            display: none !important;
+        }
+    }
+}

webapp/channels/src/sass/layout/_team-button.scss

@@ -0,0 +1,49 @@
+.team-btn {
+    position: relative;
+    border-radius: 8px;
+    font-weight: bold;
+    letter-spacing: -0.5px;
+    text-align: center;
+    text-transform: capitalize;
+    vertical-align: top;
+
+    &.team-btn__add {
+        font-size: 25px;
+        line-height: 41px;
+        vertical-align: middle;
+
+        .TeamIcon {
+            border-color: transparent;
+            background-color: transparent;
+            transform-origin: center bottom;
+            transition: transform 0.1s, background-color 0.2s;
+
+            .TeamIcon__initials {
+                transition: transform 0.2s;
+            }
+
+            &:hover {
+                border-color: transparent;
+                background-color: rgba(var(--sidebar-text-rgb), 0.08);
+                box-shadow: none;
+            }
+
+            &:active {
+                background-color: rgba(var(--sidebar-text-rgb), 0.16);
+                transform: scale(0.9);
+
+                .TeamIcon__initials {
+                    transform: scale(1.1);
+                }
+            }
+
+            &::before {
+                display: none;
+            }
+
+            .icon-plus {
+                font-size: 22px;
+            }
+        }
+    }
+}

webapp/channels/src/sass/layout/_team-sidebar.scss

@@ -0,0 +1,150 @@
+.team-sidebar {
+    z-index: 17;
+    display: flex;
+    width: 65px;
+    height: 100%;
+    flex-direction: column;
+    background: var(--sidebar-teambar-bg);
+    text-align: center;
+
+    .fa {
+        color: var(--sidebar-header-text-color);
+        opacity: 0.6;
+        transition: all 0.15s ease;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    .team-sidebar-bottom-plugin {
+        width: 100%;
+        flex: 0 0 auto;
+        padding: 16px 0 6px;
+        background-color: var(--sidebar-teambar-bg);
+    }
+
+    .team-wrapper {
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+        flex: 1 1 auto;
+        background-color: var(--sidebar-teambar-bg);
+        -webkit-overflow-scrolling: touch;
+
+        .draggable-team-container {
+            position: relative;
+            margin-right: auto;
+            margin-bottom: 12px;
+            margin-left: auto;
+        }
+
+        .team-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+
+            &.unread {
+                .unread-badge {
+                    position: absolute;
+                    z-index: 1;
+                    top: -2px;
+                    right: -3px;
+                    width: 8px;
+                    height: 8px;
+                    background: var(--mention-bg);
+                    border-radius: 100%;
+                    box-shadow: 0 0 0 3px var(--sidebar-teambar-bg);
+                }
+            }
+
+            a {
+                display: block;
+                text-decoration: none;
+                transform: translate(0, 0);
+                transform-origin: center center;
+                transition: transform 0.1s;
+
+                &:active {
+                    transform: translate(0, 2px);
+                }
+            }
+
+            &.active {
+                .TeamIcon__content {
+                    opacity: 1;
+                }
+            }
+
+            button {
+                padding: 0;
+                border: none;
+                text-decoration: none;
+            }
+
+            a.team-disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
+
+            .team-btn {
+                color: var(--sidebar-header-text-color);
+
+                .badge {
+                    border-color: rgba(var(--sidebar-text-rgb), 0.5);
+                }
+            }
+
+            .order-indicator {
+                position: absolute;
+                top: 28px;
+                left: 12px;
+                display: flex;
+                width: 16px;
+                height: 16px;
+                justify-content: center;
+                background: #000;
+                border-radius: 4px;
+                color: #fff;
+                font-size: 12px;
+                font-style: normal;
+                font-weight: 500;
+                text-align: center;
+            }
+
+            &.isDragging {
+                cursor: grab;
+
+                .TeamIcon {
+                    background-color: rgba(255, 255, 255, 0.32);
+
+                    .TeamIcon__image {
+                        box-shadow: inset 0 0 0 3px var(--sidebar-teambar-bg);
+                    }
+                }
+            }
+        }
+
+        .scrollbar--view {
+            padding-top: 15px;
+        }
+
+        .team-container a:hover {
+            text-decoration: none;
+        }
+    }
+}
+
+@media screen and (min-width: 769px) {
+    // global header style adjustments
+    .team-sidebar {
+        // use sidebar header variables for team sidebar
+        --sidebar-teambar-bg: var(--sidebar-header-bg);
+        --sidebar-header-text-color: var(--sidebar-text);
+        --sidebar-teambar-bg-rgb: var(--sidebar-header-bg-rgb);
+        --sidebar-header-text-color-rgb: var(--sidebar-text-rgb);
+
+        border-right: solid 1px rgba(var(--center-channel-color-rgb), 0.08);
+    }
+}

webapp/channels/src/sass/layout/_webhooks.scss

@@ -0,0 +1,399 @@
+@charset "utf-8";
+
+.webhooks__container {
+    padding: 0 13px 15px;
+    border: 1px solid;
+    margin-top: 10px;
+    border-radius: 3px;
+
+    @include alpha-property(background, $black, 0.1);
+}
+
+.post-attachment-dropdown {
+    .select-suggestion-container {
+        &::after {
+            left: 20rem;
+        }
+    }
+
+    .form-control {
+        width: 22rem;
+        text-overflow: ellipsis;
+    }
+}
+
+.webhook__item {
+    position: relative;
+    font-size: 13px;
+
+    &:last-child {
+        .divider-light:last-child {
+            display: none;
+        }
+    }
+
+    .webhook__remove {
+        position: absolute;
+        top: 8px;
+        right: -7px;
+        width: 30px;
+        height: 30px;
+        color: #e05f5d;
+        font-size: 22px;
+        font-weight: bold;
+        text-align: center;
+        text-decoration: none;
+    }
+
+    .webhook__url {
+        padding-right: 20px;
+    }
+}
+
+.post {
+    &.post--comment {
+        .attachment {
+            .attachment__body__wrap {
+                .btn-close {
+                    left: -11px;
+                }
+            }
+        }
+    }
+
+    .sidebar--right & {
+        .attachment {
+            .attachment-actions {
+                .alert {
+                    position: relative;
+                    top: 0;
+                    left: 0;
+                    display: inline-block;
+                    margin: 1rem 0 0.4rem;
+                }
+            }
+        }
+    }
+
+    .attachment {
+        position: relative;
+        margin-left: -20px;
+        cursor: default;
+
+        &:hover {
+            .attachment__body__wrap {
+                .btn-close {
+                    visibility: visible;
+                }
+            }
+
+            .attachment__content.attachment__content--permalink {
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
+            }
+        }
+
+        &.attachment--permalink {
+            max-width: 720px;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        .attachment__content {
+            border-width: 1px;
+            border-style: solid;
+            border-left: none;
+            margin: 5px 0 5px 20px;
+            background: var(--center-channel-bg);
+            border-radius: 0 4px 4px 0;
+
+            &.permalink--opengraph {
+                margin: 5px 0 0 20px;
+            }
+
+            &.attachment__content--permalink {
+                border-left-width: 1px;
+                border-left-style: solid;
+                border-radius: 4px 4px 4px 4px;
+                box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
+            }
+        }
+
+        .attachment__thumb-pretext {
+            border: none;
+            margin-left: 25px;
+            background: transparent;
+        }
+
+        .attachment__container {
+            padding: 12px;
+            border-left-width: 4px;
+            border-left-style: solid;
+            border-left-color: var(--sidebar-header-bg);
+
+            &.attachment__container--good {
+                border-left-color: #00c100;
+            }
+
+            &.attachment__container--warning {
+                border-left-color: #dede01;
+            }
+
+            &.attachment__container--danger {
+                border-left-color: #e40303;
+            }
+
+            &.attachment__container--opengraph,
+            &.attachment__container--permalink {
+                display: table;
+                width: 100%;
+                padding-bottom: 13px;
+                margin: 0;
+                table-layout: fixed;
+            }
+
+            &.attachment__container--permalink {
+                padding: 16px;
+                border-left: none;
+            }
+
+            .sitename {
+                color: #a3a3a3;
+            }
+        }
+
+        .attachment__body__wrap {
+            &.attachment__body__wrap--opengraph {
+                display: table-cell;
+                width: 100%;
+                vertical-align: top;
+            }
+
+            &.attachment__body__wrap--permalink {
+                display: table-cell;
+                width: 100%;
+                vertical-align: top;
+            }
+
+            .btn-close {
+                position: absolute;
+                z-index: 5;
+                left: -7px;
+                width: 20px;
+                height: 20px;
+                padding: 0;
+                border: none;
+                background: transparent;
+                color: inherit;
+                font-size: 21px;
+                font-weight: 500;
+                line-height: 20px;
+                opacity: 0.4;
+                outline: none;
+                text-align: center;
+                text-decoration: none;
+                text-shadow: none;
+                visibility: hidden;
+
+                span {
+                    font-family: 'Open Sans', sans-serif;
+                    line-height: 10px;
+                }
+
+                &:hover {
+                    opacity: 0.9;
+                }
+            }
+
+            &:hover {
+                .btn-close {
+                    visibility: visible;
+                }
+            }
+        }
+
+        .attachment__body {
+            width: 80%;
+            padding-right: 5px;
+            float: left;
+
+            &.attachment__body--no_thumb {
+                width: 100%;
+            }
+
+            &.attachment__body--opengraph,
+            &.attachment__body--permalink {
+                width: 100%;
+                padding-right: 0;
+                float: none;
+                word-wrap: break-word;
+            }
+
+            .permalink__body--opengraph {
+                overflow: hidden;
+                width: 100%;
+                height: 1.5em;
+                line-height: 1.5em;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .attachment__image__container--opengraph {
+            display: table-cell;
+            width: 95px;
+            padding-top: 3px;
+            padding-left: 15px;
+            vertical-align: top;
+        }
+
+        .attachment__image-container {
+            max-width: 500px;
+        }
+
+        .attachment__image {
+            max-height: 300px;
+            border: 1px solid transparent;
+            margin-bottom: 1em;
+
+            &.attachment__image--opengraph {
+                max-width: 100%;
+                max-height: 80px;
+                margin-bottom: 0;
+
+                &.loading {
+                    height: 80px;
+                    border-color: transparent;
+                }
+
+                &.large_image {
+                    width: 100%;
+                    max-width: 400px;
+                    max-height: 200px;
+                    margin-top: 10px;
+                    border-radius: 3px;
+
+                    &.loading {
+                        height: 150px;
+                        border-color: transparent;
+                    }
+                }
+            }
+        }
+
+        .attachment__author-name {
+            opacity: 0.6;
+        }
+
+        .attachment__title {
+            padding: 0;
+            margin: 5px 0;
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 18px;
+
+            &.has-link {
+                overflow: hidden;
+                color: #2f81b7;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            &.attachment__title--opengraph {
+                height: auto;
+                word-wrap: break-word;
+
+                &.is-url {
+                    word-break: break-all;
+                }
+            }
+        }
+
+        .attachment__author-icon {
+            width: 14px;
+            height: 14px;
+            margin-right: 5px;
+            border-radius: 50px;
+        }
+
+        .attachment__thumb-container {
+            width: 80px;
+            float: right;
+            text-align: right;
+
+            img {
+                max-width: 100%;
+                max-height: 75px;
+            }
+        }
+
+        .attachment-fields {
+            width: 100%;
+            table-layout: fixed;
+
+            .attachment-field__caption {
+                padding-top: 0.7em;
+                font-weight: 600;
+            }
+
+            .attachment-field {
+                p {
+                    margin: 0;
+                }
+            }
+        }
+
+        .attachment__footer-container {
+            position: relative;
+            padding-top: 0.7em;
+            color: #a3a3a3;
+            font-size: 12px;
+
+            .attachment__footer-icon {
+                margin-top: -2px;
+                margin-right: 5px;
+            }
+        }
+
+        .attachment-actions {
+            position: relative;
+            display: flex;
+            flex-wrap: wrap;
+            padding-bottom: 4px;
+
+            .form-group {
+                margin-bottom: 0;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+
+            button {
+                height: auto;
+                padding: 6px 12px;
+                border-width: 1px;
+                border-style: solid;
+                margin: 8px 8px 0 0;
+                background: var(--center-channel-bg);
+                border-radius: 3px;
+                font-size: 13px;
+                font-weight: 700;
+                outline: 0;
+
+                &[disabled] {
+                    cursor: auto;
+                    opacity: 0.5;
+                }
+            }
+
+            .alert {
+                position: absolute;
+                top: 0;
+                left: 23rem;
+                padding: 5px 10px;
+            }
+        }
+    }
+}

webapp/channels/src/sass/responsive/_desktop.scss

@@ -0,0 +1,161 @@
+@charset "utf-8";
+
+@media screen and (min-width: 1680px) and (max-width: 2135px) {
+    .inner-wrap {
+        &.move--left {
+            .ActivityAndInsights {
+                .insights-card {
+                    &.large {
+                        align-self: flex-start;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 1680px) {
+    .sidebar--right,
+    .sidebar--right--width-holder {
+        width: 500px;
+
+        .sidebar--right__title__channel {
+            max-width: 30rem;
+        }
+    }
+
+    .channel-header,
+    .GlobalThreads .Header {
+        .search-bar__container {
+            .search__form--focused {
+                width: 374px;
+                max-width: 374px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1800px) {
+    .inner-wrap {
+        &.move--left {
+            .date-separator,
+            .new-separator {
+                &.hovered--comment {
+                    &::before,
+                    &::after {
+                        background: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1440px) {
+    .inner-wrap {
+        &.move--left {
+            .help__format-text {
+                display: none;
+            }
+        }
+    }
+
+    .backstage-content {
+        margin: 46px 46px 46px 150px;
+    }
+}
+
+@media screen and (max-width: 1280px) {
+    .inner-wrap.move--left {
+        .post-collapse__show-more,
+        .post-attachment-collapse__show-more {
+            margin-left: 0;
+        }
+
+        .post-create__container {
+            .channel-archived__close-btn {
+                display: block;
+                margin: 10px auto 0;
+            }
+        }
+    }
+
+    .integration-option {
+        flex: 0 0 45%;
+    }
+}
+
+@media screen and (max-width: 1140px) {
+    .inner-wrap {
+        &.move--left {
+            .file-overlay {
+                font-size: em(18px);
+
+                .overlay__circle {
+                    width: 300px;
+                    height: 300px;
+                    margin: -150px 0 0 -150px;
+                }
+
+                .overlay__files {
+                    width: 150px;
+                    margin: 60px auto 15px;
+                }
+            }
+        }
+    }
+}
+
+@media (max-width: 1024px) {
+    .inner-wrap:not(.move--left) {
+        .channel-header,
+        .GlobalThreads .Header {
+            .search-bar__container {
+                .search__form {
+                    width: 150px;
+                }
+            }
+        }
+    }
+
+    .search-bar__container {
+        padding: 0 4px 0 0;
+    }
+}
+
+// global header style adjustments
+@media screen and (max-width: 1020px) {
+    .channel__wrap {
+
+        // indicates the RHS is open
+        &.move--left {
+
+            // adjust channel header width
+            #channel-header {
+                width: 100%;
+            }
+        }
+    }
+}
+
+@media (min-width: 1280px) {
+    .sidebar--right {
+        &.sidebar--right--expanded {
+            width: min(60vw, 96rem);
+        }
+    }
+}
+
+@media (min-width: 1025px) {
+    .post-image__details {
+        .post-image__download {
+            opacity: 0;
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    .modal-lg {
+        width: 700px;
+    }
+}

webapp/channels/src/sass/responsive/_module.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+@import 'mobile';
+@import 'tablet';
+@import 'desktop';

webapp/channels/src/sass/responsive/_tablet.scss

@@ -0,0 +1,521 @@
+@charset "utf-8";
+
+@media screen and (max-width: 960px) {
+    .system-users__filter-row {
+        flex-direction: column;
+
+        .system-users__filter {
+            &:first-child {
+                flex: 1 1 auto;
+                padding-bottom: 12px;
+            }
+        }
+
+        > label {
+            margin-bottom: 12px;
+
+            span {
+                flex: 0 0 auto;
+                padding-left: 0;
+            }
+        }
+    }
+
+    .app__body {
+        .modal {
+            .modal-image {
+                .modal-image__wrapper {
+                    img {
+                        max-height: calc(100vh - 108px);
+                    }
+
+                    > div {
+                        min-width: 250px;
+                        font-size: 12px;
+                    }
+
+                    .modal-close {
+                        opacity: 1;
+                    }
+                }
+
+                .modal-button-bar {
+                    bottom: 20px;
+                    padding: 5px 10px 5px 5px;
+                    line-height: 30px;
+                }
+            }
+        }
+    }
+
+    .post-create__container {
+        .channel-archived__close-btn {
+            display: block;
+            margin: 10px auto 0;
+        }
+    }
+
+    .help__format-text {
+        display: none;
+    }
+
+    .post-right__scroll {
+        .post-create__container {
+            .post-create-body {
+                .icon__emoji_picker {
+                    top: -7px;
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .signup-team__container {
+        &.branded {
+            display: block;
+            max-width: 380px;
+            margin: 0 auto;
+
+            .signup__markdown {
+                display: none;
+            }
+        }
+    }
+
+    .backstage-content {
+        max-width: 100%;
+        padding: 0;
+        margin: 30px;
+    }
+
+    .backstage-sidebar {
+        position: relative;
+        width: 100%;
+        height: auto;
+        padding: 30px 15px 0;
+    }
+
+    .post {
+        .attachment {
+            .attachment__image {
+                &.attachment__image--opengraph {
+                    max-width: 100%;
+                    max-height: 70px;
+
+                    &.loading {
+                        height: 70px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 880px) {
+    .post-collapse__show-more {
+        padding-right: 60px;
+    }
+
+    .post-attachment-collapse__show-more {
+        padding-right: 0;
+    }
+
+    .sidebar--right {
+        .post-collapse__show-more,
+        .post-attachment-collapse__show-more {
+            padding-right: 0;
+        }
+    }
+}
+
+// Tablet and desktop
+@media screen and (min-width: 769px) {
+    // ensure the global header always sits on top of its immediate sibling
+    > header {
+        z-index: 2;
+
+        + * {
+            position: relative;
+            z-index: 1;
+        }
+    }
+
+    .search-help-popover {
+        width: 274px;
+    }
+
+    .channel-header__popover {
+        top: 44px !important;
+        left: 236px !important;
+    }
+
+    .col-sm-auto {
+        float: left;
+    }
+
+    .second-bar {
+        display: none;
+    }
+
+    .channel-header {
+        .search-bar__container {
+            .search__form {
+                &--focused {
+                    width: 274px;
+                }
+            }
+        }
+    }
+
+    .sidebar--right {
+        &.move--left {
+            transform: translateX(0);
+
+            .search-bar__container {
+                display: none;
+            }
+        }
+
+        &.sidebar--right--expanded {
+            width: min(60vw, 75rem);
+
+            .search-bar__container {
+                padding-left: 10px;
+            }
+
+            .sidebar-right-container {
+                position: relative;
+                z-index: 5;
+            }
+
+            .sidebar--right__expand {
+                .icon-arrow-expand {
+                    display: none;
+                }
+
+                .icon-arrow-collapse {
+                    display: inline-block;
+                }
+            }
+        }
+    }
+
+    .post {
+        &.post--compact {
+            .post-message--overflow {
+                @include clearfix;
+
+                margin-top: 22px; //Any value change to this needs to reflect for MARGIN_CHANGE_FOR_COMPACT_POST variable in show_more component
+            }
+
+            .attachment__body .post-message--overflow {
+                margin-top: 0; //The above margin was added for wrapping texg in compact view but it isnt needed for attachment text
+            }
+
+            &.same--root {
+                &.same--user {
+                    .post-message {
+                        &.post-message--overflow {
+                            margin-top: 0;
+                        }
+                    }
+
+                    padding-top: 0;
+                    padding-left: 77px;
+
+                    .card-icon__container {
+                        position: absolute;
+                        top: 4px;
+                        left: -16px;
+                    }
+
+                    .post__header {
+                        .post-menu {
+                            top: -34px;
+                        }
+                    }
+
+                    .post__img {
+                        img {
+                            display: none;
+                        }
+                    }
+
+                    &.post--root,
+                    .post-preview {
+                        .post__img {
+                            img {
+                                display: block;
+                            }
+                        }
+
+                        .post__time {
+                            opacity: 0.6;
+                        }
+                    }
+                }
+
+                &.post--comment {
+                    &.same--user {
+                        .post__img {
+                            img {
+                                display: none;
+                            }
+                        }
+                    }
+
+                    .post__header {
+                        margin-left: 12px;
+                    }
+                }
+            }
+
+            &.post--comment {
+                &.other--root {
+                    .post-message {
+                        &.post-message--overflow {
+                            margin-top: 0;
+                        }
+                    }
+                }
+            }
+
+            &.post--thread {
+                .post-message {
+                    &.post-message--overflow {
+                        margin-top: 0;
+                    }
+                }
+            }
+
+            .channel__wrap #post-list & {
+                .post__permalink {
+                    position: absolute;
+                    top: 1px;
+                    text-align: right;
+                }
+
+                .post__time {
+                    font-size: 0.85em;
+                }
+
+                .star-icon__container {
+                    position: absolute;
+                    top: 6px;
+                    left: -65px;
+                    width: 60px;
+                    text-align: right;
+                }
+            }
+
+            &:not(.post--thread) {
+                padding: 0 0.5em 0 77px; // .post-row__padding.bottom needs to be changed accordingly if this is changed
+
+                .post__link {
+                    margin: 3px 0 7px;
+                    vertical-align: bottom;
+                }
+
+                span {
+                    p {
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+
+                .post__header {
+                    padding-top: 2px;
+                    padding-right: 0;
+                    float: left;
+
+                    .col__name {
+                        position: relative;
+                        z-index: 1;
+                        padding-right: 5px;
+                        margin-right: 2px;
+                        font-weight: bold;
+                    }
+
+                    .colon {
+                        display: inline;
+                    }
+
+                    .post-menu {
+                        top: -34px;
+                    }
+                }
+
+                &.other--root {
+                    .post__link + .post__body {
+                        clear: both;
+                    }
+
+                    &.post--comment {
+                        .post__header {
+                            .post-menu {
+                                top: -34px;
+                            }
+                        }
+                    }
+                }
+
+                .post-code {
+                    clear: both;
+                }
+
+                .post__body {
+                    width: 100%;
+                }
+
+                .post__content {
+                    padding-right: 45px;
+                }
+            }
+
+            .sidebar--right & .card-icon__container {
+                position: relative;
+                top: 2px;
+                left: auto;
+            }
+        }
+
+        &.same--root {
+            &.same--user {
+                .post__time {
+                    opacity: 0;
+                }
+
+                .post__header {
+                    float: left;
+
+                    .post-menu {
+                        top: -34px;
+                    }
+                }
+
+                &:not(.post--compact) {
+                    .post__permalink {
+                        position: absolute;
+                        top: 2px;
+                        left: -18px;
+
+                        .sidebar--right & {
+                            top: 1px;
+                            left: -18px;
+                        }
+                    }
+
+                    .post__time {
+                        display: inline-block;
+                        width: 51px;
+                        font-size: 12px;
+                        line-height: 20px;
+                        text-align: right;
+                        text-rendering: auto;
+
+                        &:hover {
+                            text-decoration: underline;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .post-row__padding.top .post--compact {
+        padding-top: 1em;
+    }
+
+    .post-row__padding.bottom .post--compact {
+        padding-bottom: 1em;
+    }
+}
+
+@media screen and (max-width: 1020px) {
+    .channel-header {
+        z-index: 5;
+    }
+
+    .sidebar--right {
+        z-index: 13;
+        top: 0;
+        transform: translateX(100%);
+        transition: all 0.35s ease;
+
+        .sidebar-right-container {
+            height: 100%;
+        }
+
+        &.move--left {
+            -webkit-transform: translateX(0) !important;
+            -moz-transform: translateX(0) !important;
+            -ms-transform: translateX(0) !important;
+            -o-transform: translateX(0) !important;
+            transform: translateX(0) !important;
+
+            .browser--ie & {
+                display: block;
+                -webkit-transform: none !important;
+                -moz-transform: none !important;
+                -ms-transform: none !important;
+                -o-transform: none !important;
+                transform: none !important;
+            }
+
+            .search-bar__container {
+                z-index: 5;
+                display: block !important;
+
+                .search__form {
+                    width: 100% !important;
+                }
+            }
+        }
+    }
+
+    .inner-wrap {
+        &:not(.move--left) {
+            .app__content {
+                > #post-list {
+                    margin-right: 0 !important;
+                }
+
+                > .post-create__container {
+                    width: 100% !important;
+                }
+            }
+        }
+
+        &.move--left {
+            .search-bar__container {
+                display: none;
+            }
+
+            .app__content {
+                > .Drafts__main,
+                > #post-list {
+                    margin-right: 0 !important;
+                }
+
+                > .post-create__container {
+                    width: 100% !important;
+                }
+            }
+
+            .channel-header__links {
+                position: relative;
+                top: auto;
+                right: auto;
+            }
+        }
+
+        &.move--left,
+        &.move--right {
+            .header-list__right {
+                // hide it behind the RHS
+                z-index: -1;
+            }
+        }
+    }
+}

webapp/channels/src/sass/routes/_about-modal.scss

@@ -0,0 +1,175 @@
+@charset 'UTF-8';
+
+.modal {
+    .modal-content {
+        border-radius: $border-rad;
+        box-shadow: 0 0 10px rgba($black, 0.5);
+    }
+
+    .about-modal {
+        .modal-content {
+            .modal-header {
+                display: flex;
+                align-items: center;
+                padding: 20px 25px;
+                border: none;
+                border-bottom: 1px solid rgba(var(--sys-center-channel-color-rgb), 0.08);
+                background: transparent;
+                color: inherit;
+
+                .close {
+                    right: 15px;
+                    color: inherit;
+                    font-size: 30px;
+                    font-weight: normal;
+                    opacity: 0.5;
+                }
+
+                .more-modal__image {
+                    margin-right: 12px;
+                }
+
+                .modal-title {
+                    color: inherit;
+                    font-size: 17px;
+                    font-weight: 600;
+                }
+
+                .icon {
+                    position: relative;
+                    top: 1px;
+                    margin: 0 5px 0 8px;
+
+                    svg {
+                        width: 14px;
+                        height: 14px;
+                        opacity: 0.8;
+                    }
+                }
+            }
+        }
+
+        .modal-body {
+            max-height: calc(100vh - 220px);
+            padding: 15px 25px;
+        }
+
+        .modal-footer {
+            .btn {
+                height: 40px;
+                padding: 0 20px;
+                border-radius: 4px;
+                font-size: 14px;
+                font-weight: 600;
+            }
+        }
+
+        label {
+            margin-bottom: 8px;
+        }
+
+        .form-group {
+            margin-bottom: 24px;
+        }
+
+        .select-suggestion-container {
+            margin: 0;
+
+            .form-control {
+                height: 36px;
+                padding: 8px 12px;
+            }
+
+            &::after {
+                top: 9px;
+                right: 12px;
+                font-size: 20px;
+            }
+        }
+
+        .form-control {
+            padding: 8px 12px;
+            font-size: 14px;
+
+            &[type=input] {
+                height: 36px;
+            }
+        }
+
+        &.large {
+            .modal-body {
+                padding-bottom: 20px;
+            }
+        }
+
+        .about-modal__content {
+            @include clearfix;
+
+            display: flex;
+            flex-direction: row;
+            padding: 1em 0 3em;
+        }
+
+        .about-modal__copyright {
+            margin-top: 0.5em;
+            opacity: 0.6;
+        }
+
+        .about-modal__links {
+            margin-top: 0.5em;
+        }
+
+        .about-modal__footer {
+            font-size: 13.5px;
+        }
+
+        .about-modal__title {
+            margin: 0 0 10px;
+            line-height: 1.5;
+        }
+
+        .about-modal__subtitle {
+            opacity: 0.6;
+        }
+
+        .about-modal__hash {
+            overflow: hidden;
+            font-size: 0.75em;
+            opacity: 0.4;
+            text-align: right;
+
+            p {
+                &:first-child {
+                    float: left;
+                    text-align: left;
+                }
+            }
+        }
+
+        .about-modal__notice {
+            font-size: 0.79em;
+            opacity: 0.8;
+            text-align: right;
+
+            p {
+                &:first-child {
+                    text-align: left;
+                }
+            }
+        }
+
+        .about-modal__logo {
+            padding: 0 40px 0 20px;
+            opacity: 0.9;
+
+            svg {
+                width: 125px;
+                height: 125px;
+            }
+
+            path {
+                fill: inherit;
+            }
+        }
+    }
+}

webapp/channels/src/sass/routes/_access-history.scss

@@ -0,0 +1,32 @@
+@charset 'UTF-8';
+
+.access-history__table {
+    display: table;
+    width: 100%;
+    padding-top: 15px;
+    line-height: 1.6;
+
+    &:first-child {
+        padding: 0;
+    }
+
+    > div {
+        display: table-cell;
+        vertical-align: top;
+    }
+
+    .access__date {
+        width: 190px;
+        font-size: 15px;
+        font-weight: 600;
+    }
+
+    .access__report {
+        padding-bottom: 15px;
+        border-bottom: 1px solid #ddd;
+    }
+
+    .report__info {
+        opacity: 0.8;
+    }
+}

webapp/channels/src/sass/routes/_activity-log.scss

@@ -0,0 +1,57 @@
+@charset 'UTF-8';
+
+.animation--highlight {
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        animation: highlight 1.5s ease;
+        content: '';
+    }
+}
+
+.activity-log__table {
+    display: table;
+    width: 100%;
+    padding: 15px 0;
+    border-top: 1px solid $light-gray;
+    line-height: 1.8;
+
+    &:first-child {
+        padding-top: 0;
+        border: none;
+    }
+
+    > div {
+        display: table-cell;
+        vertical-align: top;
+    }
+
+    .activity-log__report {
+        width: 80%;
+    }
+
+    .activity-log__action {
+        text-align: right;
+    }
+
+    .report__platform {
+        font-size: 15px;
+        font-weight: 600;
+
+        .fa {
+            margin-right: 6px;
+        }
+    }
+
+    .report__info {
+        opacity: 0.8;
+    }
+}
+
+.session-help-text {
+    padding: 0 0 20px;
+}

webapp/channels/src/sass/routes/_backstage.scss

@@ -0,0 +1,546 @@
+.backstage-navbar {
+    z-index: 100;
+    height: $backstage-bar-height;
+    padding: 10px 20px;
+    border-bottom: 1px solid $light-gray;
+    background: $white;
+    grid-area: header;
+}
+
+.backstage-navbar__back {
+    color: var(--sys-button-bg);
+    text-decoration: none;
+
+    .fa {
+        margin-right: 7px;
+        font-size: 1.1em;
+        font-weight: bold;
+    }
+
+    &:hover,
+    &:active {
+        color: var(--sys-button-bg);
+        text-decoration: underline;
+    }
+}
+
+.backstage-body {
+    overflow: auto;
+    width: 100%;
+    background-color: $bg--gray;
+    grid-area: center;
+}
+
+.backstage-content {
+    max-width: 1200px;
+    padding-left: 135px;
+    margin: 46px auto;
+    background-color: $bg--gray;
+    vertical-align: top;
+}
+
+.backstage-sidebar {
+    position: absolute;
+    width: 260px;
+    padding: 46px 20px;
+    vertical-align: top;
+
+    ul {
+        padding: 0;
+        list-style: none;
+    }
+
+    > ul {
+        @include clearfix;
+
+        border-right: 1px solid $light-gray;
+        border-left: 1px solid $light-gray;
+        border-radius: 2px;
+    }
+}
+
+.backstage-sidebar__category {
+    + .backstage-sidebar__category {
+        .category-title {
+            border-top: none;
+        }
+    }
+
+    .category-title {
+        position: relative;
+        display: block;
+        padding: 0 10px;
+        border-top: 1px solid $light-gray;
+        border-bottom: 1px solid $light-gray;
+        color: $black;
+        line-height: 35px;
+
+        .fa {
+            position: relative;
+            top: 1px;
+            width: 20px;
+            opacity: 0.5;
+            text-align: center;
+        }
+
+        .fa-smile-o {
+            font-size: 17px;
+        }
+    }
+
+    .category-title--active {
+        background-color: $primary-color;
+        color: $white;
+
+        .fa {
+            opacity: 1;
+        }
+    }
+
+    .category-title__text {
+        position: absolute;
+        left: 2.5em;
+    }
+
+    .sections {
+        border-bottom: 1px solid $light-gray;
+        background: $white;
+    }
+
+    .section-title,
+    .subsection-title {
+        display: block;
+        padding-left: 2em;
+        font-size: 0.95em;
+        line-height: 29px;
+        text-decoration: none;
+    }
+
+    .subsection-title {
+        padding-left: 3em;
+    }
+
+    .section-title--active,
+    .subsection-title--active {
+        background-color: $primary-color;
+        color: $white;
+        font-weight: 600;
+    }
+}
+
+.backstage-header__divider {
+    margin: 0 10px;
+    color: $gray;
+}
+
+.backstage-header {
+    @include clearfix;
+
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 20px;
+
+    h1 {
+        margin: 5px 0;
+        font-size: 20px;
+    }
+}
+
+.backstage-filters {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+}
+
+.backstage-filters__sort {
+    flex-grow: 1;
+    flex-shrink: 0;
+    line-height: 30px;
+
+    .filter-sort {
+        text-decoration: none;
+
+        &.filter-sort--active {
+            color: inherit;
+            cursor: default;
+        }
+    }
+
+    .divider {
+        margin-right: 8px;
+        margin-left: 8px;
+    }
+}
+
+.backstage-filter__search {
+    position: relative;
+    width: 270px;
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    .fa {
+        position: absolute;
+        top: 11px;
+        left: 11px;
+        opacity: 0.4;
+    }
+
+    input {
+        padding-left: 30px;
+        background: $white;
+    }
+}
+
+.backstage-list {
+    min-height: 50px;
+    padding: 5px 15px;
+    border: 1px solid $light-gray;
+    background-color: $white;
+}
+
+.backstage-list__help {
+    display: block;
+    margin: 1em 0;
+}
+
+.backstage-list__item {
+    position: relative;
+    padding: 20px 15px;
+    border-bottom: 1px solid $light-gray;
+
+    &:last-child {
+        border: none;
+    }
+
+    .item-details {
+        overflow: hidden;
+        flex-grow: 1;
+        flex-shrink: 1;
+        text-overflow: ellipsis;
+    }
+
+    .item-details__row + .item-details__row {
+        @include clearfix;
+
+        text-overflow: ellipsis;
+    }
+
+    .item-details__trigger {
+        margin-left: 6px;
+    }
+
+    .item-details__description,
+    .item-details__content_type,
+    .item-details__token,
+    .item-details__trigger-words,
+    .item-details__trigger-when,
+    .item-details__url,
+    .item-details__creation {
+        display: inline-block;
+        margin-top: 10px;
+        vertical-align: top;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    .item-details__trigger-words {
+        white-space: nowrap;
+    }
+}
+
+// Backstage Form
+
+.backstage-form {
+    position: relative;
+    padding: 40px 30px 30px;
+    border: 1px solid $light-gray;
+    background-color: $white;
+
+    &.backstage-form__confirmation {
+        padding: 30px 30px 20px;
+    }
+
+    label {
+        font-weight: normal;
+    }
+
+    .backstage-form__title {
+        margin: 5px 0 1.5em;
+    }
+
+    .radio,
+    .checkbox {
+        input {
+            position: relative;
+            top: 2px;
+            width: 16px;
+            height: 16px;
+            margin: 0 5px 0 0;
+        }
+    }
+
+    .form-control {
+        background: $white;
+
+        &:focus {
+            border-color: $primary-color;
+        }
+    }
+
+    .form__help {
+        margin-top: 1em;
+        color: $dark-gray;
+        font-size: 0.95em;
+
+        & + .form__help {
+            margin-top: 0.4em;
+        }
+    }
+}
+
+.backstage-form__footer {
+    overflow: hidden;
+    padding-top: 1.8em;
+    border-top: 1px solid $light-gray;
+    margin-top: 2.5em;
+    text-align: right;
+
+    .has-error {
+        max-width: 50%;
+        margin: 0;
+        float: left;
+
+        .control-label {
+            padding: 0;
+            text-align: left;
+        }
+    }
+}
+
+.integration__icon {
+    position: absolute;
+    right: 20px;
+    width: 80px;
+    height: 80px;
+
+    &.integration-list__icon {
+        top: 50px;
+    }
+}
+
+.integration-option {
+    flex: 0 0 30%;
+    padding: 20px;
+    border: 1px solid $light-gray;
+    margin: 0 30px 30px 0;
+    background-color: $white;
+    border-radius: 4px;
+    text-align: center;
+    transition: all 0.2s ease;
+
+    &:hover {
+        @extend %box-shadow-1;
+
+        color: initial;
+        text-decoration: none;
+    }
+}
+
+.integration-option__image {
+    height: 80px;
+    margin: 0.5em 0 0.7em;
+}
+
+.integration-option__title {
+    margin-bottom: 10px;
+    color: $black;
+}
+
+.integration-option__description {
+    color: $dark-gray;
+}
+
+.emoji-list__table {
+    width: 100%;
+
+    .backstage-list__item {
+        display: table-row;
+    }
+
+    .backstage-list__empty td {
+        padding: 15px 20px;
+    }
+}
+
+.emoji-list__table-header {
+    font-weight: bold;
+}
+
+.emoji-list__name {
+    width: 30%;
+    padding: 20px 0 20px 15px;
+}
+
+.emoji-list__image {
+    width: 15%;
+    padding: 15px 0;
+}
+
+.emoji-list__creator {
+    width: 40%;
+    padding: 15px 0;
+}
+
+.emoji-list__actions {
+    width: 15%;
+    padding: 20px 15px 20px 0;
+}
+
+.add-emoji__upload {
+    position: relative;
+    display: inline-block;
+    margin: 0 10px 10px 0;
+
+    input {
+        position: absolute;
+        z-index: 5;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+    }
+}
+
+.add-emoji__filename,
+.add-emoji__preview {
+    padding-top: 7px;
+}
+
+.bot-list {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    margin-top: 12px;
+    border-radius: 4px;
+    line-height: 24px;
+}
+
+.bot-list__item {
+    padding: 8px 12px;
+    background: alpha-color($black, 0.02);
+    font-size: 13px;
+
+    &:first-child {
+        border: none;
+    }
+
+    &:hover {
+        background: alpha-color($black, 0.06);
+    }
+
+    &.alert {
+        padding: 12px;
+        margin: 0;
+        border-radius: 0;
+    }
+
+    .form-horizontal {
+        .control-label {
+            padding-top: 4px;
+        }
+    }
+}
+
+.bot-details__description {
+    margin: 4px 0;
+}
+
+.bot-disabled {
+    width: 100%;
+    height: 11px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: left;
+
+    span {
+        padding: 0 10px;
+        background-color: #fff;
+        color: #000;
+        font-family: "Open Sans";
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 19px;
+        opacity: 0.9;
+    }
+}
+
+.bot-list-img {
+    width: 32px;
+    height: 32px;
+}
+
+.bot-list-img-container {
+    overflow: hidden;
+    width: 32px;
+    height: 32px;
+    flex: 0 0 32px;
+    margin-right: 15px;
+    border-radius: 50%;
+    float: left;
+}
+
+.bot-img {
+    width: 129px;
+    height: 129px;
+}
+
+.bot-img-container {
+    overflow: hidden;
+    width: 129px;
+    height: 129px;
+    margin-bottom: 20px;
+    border-radius: 50%;
+}
+
+.bot-profile__remove {
+    position: absolute;
+    top: 4px;
+    left: 110px;
+    display: flex;
+    width: 26px;
+    height: 26px;
+    align-items: center;
+    justify-content: center;
+    background: $black;
+    border-radius: 50%;
+    color: $white;
+    text-decoration: none;
+    transition: all 0.15s ease;
+
+    span {
+        font-size: 22px;
+    }
+}
+
+.bot-profile__section {
+    padding-top: 1em;
+    border-top: 1px solid rgba(0, 0, 0, 0.15);
+    margin-bottom: 1em;
+}
+
+.bot-list__disabled {
+    .item-details {
+        color: rgba($black, 0.6);
+    }
+
+    .bot-list {
+        opacity: 0.6;
+    }
+}
+
+.bot-token-has-error {
+    color: #a94442;
+}

webapp/channels/src/sass/routes/_compliance.scss

@@ -0,0 +1,39 @@
+@charset 'UTF-8';
+
+.compliance-panel__table,
+.audit-panel__table,
+.cluster-panel__table {
+    overflow: auto;
+    width: 100%;
+    min-height: 100px;
+    max-height: 70vh;
+    padding: 5px;
+    border: 1px solid $border-gray;
+    margin-top: 10px;
+    background-color: $white;
+}
+
+.compliance-panel,
+.audit-panel {
+    .row {
+        > .form-group {
+            padding-left: 0;
+
+            &:first-child {
+                padding-left: 15px;
+            }
+        }
+
+        label {
+            font-weight: 600;
+        }
+    }
+
+    .fa-refresh {
+        margin-right: 5px;
+    }
+}
+
+.compliance-panel {
+    margin-bottom: 3em;
+}

webapp/channels/src/sass/routes/_docs.scss

@@ -0,0 +1,19 @@
+@charset 'UTF-8';
+
+.docs__page {
+    padding-bottom: 20px;
+    line-height: 1.7;
+
+    > div {
+        width: 1170px;
+        max-width: 100%;
+        padding: 0 15px;
+        margin: 0 auto;
+    }
+
+    h1.markdown__heading {
+        padding-bottom: 1rem;
+        border-bottom: 1px solid #ddd;
+        margin: 1em 0 1em;
+    }
+}

webapp/channels/src/sass/routes/_error-page.scss

@@ -0,0 +1,35 @@
+@charset 'UTF-8';
+
+body {
+    &.error {
+        .container-fluid {
+            display: table;
+            height: 90%;
+        }
+
+        .error__container {
+            display: table-cell;
+            max-width: 800px;
+            padding: 5em 0;
+            margin: 0 auto;
+            color: #555;
+            text-align: left;
+            vertical-align: top;
+        }
+
+        .error__icon {
+            color: #ccc;
+            font-size: 4em;
+        }
+
+        h2 {
+            margin: 0.8em 0 0.5em;
+            font-size: 1.5em;
+            font-weight: 600;
+        }
+
+        p {
+            font-size: 1.2em;
+        }
+    }
+}

webapp/channels/src/sass/routes/_get-app.scss

@@ -0,0 +1,363 @@
+.get-app {
+    min-height: 100vh;
+    background-color: #fff;
+}
+
+.get-app__header {
+    display: flex;
+    width: 100%;
+    height: 102px;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
+
+    .get-app__logo {
+        width: 255px;
+        height: auto;
+        margin: 30px 40px;
+    }
+
+    .get-app__custom-logo {
+        max-width: 240px;
+        max-height: 40px;
+        align-self: center;
+        margin-left: 40px;
+    }
+
+    .get-app__custom-site-name {
+        align-self: center;
+        margin-left: 40px;
+
+        > span {
+            color: #000;
+            font-family: "Open Sans";
+            font-size: 40px;
+            font-weight: bold;
+            line-height: 40px;
+            opacity: 0.8;
+        }
+    }
+
+    .get-app__custom-logo + .get-app__custom-site-name {
+        margin-left: 8px;
+    }
+}
+
+.get-app__dialog {
+    display: flex;
+    width: 1280px;
+    justify-content: center;
+    margin: 80px auto;
+}
+
+.get-app__graphic {
+    flex: 0 0 600px;
+    background-color: var(--sidebar-bg);
+
+    &.mobile {
+        flex: 0 1 300px;
+    }
+
+    > img {
+        max-width: 100%;
+    }
+}
+
+.get-app__dialog-body {
+    flex: 0 1 600px;
+    margin-top: 60px;
+    margin-left: 60px;
+}
+
+.get-app__launching > span {
+    color: #000;
+    font-family: "Open Sans";
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 43px;
+    opacity: 0.8;
+}
+
+.get-app__alternative {
+    margin-top: 8px;
+
+    span {
+        font-family: "Open Sans";
+        font-size: 20px;
+        line-height: 27px;
+        opacity: 0.8;
+    }
+
+    > a {
+        color: #145dbf;
+        text-decoration: none;
+    }
+
+    > span {
+        color: #000;
+    }
+
+    &.redirect-page {
+        margin-top: 24px;
+        margin-bottom: 32px;
+
+        > br.mobile-only {
+            display: none;
+        }
+    }
+}
+
+.get-app__buttons {
+    margin-top: 28px;
+}
+
+.get-app__status {
+    display: inline-block;
+    margin-right: 20px;
+    font-family: "Open Sans";
+
+    > a {
+        padding: 13px 30px;
+        border-radius: 4px;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 22px;
+    }
+}
+
+.get-app__download {
+    border: none !important;
+    background-color: #145dbf !important;
+
+    &:hover {
+        background-color: #145dbf !important;
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    &:active,
+    &:focus {
+        background-color: #1151a6 !important;
+    }
+}
+
+.get-app__continue {
+    border-color: #145dbf !important;
+    color: #145dbf !important;
+
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.1) !important;
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    &:active {
+        background-color: rgba(20, 93, 191, 0.1) !important;
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    &:focus {
+        background-color: rgba(20, 93, 191, 0.1) !important;
+    }
+}
+
+.get-app__preference {
+    display: flex;
+    margin-top: 23px;
+
+    > span {
+        margin-top: -2px;
+        color: #000;
+        font-family: "Open Sans";
+        font-size: 16px;
+        font-weight: normal;
+        line-height: 22px;
+        opacity: 0.8;
+    }
+}
+
+.get-app__checkbox {
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    border: 2px solid $dark-gray;
+    margin-right: 7px;
+    background: none;
+    border-radius: 3px;
+
+    > * {
+        pointer-events: none;
+    }
+
+    &.checked {
+        border: 0;
+
+        svg {
+            fill: #145dbf;
+        }
+    }
+}
+
+.get-app__download-link {
+    margin-top: 40px;
+    color: #000;
+    font-family: "Open Sans";
+    font-size: 16px;
+    line-height: 22px;
+    opacity: 0.8;
+
+    > span > a {
+        color: #145dbf;
+        text-decoration: none;
+    }
+
+    > br {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 1280px) {
+    .get-app__dialog {
+        width: 100%;
+        align-items: center;
+        padding: 0 80px 0 0;
+        margin: 80px 0;
+    }
+
+    .get-app__dialog-body {
+        align-self: baseline;
+        margin-top: 40px;
+    }
+
+    .get-app__graphic {
+        flex-shrink: 1;
+    }
+}
+
+@media only screen and (max-width: 1082px) {
+    .get-app__dialog {
+        flex-direction: column-reverse;
+        padding: 0;
+        margin: 40px 0 0 0;
+        text-align: center;
+    }
+
+    .get-app__dialog-body {
+        display: flex;
+        flex: 0 1 270px;
+        flex-direction: column;
+        align-self: center;
+        margin-top: 0;
+        margin-left: 0;
+    }
+
+    .get-app__preference {
+        align-self: center;
+    }
+
+    .get-app__graphic {
+        flex: 0 1 500px;
+        margin-top: 40px;
+
+        &.mobile {
+            flex: 0 1 347px;
+        }
+
+        > img {
+            max-height: 100%;
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .get-app__header {
+        height: 52px;
+        justify-content: center;
+        box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+
+        .get-app__logo {
+            display: block;
+            width: 170px;
+            height: auto;
+            margin: 0 auto;
+        }
+
+        .get-app__custom-logo {
+            margin-left: 0;
+        }
+
+        .get-app__custom-site-name {
+            margin-left: 0;
+
+            > span {
+                font-size: 24px;
+                font-weight: bold;
+                line-height: 24px;
+            }
+        }
+
+        .get-app__custom-logo + .get-app__custom-site-name {
+            margin-left: 4px;
+        }
+    }
+
+    .get-app__dialog {
+        height: auto;
+        flex-direction: column-reverse;
+        margin: 32px auto;
+    }
+
+    .get-app__graphic {
+        flex-basis: unset !important;
+        margin: 16px 40px 0 40px;
+    }
+
+    .get-app__dialog-body {
+        margin-left: 0;
+    }
+
+    .get-app__launching {
+        padding: 0 24px;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .get-app__alternative {
+        display: none;
+
+        span {
+            font-size: 16px;
+            line-height: 22px;
+        }
+
+        &.redirect-page {
+            display: block;
+
+            > br.mobile-only {
+                display: block;
+            }
+        }
+    }
+
+    .get-app__buttons {
+        margin-top: 25px;
+    }
+
+    .get-app__preference {
+        margin-top: 0;
+    }
+
+    .get-app__status {
+        display: block;
+        margin-right: 0;
+        margin-bottom: 20px;
+
+        > a {
+            width: 219px;
+        }
+    }
+
+    .get-app__download-link {
+        padding: 0 24px;
+
+        > br {
+            display: block;
+        }
+    }
+}

webapp/channels/src/sass/routes/_loading.scss

@@ -0,0 +1,60 @@
+@charset 'UTF-8';
+
+@keyframes move {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0.1;
+    }
+}
+
+.loading-screen {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 60px;
+    text-align: center;
+
+    &.loading-screen--in-middle {
+        display: flex;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .loading__content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        p {
+            display: inline-block;
+            margin: 0 0.2em;
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .round {
+            display: inline-block;
+            width: 4px;
+            height: 4px;
+            margin: 0 2px;
+            animation: move 0.75s infinite linear;
+            background-color: #444;
+            border-radius: 10px;
+            opacity: 0.1;
+        }
+
+        @for $i from 1 through 3 {
+            .round-#{$i} {
+                animation-delay: 0.2s*$i;
+            }
+        }
+    }
+
+    .hideAnimation {
+        display: none;
+    }
+}

webapp/channels/src/sass/routes/_module.scss

@@ -0,0 +1,15 @@
+// Only for combining all the files in this folder
+@import 'about-modal';
+@import 'access-history';
+@import 'activity-log';
+@import 'admin-console';
+@import 'backstage';
+@import 'compliance';
+@import 'docs';
+@import 'error-page';
+@import 'get-app';
+@import 'loading';
+@import 'print';
+@import 'settings';
+@import 'signup';
+@import 'statistics';

webapp/channels/src/sass/routes/_print.scss

@@ -0,0 +1,117 @@
+@charset 'UTF-8';
+
+@media print {
+    * {
+        background: transparent !important;
+        color: black !important;
+        text-shadow: none !important;
+    }
+
+    .post-list__content,
+    .post-list__table,
+    .app__content {
+        display: block;
+    }
+
+    a:not(.mention-link),
+    a:not(.mention-link):visited {
+        text-decoration: underline;
+    }
+
+    a[href^=http]::after {
+        content: ' <' attr(href) '> ';
+    }
+
+    tr,
+    img,
+    pre,
+    blockquote,
+    code,
+    .post,
+    .date-separator {
+        page-break-inside: avoid;
+    }
+
+    .post__header {
+        page-break-after: avoid;
+    }
+
+    thead {
+        display: table-header-group;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    #sidebar-left,
+    #sidebar-right,
+    #channel-header,
+    #post-create,
+    #post-list .more-messages-text,
+    .post .post__header .post-menu,
+    .post .post__content > div.post__img,
+    .attachment__content,
+    .post__body .img-div,
+    .post-image__thumbnail,
+    .post.post--system,
+    #archive-link-home,
+    .channel-intro {
+        display: none;
+    }
+
+    #post-list,
+    #channel_view,
+    #post-list .post-list-holder-by-time {
+        overflow: visible;
+        overflow-y: visible;
+    }
+
+    #app-content {
+        margin-left: 0;
+    }
+
+    #channel_view .inner-wrap.move--left {
+        margin-right: 0;
+    }
+
+    .post-image__columns > div:first-child::before {
+        display: block;
+        content: 'Attachments:';
+        font-weight: bold;
+    }
+
+    .post-image__column {
+        display: inline;
+        width: inherit;
+        height: inherit;
+        border: 0 none;
+        border-color: transparent;
+        background: transparent;
+    }
+
+    .post-image__details {
+        width: 100%;
+        border: 0 none;
+        line-height: 98px;
+
+        .post-image__name::before {
+            content: '[';
+        }
+
+        .post-image__name::after {
+            content: ': ' attr(href) ']';
+        }
+
+        .post-image__name + div {
+            display: none;
+        }
+    }
+}

webapp/channels/src/sass/routes/_settings.scss

@@ -0,0 +1,700 @@
+@charset 'UTF-8';
+
+.user-settings {
+    min-height: 300px;
+
+    .table-responsive {
+        max-width: 560px;
+        max-height: 300px;
+    }
+
+    .authorized-apps__help {
+        margin-top: 7px;
+        font-size: 13px;
+        font-weight: 400;
+    }
+
+    .authorized-apps__wrapper {
+        padding: 10px 0;
+    }
+
+    .authorized-app {
+        display: inline-block;
+        width: 100%;
+
+        &:not(:last-child) {
+            border-bottom: 1px solid #ccc;
+            margin-bottom: 10px;
+        }
+
+        .authorized-app__name {
+            font-weight: 600;
+        }
+
+        .authorized-app__url {
+            font-size: 13px;
+            font-weight: 400;
+        }
+
+        .authorized-app__description,
+        .authorized-app__deauthorize {
+            margin: 5px 0;
+            font-size: 13px;
+        }
+    }
+
+    textarea {
+        resize: vertical;
+    }
+}
+
+.modal {
+    .settings-modal {
+        width: 800px;
+
+        .modal-back {
+            position: absolute;
+            top: 12px;
+            left: 0;
+            width: 50px;
+            height: 40px;
+            font-size: 27px;
+            font-weight: normal;
+            line-height: 32px;
+            text-align: center;
+
+            .fa {
+                position: absolute;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                line-height: inherit;
+            }
+        }
+
+        .modal-body {
+            min-height: calc(100% - 62px);
+            padding: 0;
+            margin: 0 auto;
+        }
+
+        li {
+            list-style: none;
+        }
+
+        label {
+            font-weight: 600;
+
+            &.text-left {
+                text-align: left;
+            }
+
+            &.has-error {
+                font-weight: normal;
+            }
+        }
+
+        .no-padding--left {
+            padding-left: 0;
+        }
+
+        .profile-img {
+            width: 128px;
+            height: 128px;
+            border-radius: 100%;
+        }
+
+        .profile-img-preview {
+            width: 128px;
+            height: 128px;
+            background-position: 50% 50%;
+            background-size: cover;
+            border-radius: 100%;
+        }
+
+        .profile-img__container {
+            position: relative;
+            width: 128px;
+            height: 128px;
+        }
+
+        .profile-img__remove {
+            position: absolute;
+            top: 4px;
+            right: 8px;
+            display: flex;
+            width: 26px;
+            height: 26px;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: none;
+            background: $black;
+            border-radius: 50%;
+            color: $white;
+            text-decoration: none;
+            transition: all 0.15s ease;
+
+            span {
+                margin-top: -3px;
+                font-size: 22px;
+            }
+        }
+
+        .team-img-preview,
+        .team-img__container {
+            position: relative;
+            width: 128px;
+            height: 128px;
+
+            img {
+                width: 100%;
+                height: auto;
+            }
+
+            .img-preview__image {
+                overflow: hidden;
+                border: 1px solid alpha-color($black, 0.15);
+                background-color: $white;
+                border-radius: 6px;
+            }
+
+            div {
+                width: 100%;
+                height: 100%;
+                background-color: $white;
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: cover;
+            }
+        }
+
+        .team-img__remove {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+            border: none;
+            background: $black;
+            border-radius: 50%;
+            color: $white;
+            line-height: 23px;
+            text-align: center;
+            text-decoration: none;
+            transition: all 0.15s ease;
+
+            span {
+                margin-top: -3px;
+                font-size: 22px;
+            }
+        }
+
+        .settings-table {
+            display: table;
+            width: 100%;
+            max-width: 1000px;
+            margin: 0 auto;
+            table-layout: fixed;
+
+            > div {
+                display: table-cell;
+                vertical-align: top;
+            }
+
+            .nav {
+                position: fixed;
+                width: 179px;
+
+                &.position--top {
+                    top: 57px;
+                }
+            }
+
+            .security-links {
+                margin-right: 20px;
+
+                .fa {
+                    margin-right: 6px;
+                }
+            }
+
+            .settings-links {
+                width: 180px;
+                background: var(--sidebar-bg);
+            }
+
+            .settings-content {
+                padding: 0 20px 30px;
+
+                .modal-header {
+                    display: none;
+                }
+
+                .section-max {
+                    @include pie-clearfix;
+                    @include alpha-property('background', $black, 0.05);
+
+                    padding: 1em 0 1.3em;
+                    margin-bottom: 0;
+
+                    .section-title {
+                        margin: 0 0 5px;
+                        font-size: 14px;
+                        line-height: 20px;
+                    }
+                }
+
+                .timezone-container {
+                    display: table;
+                    overflow: visible;
+                    width: 100%;
+                }
+
+                .appearance-section {
+                    .theme-group {
+                        .input-group-addon {
+                            width: 40px;
+                            padding: 4px 5px;
+                        }
+
+                        img {
+                            width: 29px;
+                            border: 1px solid rgba(black, 0.15);
+                        }
+                    }
+
+                    .group--code {
+                        select {
+                            padding-right: 25px;
+                            appearance: none;
+                        }
+
+                        &::before {
+                            @include font-smoothing;
+
+                            position: absolute;
+                            z-index: 5;
+                            top: 11px;
+                            right: 50px;
+                            display: inline-block;
+                            content: '\f0d7';
+                            font: normal normal normal 14px/1 FontAwesome;
+                            pointer-events: none;
+                            text-rendering: auto;
+
+                            .browser--ie & {
+                                display: none;
+                            }
+                        }
+                    }
+
+                    .premade-themes {
+                        margin-bottom: 10px;
+
+                        .theme-label {
+                            overflow: hidden;
+                            margin-top: 5px;
+                            font-weight: 400;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                        }
+
+                        label {
+                            width: 100%;
+                        }
+
+                        svg {
+                            &:hover {
+                                cursor: pointer;
+                            }
+
+                            overflow: hidden;
+                            width: 100%;
+                            height: auto;
+                            border: solid 2px rgba(var(--center-channel-color-rgb), 0.16);
+                            border-radius: 4px;
+                        }
+
+                        .active {
+                            svg {
+                                border-color: var(--sidebar-text-active-border);
+                            }
+                        }
+                    }
+
+                    .theme-elements {
+                        padding-left: 16px;
+
+                        .element {
+                            margin-right: 10px;
+
+                            &:nth-child(2n) {
+                                margin-right: 0;
+                            }
+                        }
+                    }
+
+                    .theme-elements__header {
+                        padding: 1px 0 10px;
+                        border-bottom: 1px solid;
+                        margin: 10px 20px 0 0;
+                        cursor: pointer;
+                        font-size: em(13.5px);
+                        font-weight: 600;
+
+                        .fa-minus {
+                            display: none;
+                        }
+
+                        &.open {
+                            .fa-minus {
+                                display: inline-block;
+                            }
+
+                            .fa-plus {
+                                display: none;
+                            }
+                        }
+
+                        .header__icon {
+                            float: right;
+                            opacity: 0.5;
+                        }
+                    }
+
+                    .theme-elements__body {
+                        max-height: 0;
+                        padding: 0 0 0 24px;
+                        margin: 0 20px 0 0;
+                        background-color: rgba(255, 255, 255, 0.05);
+                        border-radius: 0 0 3px 3px;
+                        overflow-y: hidden;
+                        transition: all 0.4s ease-out;
+
+                        @include pie-clearfix;
+
+                        &.open {
+                            max-height: 1200px;
+                            padding: 24px 0 0 24px;
+                            margin: 0 20px 0 0;
+                        }
+                    }
+
+                    .custom-label {
+                        overflow: hidden;
+                        width: 100%;
+                        font-size: 12px;
+                        font-weight: normal;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+
+                    .input-group-addon {
+                        background: transparent;
+                    }
+
+                    .radio {
+                        label {
+                            font-weight: 600;
+                        }
+                    }
+
+                    .copy-theme-button {
+                        padding: 5px 8px;
+                        border: 1px solid v(link-color);
+                        text-decoration: none;
+                    }
+
+                    .copy-theme-success {
+                        height: 30px;
+                        padding: 5px 12px;
+                        margin-left: 10px;
+                    }
+                }
+
+                .divider-dark {
+                    border-bottom: 1px solid #aaa;
+                }
+
+                .divider-light {
+                    border-bottom: 1px solid lightgrey;
+
+                    & + .divider-light {
+                        display: none;
+                    }
+
+                    & + .divider-dark {
+                        display: none;
+                    }
+                }
+
+                .setting-list {
+                    padding: 0;
+                    list-style-type: none;
+                }
+
+                .setting-box__item {
+                    &:first-child {
+                        padding-top: 3px;
+                    }
+
+                    &:last-child {
+                        hr {
+                            display: none;
+                        }
+                    }
+                }
+
+                .setting-box__token-id {
+                    margin: 4px 0;
+                }
+
+                .setting-box__inline-error {
+                    margin-left: 5px;
+                }
+
+                .setting-list__hint {
+                    margin-top: 20px;
+                }
+
+                .fa-wrapper {
+                    margin: 0 5px;
+                }
+
+                .resend-verification-wrapper::before {
+                    content: "\00a0 ";
+                }
+
+                .mentions-input {
+                    margin-top: 10px;
+                }
+
+                .setting-list-item {
+                    margin-top: 7px;
+                }
+
+                .has-error {
+                    color: #a94442;
+                }
+
+                .file-status {
+                    margin-top: 8px;
+                    color: #555;
+                    font-size: 13px;
+                }
+
+                .confirm-import {
+                    padding: 4px 10px;
+                    margin: 10px 0;
+                }
+            }
+        }
+
+        .disabledMessage {
+            padding: 15px;
+            margin-top: 10px;
+            background-color: rgba(0, 0, 0, 0.1);
+        }
+
+        .nav-pills > li button {
+            color: rgba(var(--sidebar-text-rgb), 0.6);
+        }
+    }
+
+    .nav-pills {
+        > li {
+            margin: 0;
+
+            button {
+                overflow: hidden;
+                width: 100%;
+                padding: 8px 15px;
+                border-radius: 0;
+                color: $gray;
+                text-align: left;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .icon {
+                top: 2px;
+                width: 14px;
+                margin-right: 10px;
+                font-size: 15px;
+                text-align: center;
+            }
+
+            &:hover {
+                button,
+                button:hover,
+                button:focus {
+                    background: var(--sidebar-text-hover-bg);
+                }
+            }
+
+            &.active {
+                div {
+                    background-color: #e1e1e1;
+                    color: #111;
+
+                    &::before {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 5px;
+                        height: 100%;
+                        background: $black;
+                        content: '';
+                    }
+                }
+
+                button,
+                button:hover,
+                button:focus {
+                    position: relative;
+                    border-radius: 0;
+                    font-weight: 400;
+                }
+
+                button {
+                    @include alpha-property(background-color, $black, 0.1);
+                }
+            }
+        }
+    }
+
+    h3 {
+        font-size: em(20px);
+    }
+}
+
+.channel-settings {
+    padding: 0 10px;
+}
+
+.tab-header {
+    margin-bottom: 1em;
+    font-weight: 600;
+}
+
+.setting-name {
+    color: grey;
+    font-weight: 500;
+}
+
+.sel-btn {
+    margin-right: 5px;
+}
+
+.member-div {
+    position: relative;
+    width: 100%;
+    padding: 2px;
+    border-bottom: 1px solid lightgrey;
+    margin: 0;
+
+    &:first-child {
+        border-top: 1px solid lightgrey;
+    }
+
+    .post-profile-img {
+        margin-right: 8px;
+        border-radius: 50px;
+    }
+}
+
+.member-role,
+.member-drop {
+    .fa {
+        margin: 0 0 0 4px;
+        font-size: 16px;
+    }
+
+    .member-menu {
+        top: 24px;
+        right: 0;
+    }
+}
+
+.member-invite {
+    position: absolute;
+    top: 7px;
+    right: 10px;
+}
+
+.member-menu {
+    right: 0;
+    left: auto;
+}
+
+.member-list {
+    width: 100%;
+    overflow-x: visible;
+}
+
+.member-page {
+    padding-top: 50px;
+}
+
+.no-resize {
+    resize: none;
+}
+
+.user-settings__submit-checkbox {
+    padding-top: 0;
+    padding-bottom: 20px;
+}
+
+.section-min {
+    position: relative;
+    padding: 1em;
+    cursor: pointer;
+
+    @include clearfix;
+
+    &:hover {
+        background: #f9f9f9;
+    }
+
+    &:hover .fa {
+        display: inline-block;
+    }
+
+    &:hover .section-min__edit {
+        text-decoration: underline;
+    }
+
+    .d-flex {
+        justify-content: space-between;
+    }
+}
+
+.section-min__title {
+    padding-right: 50px;
+    margin: 0 0 5px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+}
+
+.section-min__edit {
+    margin-bottom: 5px;
+    text-align: right;
+
+    .fa {
+        display: none;
+        margin-right: 5px;
+        font-size: 12px;
+        opacity: 0.5;
+    }
+}
+
+.section-min__describe {
+    @include clearfix;
+
+    opacity: 0.7;
+    text-overflow: ellipsis;
+    white-space: pre;
+}

webapp/channels/src/sass/routes/_signup.scss

@@ -0,0 +1,625 @@
+@charset 'UTF-8';
+
+body {
+    &.announcement-bar--fixed {
+        .signup-header {
+            top: 24px;
+        }
+    }
+}
+
+.signup-header {
+    position: fixed;
+    z-index: 5;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 0 1em 0.2em;
+    background: $bg--gray;
+    line-height: 33px;
+
+    .fa {
+        margin-right: 4px;
+    }
+}
+
+.signup-team__container {
+    position: relative;
+    max-width: 400px;
+    padding: 100px 0 50px;
+    margin: 0 auto;
+
+    .medium-center {
+        width: 70%;
+        margin-right: auto;
+        margin-left: auto;
+    }
+
+    .terms-of-service__markdown {
+        min-width: 100vw;
+        padding-top: 3em;
+        padding-bottom: 3em;
+        background-color: #fff;
+        overflow-y: auto;
+    }
+
+    &.branded {
+        display: flex;
+        max-width: 900px;
+        flex-direction: row;
+
+        .signup__markdown {
+            flex: 1.3 0 0;
+            padding-right: 80px;
+
+            ul + p,
+            ol + p {
+                margin-top: 0.6em;
+            }
+
+            p + ul,
+            p + ol {
+                margin-top: 0.6em;
+            }
+
+            img {
+                max-width: 450px;
+            }
+
+            p {
+                width: 100%;
+                margin: 0;
+                color: lighten($black, 50%);
+                line-height: 1.6em;
+                white-space: pre-wrap;
+                word-break: break-word;
+            }
+        }
+
+        .signup__content {
+            flex: 1 0 0;
+        }
+    }
+
+    &.padding--less {
+        padding-top: 70px;
+    }
+
+    &.terms-of-service__container {
+        max-width: 100%;
+        padding-top: 33px;
+    }
+
+    .terms-of-service__footer {
+        padding-top: 0.5em;
+        padding-bottom: 0.5em;
+
+        .terms-of-service__button-group {
+            padding-top: 1em;
+            padding-bottom: 1em;
+        }
+
+        .terms-of-service__server-error {
+            padding-bottom: 1em;
+        }
+    }
+
+    &.max-width--full {
+        max-width: 100%;
+    }
+
+    .form-control:focus {
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+    }
+
+    .terms-of-service-error__height--fill {
+        height: calc(100vh - 107px - 4em);
+        min-height: calc(100vh - 107px - 4em);
+    }
+
+    .terms-of-service__height--fill {
+        height: calc(100vh - 69px - 3em);
+        min-height: calc(100vh - 69px - 3em);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+        line-height: 1.3;
+    }
+
+    h1 {
+        font-weight: 600;
+    }
+
+    h2 {
+        margin-bottom: 0.8em;
+        font-size: em(30px);
+        font-weight: 600;
+        letter-spacing: -0.5px;
+    }
+
+    h3 {
+        margin: 0 0 1.3em;
+        font-size: 1.5em;
+        font-weight: 600;
+    }
+
+    h4 {
+        margin-bottom: 1em;
+        font-size: em(20px);
+        font-weight: 600;
+    }
+
+    h5 {
+        font-size: em(16px);
+    }
+
+    hr {
+        margin: 2em 0;
+    }
+
+    p {
+        margin-bottom: 1em;
+        color: #555;
+        line-height: 1.5;
+
+        .black,
+        &.black {
+            color: #000;
+        }
+    }
+
+    .input-group {
+        &.input-group--limit {
+            width: 100%;
+            table-layout: fixed;
+
+            .tooltip-inner {
+                word-wrap: break-word;
+            }
+
+            .form-control {
+                display: table-cell;
+                width: 100%;
+                text-align: left;
+            }
+
+            .input-group-addon {
+                display: table-cell;
+                overflow: hidden;
+                width: 50%;
+                text-align: left;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    .inner__content {
+        margin: 30px 0 20px;
+    }
+
+    .block--gray {
+        display: inline-block;
+        padding: 0.85em 1.2em;
+        background: #f2f2f2;
+        border-radius: 3px;
+        font-weight: 600;
+    }
+
+    form {
+        margin-bottom: 0.8em;
+    }
+
+    .signup-team-confirm__container {
+        padding: 100px 0;
+    }
+
+    .signup-team-logo {
+        display: none;
+        width: 210px;
+        margin: 0 0 2em;
+    }
+
+    .signup-team-login {
+        padding-bottom: 10px;
+        font-weight: 600;
+    }
+
+    .signup-team__name {
+        margin: 0.5em 0 0;
+        font-size: 2.2em;
+        font-weight: 600;
+    }
+
+    .signup-team__subdomain {
+        margin: 0.2em 0 1.2em;
+        font-size: 1.5em;
+        font-weight: 300;
+        text-transform: uppercase;
+    }
+
+    .form-control {
+        height: em(38px);
+    }
+
+    .or__container {
+        height: 1px;
+        margin: 2em 0;
+        margin: 2.5em 0 2.5em -1rem;
+        background: #ddd;
+        text-align: left;
+
+        span {
+            position: relative;
+            top: -10px;
+            display: inline-block;
+            width: 40px;
+            background: #fff;
+            font-size: 1.14286em;
+            font-weight: 600;
+            line-height: 20px;
+            text-align: center;
+        }
+    }
+
+    ul {
+        padding-left: 18px;
+        margin-bottom: 0;
+    }
+
+    .btn {
+        padding: em(7px) em(15px);
+        margin-right: 5px;
+        font-size: 1em;
+        font-weight: 600;
+
+        .fa {
+            position: relative;
+            top: 1px;
+            margin: 0;
+            font-size: 17px;
+
+            &:last-child {
+                margin-left: 8px;
+            }
+
+            &:first-child {
+                margin-right: 8px;
+            }
+
+            &.fa--margin-top {
+                position: relative;
+                top: 1px;
+            }
+
+            &.fa-check,
+            &.fa-refresh {
+                left: -2px;
+                margin-right: 0.5em;
+                font-size: 0.9em;
+            }
+        }
+
+        .icon {
+            position: relative;
+            display: inline-block;
+            width: 18px;
+            height: 18px;
+            margin-right: 12px;
+            background-size: 100% 100%;
+            text-align: center;
+        }
+
+        &.btn-custom-login {
+            display: flex;
+            width: 200px;
+            min-width: 200px;
+            height: 40px;
+            align-items: center;
+            padding: 0 24px;
+            margin: 1em 0;
+            border-radius: 2px;
+            color: $white;
+            text-align: left;
+
+            > span {
+                position: relative;
+                display: flex;
+                align-items: center;
+
+                > span {
+                    line-height: normal;
+                }
+            }
+
+            &.gitlab {
+                background: #548;
+
+                &:hover {
+                    background: darken(#548, 10%);
+                }
+
+                .icon {
+                    background-image: url('../images/gitlabLogo.png');
+                }
+            }
+
+            &.google {
+                background: #dd4b39;
+
+                &:hover {
+                    background: darken(#dd4b39, 10%);
+                }
+
+                .icon {
+                    background-image: url('../images/googleLogo.png');
+                }
+            }
+
+            &.office365 {
+                background: #0079d6;
+
+                &:hover {
+                    background: darken(#0079d6, 10%);
+                }
+
+                .icon {
+                    background-image: url('../images/office365Logo.png');
+                }
+            }
+
+            &.openid {
+                background: #0079d6;
+                white-space: normal;
+
+                &:hover {
+                    background: darken(#0079d6, 10%);
+                }
+
+                > span {
+                    > span {
+                        overflow: hidden;
+                        width: 150px;
+                        line-height: normal;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                }
+            }
+
+            &.ldap {
+                background: #3aa1cf;
+
+                &:hover {
+                    background: darken(#3aa1cf, 10%);
+                }
+            }
+
+            &.email {
+                background: $primary-color;
+
+                &:hover {
+                    background: $primary-color--hover;
+                }
+            }
+
+            &.saml {
+                background: #34a28b;
+
+                &:hover {
+                    background: darken(#34a28b, 10%);
+                }
+            }
+
+            &.btn--full {
+                width: 100%;
+                max-width: 350px;
+                text-align: left;
+            }
+
+            &.btn--large {
+                width: 300px;
+            }
+        }
+
+        &.btn-default {
+            color: #444;
+        }
+    }
+
+    .has-error {
+        &.no-padding {
+            padding: 0;
+        }
+
+        .control-label {
+            width: 100%;
+            padding: 0.7em 1em;
+            margin: 1em 0 0;
+            background: #f2f2f2;
+            border-radius: 3px;
+            color: #999;
+            font-size: 14px;
+            font-weight: normal;
+
+            &::before {
+                @extend %font-awesome;
+
+                margin-right: 4px;
+                color: #aaa;
+                content: '\f071';
+            }
+        }
+    }
+
+    .reset-form {
+        position: relative;
+        border-radius: 3px;
+        font-size: 0.95em;
+
+        p {
+            color: inherit;
+        }
+    }
+
+    // Modifier Styles
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        &.sub-heading {
+            margin-bottom: 0;
+            font-weight: 400;
+        }
+
+        &.color--light {
+            font-weight: 300;
+        }
+    }
+
+    .color--light {
+        color: #777;
+    }
+}
+
+.select-team__container {
+    max-width: 800px;
+}
+
+.signup-team-all {
+    max-height: calc(75vh - (108px + 89px));
+    border: 1px solid #ddd;
+    margin: 0 0 20px;
+    border-radius: 2px;
+    border-radius: 4px;
+
+    .signup-team-dir {
+        @include pie-clearfix;
+
+        position: relative;
+        display: flex;
+        max-width: 100%;
+        height: 3.8em;
+        align-items: center;
+        padding-top: 3px;
+        border-top: 1px solid #ddd;
+        background: #fafafa;
+
+        &:hover {
+            background: $white;
+            transition: background-color 0.15s ease;
+        }
+
+        &:first-child {
+            border: none;
+        }
+
+        .tooltip {
+            margin: 10px 0 0 14px;
+        }
+
+        .icon {
+            height: 20px;
+            margin: 0 -8px 0 15px;
+            cursor: pointer;
+            float: left;
+            opacity: 0.45;
+
+            svg {
+                width: 20px;
+                height: 20px;
+            }
+        }
+
+        .fa-lock {
+            position: relative;
+            top: 1px;
+            font-size: 18px;
+        }
+
+        a {
+            display: flex;
+            height: 3.5em;
+            flex: 1 1 auto;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 20px 0 16px;
+            color: inherit;
+            font-size: 1.1em;
+            line-height: 3.6em;
+            text-decoration: none;
+
+            &.disabled {
+                color: $dark-gray;
+                cursor: default;
+            }
+        }
+    }
+
+    .signup-team-dir-err {
+        padding: 5px 15px;
+        border-top: 1px solid #d5d5d5;
+        background: #fafafa;
+        color: inherit;
+
+        &:first-child {
+            border: none;
+        }
+    }
+
+    .signup-team-dir__name {
+        overflow: hidden;
+        width: calc(100% - 50px);
+        float: left;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .signup-team__icon {
+        position: relative;
+        color: $dark-gray;
+        font-size: 1.5em;
+
+        &.fa-spin {
+            top: 16px;
+            right: -2px;
+            font-size: 0.9em;
+        }
+
+        &.fa-info-circle {
+            top: 11px;
+            padding-left: 0.5em;
+            margin-right: 0.3em;
+            float: left;
+            font-size: 1.5em;
+            line-height: 1.5em;
+        }
+    }
+}
+
+.authorize-box {
+    width: 500px;
+    height: 280px;
+    border: 1px solid $black;
+    margin: 100px auto;
+}
+
+.authorize-inner {
+    padding: 20px;
+}
+
+.authorize-btn {
+    margin-right: 6px;
+}
+
+.verify_panel {
+    max-width: 380px;
+    margin: 60px auto auto;
+}

webapp/channels/src/sass/routes/_statistics.scss

@@ -0,0 +1,154 @@
+@charset 'UTF-8';
+
+.grid-statistics {
+    display: grid;
+    gap: 15px;
+    grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
+
+    &__card {
+        min-height: 1px;
+    }
+}
+
+.team_statistics {
+    &--warning {
+        // Adding the !important because this class has less preference in some html elements
+        color: var(--warning-text) !important;
+        font-weight: 600 !important;
+    }
+
+    &--error {
+        // Adding the !important because this class has less preference in some html elements
+        color: var(--error-text) !important;
+        font-weight: 600 !important;
+    }
+
+    &__message {
+        display: flex;
+        align-items: center;
+        font-family: 'Open Sans';
+        font-size: 12px;
+        font-weight: 600;
+        gap: 7px;
+        line-height: 16px;
+
+        &__text {
+            color: var(--error-text);
+            font-size: 14px;
+        }
+
+        &__icon {
+            display: inline-flex;
+            width: 14px;
+            height: 14px;
+            flex-grow: 0;
+            align-items: center;
+        }
+    }
+
+    .total-count {
+        width: 100%;
+        border: 1px solid $light-gray;
+        margin: 1em 0;
+        background: $white;
+        border-radius: 3px;
+        text-align: center;
+
+        &--has-message {
+            margin-bottom: 4px;
+        }
+
+        .title {
+            padding: 7px 10px;
+            border-bottom: 1px solid $light-gray;
+            font-size: 13px;
+            font-weight: 400;
+            text-align: left;
+
+            span {
+                display: inline-block;
+                overflow: hidden;
+                width: calc(100% - 20px);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .fa {
+                margin: 0;
+                color: #555;
+                float: right;
+                font-size: 16px;
+            }
+        }
+
+        .content {
+            overflow: auto;
+            padding: 0.3em 0 0.35em;
+            color: #555;
+            font-size: 30px;
+            font-weight: 600;
+        }
+    }
+
+    .total-count--day {
+        width: 760px;
+        height: 275px;
+        padding: 5px 10px 10px;
+        border: 1px solid $light-gray;
+        margin: 10px;
+        background: $white;
+        clear: both;
+
+        > div {
+            font-size: 18px;
+            font-weight: 300;
+        }
+    }
+
+    .recent-active-users {
+        table {
+            width: 100%;
+            table-layout: fixed;
+        }
+
+        .content {
+            overflow: auto;
+            max-height: 400px;
+            padding: 0;
+        }
+
+        tr {
+            &:first-child {
+                td {
+                    border-top: none;
+                }
+            }
+
+            td {
+                @include clearfix;
+
+                padding: 5px 5px 6px;
+                border-top: 1px solid $light-gray;
+                border-left: 1px solid $light-gray;
+                font-size: 13px;
+                font-weight: 400;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+
+                &:first-child {
+                    border-left: none;
+                }
+            }
+        }
+    }
+
+    .team-statistics__header-row {
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .team-statistics__team-filter {
+        display: inline-block;
+        width: 200px;
+    }
+}

webapp/channels/src/sass/styles.scss

@@ -0,0 +1,15 @@
+@charset "utf-8";
+
+// Dependencies
+@import '~bootstrap/dist/css/bootstrap.css';
+@import '~font-awesome/css/font-awesome.css';
+
+// styles.scss
+@import 'utils/module';
+@import 'base/module';
+@import 'routes/module';
+@import 'layout/module';
+@import 'components/module';
+@import 'responsive/module';
+@import 'widgets/module';
+@import 'admin_console_base/module';

webapp/channels/src/sass/utils/_animations.scss

@@ -0,0 +1,39 @@
+@charset 'UTF-8';
+
+@keyframes spin {
+    from {
+        transform: scale(1) rotate(0deg);
+    }
+
+    to {
+        transform: scale(1) rotate(360deg);
+    }
+}
+
+@keyframes highlight {
+    from {
+        @include alpha-property(background, $yellow, 0.5);
+    }
+
+    to {
+        background: none;
+    }
+}
+
+@mixin fade-in {
+    animation-duration: 0.3s;
+    animation-iteration-count: 1;
+    animation-name: fadeInOpacity;
+    animation-timing-function: ease-in;
+    opacity: 1;
+}
+
+@keyframes fadeInOpacity {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

webapp/channels/src/sass/utils/_flex.scss

@@ -0,0 +1,19 @@
+.d-flex {
+    display: -webkit-box !important;
+    display: -ms-flexbox !important;
+    display: flex !important;
+}
+
+.align-items-center {
+    align-items: center !important;
+    -webkit-box-align: center !important;
+    -ms-flex-align: center !important;
+}
+
+.col {
+    max-width: 100%;
+    flex-basis: 0;
+    flex-grow: 1;
+    -ms-flex-positive: 1;
+    -ms-flex-preferred-size: 0;
+}

webapp/channels/src/sass/utils/_functions.scss

@@ -0,0 +1,43 @@
+@charset "UTF-8";
+
+@use "sass:math";
+
+@function em($pixels, $context: 14px) {
+    @return (math.div($pixels, $context) * 1em);
+}
+
+@function v($var) {
+    @return var(--#{$var});
+}
+
+@function alpha-color($color, $amount) {
+    @return rgba($color, $amount);
+}
+
+%popover-box-shadow {
+    box-shadow: rgba(black, 0.175) 1px -3px 12px;
+}
+
+%box-shadow-1 {
+    box-shadow: rgba(black, 0.1) 0 1px 16px;
+}
+
+%font-awesome {
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: auto;
+    transform: translate(0, 0);
+}
+
+@mixin unselectable {
+    -webkit-user-select: none; /* Chrome/Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+ */
+
+    /* Rules below not implemented in browsers yet */
+    -o-user-select: none;
+    user-select: none;
+}

webapp/channels/src/sass/utils/_mixins.scss

@@ -0,0 +1,362 @@
+@charset "utf-8";
+
+@mixin file-icon($path) {
+    background-image: url($path);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 32px 40px;
+}
+
+@mixin alpha-property($property, $color, $opacity) {
+    #{$property}: rgba($color, $opacity);
+}
+
+@mixin font-smoothing($value: antialiased) {
+    @if $value == antialiased {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    @else {
+        -webkit-font-smoothing: subpixel-antialiased;
+        -moz-osx-font-smoothing: auto;
+    }
+}
+
+@mixin cursor($value) {
+    cursor: -webkit-$value;
+    cursor: zoom-$value;
+}
+
+// From https://gist.github.com/kaelig/7528069
+@mixin text-clamp($lines: 2, $line-height: false) {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $lines;
+
+    // Fallback for non-Webkit browsers
+    // (won't show `…` at the end of the block)
+    @if $line-height {
+        max-height: $line-height * $lines * 1px;
+    }
+}
+
+@mixin button-style--none {
+    padding: 0;
+    border: none;
+    background: transparent;
+
+    &:focus {
+        outline: 0;
+        text-decoration: none;
+    }
+
+    &.btn {
+        padding: 6px 12px;
+    }
+
+    &.btn--block {
+        width: 100%;
+        text-align: left;
+    }
+
+    &:hover,
+    &:active {
+        text-decoration: none;
+    }
+}
+
+@mixin fit-content {
+    width: fit-content;
+    width: -moz-fit-content;
+}
+
+@mixin clearfix {
+    overflow: hidden;
+    *zoom: 1;
+}
+
+@mixin pie-clearfix {
+    &::after {
+        display: table;
+        clear: both;
+        content: "";
+    }
+
+    *zoom: 1;
+}
+
+@mixin tertiary-button {
+    display: inline-flex;
+    align-items: center;
+    border: 0;
+    background: rgba(var(--button-bg-rgb), 0.08);
+    border-radius: 4px;
+    color: var(--button-bg);
+    font-weight: 600;
+    transition: all 0.15s ease-out;
+
+    &:disabled {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        color: rgba(var(--center-channel-color-rgb), 0.32);
+    }
+
+    &:hover:enabled {
+        background: rgba(var(--button-bg-rgb), 0.12);
+    }
+
+    &:active:enabled {
+        background: rgba(var(--button-bg-rgb), 0.16);
+    }
+
+    i {
+        display: flex;
+        font-size: 18px;
+
+        &::before {
+            margin: 0 7px 0 0;
+        }
+    }
+}
+
+@mixin primary-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: var(--button-bg);
+    border-radius: 4px;
+    color: var(--button-color);
+    font-weight: 600;
+    transition: all 0.15s ease-out;
+
+    &:hover {
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), var(--button-bg);
+    }
+
+    &:active {
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), var(--button-bg);
+    }
+
+    &:focus {
+        box-sizing: border-box;
+        border: 2px solid var(--sidebar-text-active-border);
+        outline: none;
+    }
+
+    &:disabled {
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+        color: rgba(var(--center-channel-color-rgb), 0.32);
+        cursor: not-allowed;
+    }
+
+    i {
+        display: flex;
+        font-size: 18px;
+    }
+}
+
+@mixin secondary-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--denim-button-bg);
+    background: var(--center-channel-bg);
+    border-radius: 4px;
+    color: var(--button-bg);
+    font-weight: 600;
+    transition: all 0.15s ease-out;
+
+    &:hover {
+        background: rgba(var(--denim-button-bg-rgb), 0.08);
+    }
+
+    &:active {
+        background: rgba(var(--denim-button-bg-rgb), 0.16);
+    }
+
+    &:focus {
+        box-sizing: border-box;
+        border: 2px solid var(--sidebar-text-active-border);
+        outline: none;
+    }
+
+    &:disabled {
+        border: rgba(var(--center-channel-color-rgb), 0.32);
+        color: rgba(var(--center-channel-color-rgb), 0.32);
+        cursor: not-allowed;
+    }
+
+    i {
+        display: flex;
+        font-size: 18px;
+    }
+}
+
+@mixin button-focus {
+    &:focus {
+        border-width: 0;
+        box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
+    }
+
+    &:focus:not(:focus-visible) {
+        border-width: 0;
+        box-shadow: none;
+    }
+
+    &:focus-visible {
+        border-width: 0;
+        box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
+    }
+}
+
+@mixin button-xsmall {
+    height: 24px;
+    padding: 4px 6px;
+    font-size: 11px;
+    line-height: 16px;
+}
+
+@mixin button-small {
+    height: 32px;
+    padding: 0 16px;
+    font-size: 12px;
+    line-height: 10px;
+}
+
+@mixin button-medium {
+    height: 40px;
+    padding: 0 20px;
+    font-size: 14px;
+    line-height: 14px;
+}
+
+@mixin button-large {
+    height: 48px;
+    padding: 0 24px;
+    font-size: 16px;
+    line-height: 18px;
+}
+
+@mixin link {
+    border: none;
+    box-shadow: none;
+    color: var(--link-color);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+
+    &:hover,
+    &:active,
+    &:focus {
+        text-decoration-line: underline;
+    }
+
+    &:disabled {
+        color: rgba(var(--center-channel-color-rgb), 0.32);
+        cursor: not-allowed;
+        text-decoration: none;
+    }
+}
+
+@mixin simple-in-and-out-after($classPrefix, $transition_time: 300ms) {
+    .#{$classPrefix}--enter-from-after {
+        &-enter {
+            transform: translateY(-100vh);
+        }
+
+        &-enter-active {
+            transform: translateY(0);
+            transition: transform $transition_time ease-in-out;
+        }
+
+        &-enter-done {
+            transform: translateY(0);
+        }
+    }
+
+    .#{$classPrefix}--exit-to-after {
+        &-exit {
+            transform: translateY(0);
+        }
+
+        &-exit-active {
+            transform: translateY(-100vh);
+            transition: transform $transition_time ease-in-out;
+        }
+
+        &-exit-done {
+            transform: translateY(-100vh);
+        }
+    }
+}
+
+@mixin simple-in-and-out-before($classPrefix, $transition_time: 300ms) {
+    .#{$classPrefix}--enter-from-before {
+        &-enter {
+            transform: translateY(100vh);
+        }
+
+        &-enter-active {
+            transform: translateY(0);
+            transition: transform $transition_time ease-in-out;
+        }
+
+        &-enter-done {
+            transform: translateY(0);
+        }
+    }
+
+    .#{$classPrefix}--exit-to-before {
+        &-exit {
+            transform: translateY(0);
+        }
+
+        &-exit-active {
+            transform: translateY(100vh);
+            transition: transform $transition_time ease-in-out;
+        }
+
+        &-exit-done {
+            transform: translateY(100vh);
+        }
+    }
+}
+
+@mixin simple-in-and-out($classPrefix, $transition_time: 300ms) {
+    @include simple-in-and-out-before($classPrefix, $transition_time);
+    @include simple-in-and-out-after($classPrefix, $transition_time);
+}
+
+@mixin shake-horizontally {
+    animation: shake-horizontally 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    backface-visibility: hidden;
+    perspective: 1000px;
+    transform: translate3d(0, 0, 0);
+}
+
+@keyframes shake-horizontally {
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%,
+    60% {
+        transform: translate3d(4px, 0, 0);
+    }
+}

webapp/channels/src/sass/utils/_modifiers.scss

@@ -0,0 +1,78 @@
+@charset 'UTF-8';
+$positions: 't b l r';
+
+$positions: 't'top,
+    'b'bottom,
+    'l'left,
+    'r'right;
+
+@for $i from 0 through 20 {
+    @each $label,
+        $position in $positions {
+        .p#{$label}-#{$i} {
+            padding-#{$position}: #{$i*4}px !important;
+        }
+    }
+
+    @each $label,
+        $position in $positions {
+        .m#{$label}-#{$i} {
+            margin-#{$position}: #{$i*4}px !important;
+        }
+    }
+
+    .m-#{$i} {
+        margin: #{$i*4}px !important;
+    }
+
+    .p-#{$i} {
+        padding: #{$i*4}px !important;
+    }
+
+    .px-#{$i} {
+        padding: 0 #{$i*4}px 0 #{$i*4}px !important;
+    }
+
+    .py-#{$i} {
+        padding: #{$i*4}px 0 #{$i*4}px 0 !important;
+    }
+
+    .h-#{$i} {
+        height: #{$i*4}px !important;
+    }
+}
+
+.d-block {
+    display: block;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.a11y--focused {
+    border-radius: 4px;
+    box-shadow: 0 0 1px 3px rgba(var(--link-color-rgb), 0.5), 0 0 0 1px var(--link-color);
+}
+
+.pos-relative {
+    position: relative;
+}
+
+.hidden-label {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    margin: -1px;
+}
+
+.overflow--visible {
+    overflow: visible;
+}
+
+.bg--white {
+    background: var(--center-channel-bg);
+}