PLT-6905 - Updating channel header design (#6789)

* PLT-6905 - Updating channel header design

* Updating border-radius

* Updating radius for wide icons

* Updating trigger for overlay

* Updating UI for channel header

* Updating channel header sizing

* Updating channel header css

* Updating sidebar css

* Updating status icons

* Adjusting border

* Updating comment

* Removing type from status icon

* Fixing UI issues for the channel header/sidebar

* make "Add a channel description" open the channel header modal

* Updating status and opacity

* Updating stauts icon positioning

* Updating description and heading size

* Updating UI changes

* Updating UI changes

* add a focused class to the parent div .search__form and then remove when hover away

* Fix active state for pinned posts icon

* Updating UI changes

* Update channel header text

webapp/components/analytics/table_chart.jsx

@@ -31,6 +31,7 @@ export default function TableChart(props) {
                                         <tr key={'table-entry-' + item.name}>
                                             <td>
                                                 <OverlayTrigger
+                                                    trigger={['hover', 'focus']}
                                                     delayShow={Constants.OVERLAY_TIME_DELAY}
                                                     placement='top'
                                                     overlay={tooltip}

webapp/components/change_url_modal.jsx

@@ -180,6 +180,7 @@ export default class ChangeUrlModal extends React.Component {
                             <div className='col-sm-10'>
                                 <div className={urlClass}>
                                     <OverlayTrigger
+                                        trigger={['hover', 'focus']}
                                         delayShow={Constants.OVERLAY_TIME_DELAY}
                                         placement='top'
                                         overlay={urlTooltip}

webapp/components/channel_header.jsx

@@ -64,6 +64,7 @@ export default class ChannelHeader extends React.Component {
         this.hideLeaveChannelModal = this.hideLeaveChannelModal.bind(this);
 
         const state = this.getStateFromStores();
+        state.showEditChannelHeaderModal = false;
         state.showEditChannelPurposeModal = false;
         state.showMembersModal = false;
         state.showRenameChannelModal = false;
@@ -90,7 +91,8 @@ export default class ChannelHeader extends React.Component {
             enableFormatting: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', true),
             isBusy: WebrtcStore.isBusy(),
             isFavorite: channel && ChannelUtils.isFavoriteChannel(channel),
-            showLeaveChannelModal: false
+            showLeaveChannelModal: false,
+            pinsOpen: SearchStore.getIsPinnedPosts()
         };
     }
 
@@ -281,7 +283,8 @@ export default class ChannelHeader extends React.Component {
 
     render() {
         const flagIcon = Constants.FLAG_ICON_SVG;
-        const pinIcon = Constants.PIN_ICON;
+        const pinIcon = Constants.PIN_ICON_SVG;
+        const mentionsIcon = Constants.MENTIONS_ICON_SVG;
 
         if (!this.validState()) {
             // Use an empty div to make sure the header's height stays constant
@@ -300,6 +303,15 @@ export default class ChannelHeader extends React.Component {
             </Tooltip>
         );
 
+        const pinnedPostTooltip = (
+            <Tooltip id='pinnedPostTooltip'>
+                <FormattedMessage
+                    id='channel_header.pinnedPosts'
+                    defaultMessage='Pinned Posts'
+                />
+            </Tooltip>
+        );
+
         const flaggedTooltip = (
             <Tooltip
                 id='flaggedTooltip'
@@ -382,13 +394,14 @@ export default class ChannelHeader extends React.Component {
                 );
 
                 webrtc = (
-                    <div className='webrtc__header'>
+                    <div className='webrtc__header channel-header__icon'>
                         <a
                             href='#'
                             onClick={() => this.initWebrtc(otherUserId, !isOffline)}
                             disabled={isOffline}
                         >
                             <OverlayTrigger
+                                trigger={['hover', 'focus']}
                                 delayShow={Constants.WEBRTC_TIME_DELAY}
                                 placement='bottom'
                                 overlay={webrtcTooltip}
@@ -754,11 +767,62 @@ export default class ChannelHeader extends React.Component {
             }
         }
 
-        let headerText;
-        if (this.state.enableFormatting) {
-            headerText = TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false, siteURL: getSiteURL()});
+        let headerTextContainer;
+        if (channel.header) {
+            let headerTextElement;
+            if (this.state.enableFormatting) {
+                headerTextElement = (
+                    <div
+                        onClick={Utils.handleFormattedTextClick}
+                        className='channel-header__description'
+                        dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.header, {singleline: true, mentionHighlight: false, siteURL: getSiteURL()})}}
+                    />
+                );
+            } else {
+                headerTextElement = (
+                    <div
+                        onClick={Utils.handleFormattedTextClick}
+                        className='channel-header__description'
+                    >
+                        {channel.header}
+                    </div>
+                );
+            }
+
+            headerTextContainer = (
+                <OverlayTrigger
+                    trigger={'click'}
+                    placement='bottom'
+                    rootClose={true}
+                    overlay={popoverContent}
+                    ref='headerOverlay'
+                >
+                    {headerTextElement}
+                </OverlayTrigger>
+            );
         } else {
-            headerText = channel.header;
+            headerTextContainer = (
+                <a
+                    href='#'
+                    className='channel-header__description light'
+                    onClick={() => this.setState({showEditChannelHeaderModal: true})}
+                >
+                    <FormattedMessage
+                        id='channel_header.addChannelHeader'
+                        defaultMessage='Add a channel description'
+                    />
+                </a>
+            );
+        }
+
+        let editHeaderModal;
+        if (this.state.showEditChannelHeaderModal) {
+            editHeaderModal = (
+                <EditChannelHeaderModal
+                    onHide={() => this.setState({showEditChannelHeaderModal: false})}
+                    channel={channel}
+                />
+            );
         }
 
         let toggleFavoriteTooltip;
@@ -784,6 +848,7 @@ export default class ChannelHeader extends React.Component {
 
         const toggleFavorite = (
             <OverlayTrigger
+                trigger={['hover', 'focus']}
                 delayShow={Constants.OVERLAY_TIME_DELAY}
                 placement='bottom'
                 overlay={toggleFavoriteTooltip}
@@ -792,7 +857,7 @@ export default class ChannelHeader extends React.Component {
                     id='toggleFavorite'
                     href='#'
                     onClick={this.toggleFavorite}
-                    className='channel-header__favorites'
+                    className={'channel-header__favorites ' + (this.state.isFavorite ? 'active' : 'inactive')}
                 >
                     <i className={'icon fa ' + (this.state.isFavorite ? 'fa-star' : 'fa-star-o')}/>
                 </a>
@@ -822,19 +887,23 @@ export default class ChannelHeader extends React.Component {
 
         const leaveChannelModal = this.createLeaveChannelModal();
 
+        let pinnedIconClass = 'channel-header__icon';
+        if (this.state.pinsOpen) {
+            pinnedIconClass += ' active';
+        }
+
         return (
             <div
                 id='channel-header'
-                className='channel-header'
+                className='channel-header alt'
             >
-                <table className='channel-header alt'>
+                <table>
                     <tbody>
                         <tr>
                             <th>
                                 <div className='channel-header__info'>
-                                    {webrtc}
                                     {toggleFavorite}
-                                    <div className='dropdown'>
+                                    <div className='channel-header__title dropdown'>
                                         <a
                                             id='channelHeaderDropdown'
                                             href='#'
@@ -844,7 +913,7 @@ export default class ChannelHeader extends React.Component {
                                             aria-expanded='true'
                                         >
                                             <strong className='heading'>{channelTitle} </strong>
-                                            <span className='fa fa-chevron-down header-dropdown__icon'/>
+                                            <span className='fa fa-angle-down header-dropdown__icon'/>
                                         </a>
                                         <ul
                                             className='dropdown-menu'
@@ -854,35 +923,33 @@ export default class ChannelHeader extends React.Component {
                                             {dropdownContents}
                                         </ul>
                                     </div>
-                                    <OverlayTrigger
-                                        trigger={'click'}
-                                        placement='bottom'
-                                        rootClose={true}
-                                        overlay={popoverContent}
-                                        ref='headerOverlay'
-                                    >
-                                        <div
-                                            onClick={Utils.handleFormattedTextClick}
-                                            className='description'
-                                            dangerouslySetInnerHTML={{__html: headerText}}
-                                        />
-                                    </OverlayTrigger>
+                                    {headerTextContainer}
                                 </div>
                             </th>
-                            <th className='header-list__right'>
+                            <th>
+                                {webrtc}
+                            </th>
+                            <th>
                                 {popoverListMembers}
-                                <a
-                                    href='#'
-                                    type='button'
-                                    id='pinnedPostsButton'
-                                    className='pinned-posts-button'
-                                    onClick={this.getPinnedPosts}
+                            </th>
+                            <th>
+                                <OverlayTrigger
+                                    trigger={['hover', 'focus']}
+                                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                                    placement='bottom'
+                                    overlay={pinnedPostTooltip}
                                 >
-                                    <span
-                                        dangerouslySetInnerHTML={{__html: pinIcon}}
-                                        aria-hidden='true'
-                                    />
-                                </a>
+                                    <div
+                                        className={pinnedIconClass}
+                                        onClick={this.getPinnedPosts}
+                                    >
+                                        <span
+                                            className='icon icon__pin'
+                                            dangerouslySetInnerHTML={{__html: pinIcon}}
+                                            aria-hidden='true'
+                                        />
+                                    </div>
+                                </OverlayTrigger>
                             </th>
                             <th className='search-bar__container'>
                                 <NavbarSearchBox
@@ -891,47 +958,44 @@ export default class ChannelHeader extends React.Component {
                                 />
                             </th>
                             <th>
-                                <div className='dropdown channel-header__links search-btns'>
-                                    <OverlayTrigger
-                                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                                        placement='bottom'
-                                        overlay={recentMentionsTooltip}
-                                    >
-                                        <a
-                                            id='searchMentions'
-                                            href='#'
-                                            type='button'
-                                            onClick={this.searchMentions}
-                                        >
-                                            {'@'}
-                                        </a>
-                                    </OverlayTrigger>
-                                </div>
+                                <OverlayTrigger
+                                    trigger={['hover', 'focus']}
+                                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                                    placement='bottom'
+                                    overlay={recentMentionsTooltip}
+                                >
+                                    <div className='channel-header__icon icon--hidden'>
+                                        <span
+                                            className='icon icon__mentions'
+                                            dangerouslySetInnerHTML={{__html: mentionsIcon}}
+                                            aria-hidden='true'
+                                        />
+                                    </div>
+                                </OverlayTrigger>
                             </th>
                             <th>
-                                <div className='dropdown channel-header__links search-btns'>
-                                    <OverlayTrigger
-                                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                                        placement='bottom'
-                                        overlay={flaggedTooltip}
+                                <OverlayTrigger
+                                    trigger={['hover', 'focus']}
+                                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                                    placement='bottom'
+                                    overlay={flaggedTooltip}
+                                >
+                                    <div
+                                        className='channel-header__icon icon--hidden'
+                                        onClick={this.getFlagged}
+
                                     >
-                                        <a
-                                            id='flaggedPostsButton'
-                                            href='#'
-                                            type='button'
-                                            onClick={this.getFlagged}
-                                        >
-                                            <span
-                                                className='icon icon__flag'
-                                                dangerouslySetInnerHTML={{__html: flagIcon}}
-                                            />
-                                        </a>
-                                    </OverlayTrigger>
-                                </div>
+                                        <span
+                                            className='icon icon__flag'
+                                            dangerouslySetInnerHTML={{__html: flagIcon}}
+                                        />
+                                    </div>
+                                </OverlayTrigger>
                             </th>
                         </tr>
                     </tbody>
                 </table>
+                {editHeaderModal}
                 {editPurposeModal}
                 {channelMembersModal}
                 {leaveChannelModal}

webapp/components/channel_info_modal.jsx

@@ -29,6 +29,8 @@ export default class ChannelInfoModal extends React.Component {
     render() {
         let channel = this.props.channel;
         let channelIcon;
+        const globeIcon = Constants.GLOBE_ICON_SVG;
+        const lockIcon = Constants.LOCK_ICON_SVG;
 
         if (!channel) {
             const notFound = Utils.localizeMessage('channel_info.notFound', 'No Channel Found');
@@ -43,9 +45,19 @@ export default class ChannelInfoModal extends React.Component {
         }
 
         if (channel.type === 'O') {
-            channelIcon = (<span className='fa fa-globe'/>);
+            channelIcon = (
+                <span
+                    className='icon icon__globe icon--body'
+                    dangerouslySetInnerHTML={{__html: globeIcon}}
+                />
+            );
         } else if (channel.type === 'P') {
-            channelIcon = (<span className='fa fa-lock'/>);
+            channelIcon = (
+                <span
+                    className='icon icon__globe icon--body'
+                    dangerouslySetInnerHTML={{__html: lockIcon}}
+                />
+            );
         }
 
         const channelURL = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;

webapp/components/create_team/components/team_url.jsx

@@ -178,6 +178,7 @@ export default class TeamUrl extends React.Component {
                             <div className='col-sm-11'>
                                 <div className='input-group input-group--limit'>
                                     <OverlayTrigger
+                                        trigger={['hover', 'focus']}
                                         delayShow={Constants.OVERLAY_TIME_DELAY}
                                         placement='top'
                                         overlay={urlTooltip}

webapp/components/file_attachment.jsx

@@ -105,6 +105,7 @@ export default class FileAttachment extends React.Component {
         if (this.props.compactDisplay) {
             filenameOverlay = (
                 <OverlayTrigger
+                    trigger={['hover', 'focus']}
                     delayShow={1000}
                     placement='top'
                     overlay={<Tooltip id='file-name__tooltip'>{fileName}</Tooltip>}
@@ -126,6 +127,7 @@ export default class FileAttachment extends React.Component {
         } else {
             filenameOverlay = (
                 <OverlayTrigger
+                    trigger={['hover', 'focus']}
                     delayShow={1000}
                     placement='top'
                     overlay={<Tooltip id='file-name__tooltip'>{Utils.localizeMessage('file_attachment.download', 'Download') + ' "' + fileName + '"'}</Tooltip>}

webapp/components/navbar.jsx

@@ -279,6 +279,7 @@ export default class Navbar extends React.Component {
 
     createDropdown(channel, channelTitle, isSystemAdmin, isTeamAdmin, isChannelAdmin, isDirect, isGroup, popoverContent) {
         const isAdmin = isSystemAdmin || isTeamAdmin;
+        const infoIcon = Constants.INFO_ICON_SVG;
 
         if (channel) {
             let viewInfoOption;
@@ -599,7 +600,13 @@ export default class Navbar extends React.Component {
                             className='description'
                             rootClose={true}
                         >
-                            <div className='pull-right description info-popover'/>
+                            <div className='pull-right description navbar-right__icon info-popover'>
+                                <span
+                                    className='icon icon__info'
+                                    dangerouslySetInnerHTML={{__html: infoIcon}}
+                                    aria-hidden='true'
+                                />
+                            </div>
                         </OverlayTrigger>
                         <a
                             href='#'
@@ -652,6 +659,8 @@ export default class Navbar extends React.Component {
 
     createCollapseButtons(currentId) {
         var buttons = [];
+        const menuIcon = Constants.MENU_ICON_SVG;
+
         if (currentId == null) {
             buttons.push(
                 <button
@@ -688,9 +697,11 @@ export default class Navbar extends React.Component {
                             defaultMessage='Toggle sidebar'
                         />
                     </span>
-                    <span className='icon-bar'/>
-                    <span className='icon-bar'/>
-                    <span className='icon-bar'/>
+                    <span
+                        className='icon icon__menu'
+                        dangerouslySetInnerHTML={{__html: menuIcon}}
+                        aria-hidden='true'
+                    />
                     <NotifyCounts/>
                 </button>
             );
@@ -699,7 +710,7 @@ export default class Navbar extends React.Component {
                 <button
                     key='navbar-toggle-menu'
                     type='button'
-                    className='navbar-toggle menu-toggle pull-right'
+                    className='navbar-toggle navbar-right__icon menu-toggle pull-right'
                     data-toggle='collapse'
                     data-target='#sidebar-nav'
                     onClick={this.toggleRightSidebar}
@@ -917,13 +928,18 @@ export default class Navbar extends React.Component {
 
         var collapseButtons = this.createCollapseButtons(currentId);
 
+        const searchIcon = Constants.SEARCH_ICON_SVG;
         const searchButton = (
             <button
                 type='button'
-                className='navbar-toggle navbar-search pull-right'
+                className='navbar-toggle navbar-right__icon navbar-search pull-right'
                 onClick={this.showSearch}
             >
-                <span className='fa fa-search icon-search icon--white'/>
+                <span
+                    className='icon icon__search'
+                    dangerouslySetInnerHTML={{__html: searchIcon}}
+                    aria-hidden='true'
+                />
             </button>
         );
 

webapp/components/popover_list_members/popover_list_members.jsx

@@ -21,7 +21,7 @@ import {canManageMembers} from 'utils/channel_utils.jsx';
 import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {Popover, Overlay} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, Popover, Overlay} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 import {browserHistory} from 'react-router/es6';
 
@@ -94,6 +94,7 @@ export default class PopoverListMembers extends React.Component {
         const isSystemAdmin = UserStore.isSystemAdminForCurrentUser();
         const isTeamAdmin = TeamStore.isTeamAdminForCurrentTeam();
         const isChannelAdmin = ChannelStore.isChannelAdminForCurrentChannel();
+        const membersIcon = Constants.MEMBERS_ICON_SVG;
 
         if (members && teamMembers) {
             members.sort((a, b) => {
@@ -104,20 +105,9 @@ export default class PopoverListMembers extends React.Component {
             });
 
             members.forEach((m, i) => {
-                let button = '';
+                let messageIcon = '';
                 if (currentUserId !== m.id && this.props.channel.type !== Constants.DM_CHANNEl) {
-                    button = (
-                        <a
-                            href='#'
-                            className='btn-message'
-                            onClick={(e) => this.handleShowDirectChannel(m, e)}
-                        >
-                            <FormattedMessage
-                                id='members_popover.msg'
-                                defaultMessage='Message'
-                            />
-                        </a>
-                    );
+                    messageIcon = Constants.MESSAGE_ICON_SVG;
                 }
 
                 let name = '';
@@ -129,12 +119,13 @@ export default class PopoverListMembers extends React.Component {
                     popoverHtml.push(
                         <div
                             className='more-modal__row'
+                            onClick={(e) => this.handleShowDirectChannel(m, e)}
                             key={'popover-member-' + i}
                         >
                             <ProfilePicture
                                 src={Client4.getProfilePictureUrl(m.id, m.last_picture_update)}
-                                width='26'
-                                height='26'
+                                width='32'
+                                height='32'
                             />
                             <div className='more-modal__details'>
                                 <div
@@ -146,7 +137,11 @@ export default class PopoverListMembers extends React.Component {
                             <div
                                 className='more-modal__actions'
                             >
-                                {button}
+                                <span
+                                    className='icon icon__message'
+                                    dangerouslySetInnerHTML={{__html: messageIcon}}
+                                    aria-hidden='true'
+                                />
                             </div>
                         </div>
                     );
@@ -175,21 +170,15 @@ export default class PopoverListMembers extends React.Component {
 
                 popoverHtml.push(
                     <div
-                        className='more-modal__row'
+                        className='more-modal__row more-modal__row--button'
                         key={'popover-member-more'}
                     >
-                        <div className='more-modal__details text-center'>
-                            <div
-                                className='more-modal__name'
-                            >
-                                <a
-                                    href='#'
-                                    onClick={this.showMembersModal}
-                                >
-                                    {membersName}
-                                </a>
-                            </div>
-                        </div>
+                        <button
+                            className='btn btn-primary'
+                            onClick={this.showMembersModal}
+                        >
+                            {membersName}
+                        </button>
                     </div>
                 );
             }
@@ -239,23 +228,40 @@ export default class PopoverListMembers extends React.Component {
             );
         }
 
+        const channelMembersTooltip = (
+            <Tooltip id='channelMembersTooltip'>
+                <FormattedMessage
+                    id='channel_header.channelMembers'
+                    defaultMessage='Members'
+                />
+            </Tooltip>
+        );
+
         return (
-            <div className='member-popover__container'>
-                <div
-                    id='member_popover'
-                    className='member-popover__trigger'
-                    ref='member_popover_target'
-                    onClick={(e) => {
-                        this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover});
-                        this.props.actions.getProfilesInChannel(this.props.channel.id, 0);
-                    }}
+            <div className='channel-header__icon wide'>
+                <OverlayTrigger
+                    trigger={['hover', 'focus']}
+                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    placement='bottom'
+                    overlay={channelMembersTooltip}
                 >
-                    {countText}
-                    <span
-                        className='fa fa-user'
-                        aria-hidden='true'
-                    />
-                </div>
+                    <div
+                        id='member_popover'
+                        className='member-popover__trigger'
+                        ref='member_popover_target'
+                        onClick={(e) => {
+                            this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover});
+                            this.props.actions.getProfilesInChannel(this.props.channel.id, 0);
+                        }}
+                    >
+                        <span className='icon__text'>{countText}</span>
+                        <span
+                            className='icon icon__members'
+                            dangerouslySetInnerHTML={{__html: membersIcon}}
+                            aria-hidden='true'
+                        />
+                    </div>
+                </OverlayTrigger>
                 <Overlay
                     rootClose={true}
                     onHide={this.closePopover}
@@ -265,10 +271,17 @@ export default class PopoverListMembers extends React.Component {
                 >
                     <Popover
                         ref='memebersPopover'
-                        title={title}
                         className='member-list__popover'
                         id='member-list-popover'
                     >
+                        <div className='more-modal__header'>
+                            <span
+                                className='icon icon__members'
+                                dangerouslySetInnerHTML={{__html: membersIcon}}
+                                aria-hidden='true'
+                            />
+                            {title}
+                        </div>
                         <div className='more-modal__list'>{popoverHtml}</div>
                     </Popover>
                 </Overlay>

webapp/components/post_view/post_flag_icon.jsx

@@ -21,11 +21,17 @@ function flagToolTip(isFlagged) {
     );
 }
 
-function flagIcon() {
+function flagIcon(isFlagged) {
+    let flagIconSvg = Constants.FLAG_ICON_SVG;
+
+    if (isFlagged) {
+        flagIconSvg = Constants.FLAG_FILLED_ICON_SVG;
+    }
+
     return (
         <span
             className='icon'
-            dangerouslySetInnerHTML={{__html: Constants.FLAG_ICON_SVG}}
+            dangerouslySetInnerHTML={{__html: flagIconSvg}}
         />
     );
 }
@@ -52,6 +58,7 @@ export default function PostFlagIcon(props) {
     if (!props.isEphemeral) {
         return (
             <OverlayTrigger
+                trigger={['hover', 'focus']}
                 key={'flagtooltipkey' + flagVisible}
                 delayShow={Constants.OVERLAY_TIME_DELAY}
                 placement='top'
@@ -63,7 +70,7 @@ export default function PostFlagIcon(props) {
                     className={'flag-icon__container ' + flagVisible}
                     onClick={flagFunc}
                 >
-                    {flagIcon()}
+                    {flagIcon(props.isFlagged)}
                 </a>
             </OverlayTrigger>
         );

webapp/components/post_view/reaction/reaction.jsx

@@ -219,6 +219,7 @@ export default class Reaction extends React.PureComponent {
 
         return (
             <OverlayTrigger
+                trigger={['hover', 'focus']}
                 delayShow={1000}
                 placement='top'
                 shouldUpdatePosition={true}

webapp/components/rename_channel_modal.jsx

@@ -273,6 +273,7 @@ export class RenameChannelModal extends React.Component {
 
                             <div className='input-group input-group--limit'>
                                 <OverlayTrigger
+                                    trigger={['hover', 'focus']}
                                     delayShow={Constants.OVERLAY_TIME_DELAY}
                                     placement='top'
                                     overlay={urlTooltip}

webapp/components/rhs_header_post.jsx

@@ -136,6 +136,7 @@ export default class RhsHeaderPost extends React.Component {
                     className='sidebar--right__back'
                 >
                     <OverlayTrigger
+                        trigger={['hover', 'focus']}
                         delayShow={Constants.OVERLAY_TIME_DELAY}
                         placement='top'
                         overlay={backToResultsTooltip}
@@ -163,6 +164,7 @@ export default class RhsHeaderPost extends React.Component {
                         onClick={this.toggleSize}
                     >
                         <OverlayTrigger
+                            trigger={['hover', 'focus']}
                             delayShow={Constants.OVERLAY_TIME_DELAY}
                             placement='top'
                             overlay={expandSidebarTooltip}
@@ -170,6 +172,7 @@ export default class RhsHeaderPost extends React.Component {
                             <i className='fa fa-expand'/>
                         </OverlayTrigger>
                         <OverlayTrigger
+                            trigger={['hover', 'focus']}
                             delayShow={Constants.OVERLAY_TIME_DELAY}
                             placement='top'
                             overlay={shrinkSidebarTooltip}
@@ -185,6 +188,7 @@ export default class RhsHeaderPost extends React.Component {
                     >
 
                         <OverlayTrigger
+                            trigger={['hover', 'focus']}
                             delayShow={Constants.OVERLAY_TIME_DELAY}
                             placement='top'
                             overlay={closeSidebarTooltip}

webapp/components/search_bar.jsx

@@ -216,6 +216,9 @@ export default class SearchBar extends React.Component {
 
     render() {
         const flagIcon = Constants.FLAG_ICON_SVG;
+        const searchIcon = Constants.SEARCH_ICON_SVG;
+        const mentionsIcon = Constants.MENTIONS_ICON_SVG;
+
         var isSearching = null;
         if (this.state.isSearching) {
             isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>;
@@ -253,50 +256,49 @@ export default class SearchBar extends React.Component {
             var mentionBtnClass = SearchStore.isMentionSearch ? 'active' : '';
 
             mentionBtn = (
-                <div
-                    className='dropdown channel-header__links'
+                <OverlayTrigger
+                    trigger={['hover', 'focus']}
+                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    placement='bottom'
+                    overlay={recentMentionsTooltip}
                 >
-                    <OverlayTrigger
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                        placement='bottom'
-                        overlay={recentMentionsTooltip}
+                    <div
+                        className={'channel-header__icon ' + mentionBtnClass}
+                        onClick={this.searchMentions}
                     >
-                        <a
-                            href='#'
-                            type='button'
-                            onClick={this.searchMentions}
-                            className={mentionBtnClass}
-                        >
-                            {'@'}
-                        </a>
-                    </OverlayTrigger>
-                </div>
+                        <span
+                            className='icon icon__mentions'
+                            dangerouslySetInnerHTML={{__html: mentionsIcon}}
+                            aria-hidden='true'
+                        />
+                    </div>
+                </OverlayTrigger>
             );
 
             var flagBtnClass = SearchStore.isFlaggedPosts ? 'active' : '';
 
             flagBtn = (
-                <div
-                    className='dropdown channel-header__links'
+                <OverlayTrigger
+                    trigger={['hover', 'focus']}
+                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    placement='bottom'
+                    overlay={flaggedTooltip}
                 >
-                    <OverlayTrigger
-                        delayShow={Constants.OVERLAY_TIME_DELAY}
-                        placement='bottom'
-                        overlay={flaggedTooltip}
+                    <div
+                        className={'channel-header__icon ' + flagBtnClass}
                     >
                         <a
                             href='#'
                             type='button'
                             onClick={this.getFlagged}
-                            className={flagBtnClass}
                         >
                             <span
                                 className='icon icon__flag'
                                 dangerouslySetInnerHTML={{__html: flagIcon}}
                             />
                         </a>
-                    </OverlayTrigger>
-                </div>
+                    </div>
+                </OverlayTrigger>
             );
         }
 
@@ -305,55 +307,71 @@ export default class SearchBar extends React.Component {
             clearClass += ' visible';
         }
 
+        let searchFormClass = 'search__form';
+        if (this.state.focused) {
+            searchFormClass += ' focused';
+        }
+
         return (
-            <div>
-                <div
-                    className='sidebar__collapse'
-                    onClick={this.handleClose}
-                >
-                    <span className='fa fa-angle-left'/>
-                </div>
-                <form
-                    role='form'
-                    className='search__form'
-                    onSubmit={this.handleSubmit}
-                    style={{overflow: 'visible'}}
-                    autoComplete='off'
-                >
-                    <span className='fa fa-search sidebar__search-icon'/>
-                    <SuggestionBox
-                        ref={(search) => {
-                            this.search = search;
-                        }}
-                        className='form-control search-bar'
-                        placeholder={Utils.localizeMessage('search_bar.search', 'Search')}
-                        value={this.state.searchTerm}
-                        onFocus={this.handleUserFocus}
-                        onBlur={this.handleUserBlur}
-                        onChange={this.handleChange}
-                        onKeyDown={this.handleKeyDown}
-                        listComponent={SearchSuggestionList}
-                        providers={this.suggestionProviders}
-                        type='search'
-                        autoFocus={this.props.isFocus && this.state.searchTerm === ''}
-                    />
+            <div className='sidebar-right__table'>
+                <div className='sidebar-collapse__container'>
                     <div
-                        className={clearClass}
-                        onClick={this.handleClear}
+                        className='sidebar-collapse'
+                        onClick={this.handleClose}
+                    >
+                        <span className='fa fa-chevron-left'/>
+                    </div>
+                </div>
+                <div className='search-form__container'>
+                    <form
+                        role='form'
+                        className={searchFormClass}
+                        onSubmit={this.handleSubmit}
+                        style={{overflow: 'visible'}}
+                        autoComplete='off'
                     >
                         <span
-                            className='sidebar__search-clear-x'
+                            className='search__icon'
+                            dangerouslySetInnerHTML={{__html: searchIcon}}
                             aria-hidden='true'
+                        />
+                        <SuggestionBox
+                            ref={(search) => {
+                                this.search = search;
+                            }}
+                            className='search-bar'
+                            placeholder={Utils.localizeMessage('search_bar.search', 'Search')}
+                            value={this.state.searchTerm}
+                            onFocus={this.handleUserFocus}
+                            onBlur={this.handleUserBlur}
+                            onChange={this.handleChange}
+                            onKeyDown={this.handleKeyDown}
+                            listComponent={SearchSuggestionList}
+                            providers={this.suggestionProviders}
+                            type='search'
+                            autoFocus={this.props.isFocus && this.state.searchTerm === ''}
+                        />
+                        <div
+                            className={clearClass}
+                            onClick={this.handleClear}
                         >
-                            {'×'}
-                        </span>
-                    </div>
-                    {isSearching}
-                    {this.renderHintPopover(helpClass)}
-                </form>
-
-                {mentionBtn}
-                {flagBtn}
+                            <span
+                                className='sidebar__search-clear-x'
+                                aria-hidden='true'
+                            >
+                                {'×'}
+                            </span>
+                        </div>
+                        {isSearching}
+                        {this.renderHintPopover(helpClass)}
+                    </form>
+                </div>
+                <div>
+                    {mentionBtn}
+                </div>
+                <div>
+                    {flagBtn}
+                </div>
             </div>
         );
     }

webapp/components/search_results_header.jsx

@@ -104,6 +104,7 @@ export default class SearchResultsHeader extends React.Component {
                         onClick={this.toggleSize}
                     >
                         <OverlayTrigger
+                            trigger={['hover', 'focus']}
                             delayShow={Constants.OVERLAY_TIME_DELAY}
                             placement='top'
                             overlay={expandSidebarTooltip}
@@ -111,6 +112,7 @@ export default class SearchResultsHeader extends React.Component {
                             <i className='fa fa-expand'/>
                         </OverlayTrigger>
                         <OverlayTrigger
+                            trigger={['hover', 'focus']}
                             delayShow={Constants.OVERLAY_TIME_DELAY}
                             placement='top'
                             overlay={shrinkSidebarTooltip}
@@ -126,6 +128,7 @@ export default class SearchResultsHeader extends React.Component {
                         onClick={this.handleClose}
                     >
                         <OverlayTrigger
+                            trigger={['hover', 'focus']}
                             delayShow={Constants.OVERLAY_TIME_DELAY}
                             placement='top'
                             overlay={closeSidebarTooltip}

webapp/components/sidebar.jsx

@@ -520,7 +520,7 @@ export default class Sidebar extends React.Component {
             linkClass = 'active';
         }
 
-        let rowClass = 'sidebar-channel';
+        let rowClass = 'sidebar-item';
 
         var unread = false;
         if (channelMember) {
@@ -542,7 +542,7 @@ export default class Sidebar extends React.Component {
         var badge = null;
         if (channelMember) {
             if (unreadCount.mentions) {
-                badge = <span className='badge pull-right small'>{unreadCount.mentions}</span>;
+                badge = <span className='badge'>{unreadCount.mentions}</span>;
                 this.badgesActive = true;
             }
         } else if (this.state.loadingDMChannel === index && channel.type === Constants.DM_CHANNEL) {
@@ -554,17 +554,29 @@ export default class Sidebar extends React.Component {
             );
         }
 
-        if (msgCount > 0) {
+        if (unreadCount.mentions > 0) {
             rowClass += ' has-badge';
         }
 
         let displayName = channel.display_name;
 
         var icon = null;
+        const globeIcon = Constants.GLOBE_ICON_SVG;
+        const lockIcon = Constants.LOCK_ICON_SVG;
         if (channel.type === Constants.OPEN_CHANNEL) {
-            icon = <div className='status'><i className='fa fa-globe'/></div>;
+            icon = (
+                <span
+                    className='icon icon__globe'
+                    dangerouslySetInnerHTML={{__html: globeIcon}}
+                />
+            );
         } else if (channel.type === Constants.PRIVATE_CHANNEL) {
-            icon = <div className='status'><i className='fa fa-lock'/></div>;
+            icon = (
+                <span
+                    className='icon icon__lock'
+                    dangerouslySetInnerHTML={{__html: lockIcon}}
+                />
+            );
         } else if (channel.type === Constants.GM_CHANNEL) {
             displayName = ChannelUtils.buildGroupChannelName(channel.id);
             icon = <div className='status status--group'>{UserStore.getProfileListInChannel(channel.id, true).length}</div>;
@@ -589,6 +601,7 @@ export default class Sidebar extends React.Component {
         if (handleClose && !badge) {
             closeButton = (
                 <OverlayTrigger
+                    trigger={['hover', 'focus']}
                     delayShow={1000}
                     placement='top'
                     overlay={removeTooltip}
@@ -630,7 +643,7 @@ export default class Sidebar extends React.Component {
                     onClick={this.trackChannelSelectedEvent}
                 >
                     {icon}
-                    {displayName}
+                    <span className='sidebar-item__name'>{displayName}</span>
                     {badge}
                     {closeButton}
                 </Link>
@@ -644,6 +657,8 @@ export default class Sidebar extends React.Component {
     }
 
     render() {
+        const switchChannelIcon = Constants.SWITCH_CHANNEL_ICON_SVG;
+
         // Check if we have all info needed to render
         if (this.state.currentTeam == null || this.state.currentUser == null) {
             return (<div/>);
@@ -749,8 +764,8 @@ export default class Sidebar extends React.Component {
 
         let createPublicChannelIcon = (
             <OverlayTrigger
+                trigger={['hover', 'focus']}
                 delayShow={500}
-                trigger='hover'
                 placement='top'
                 overlay={createChannelTootlip}
             >
@@ -767,9 +782,9 @@ export default class Sidebar extends React.Component {
 
         let createPrivateChannelIcon = (
             <OverlayTrigger
+                trigger={['hover', 'focus']}
                 delayShow={500}
                 placement='top'
-                trigger='hover'
                 overlay={createGroupTootlip}
             >
                 <a
@@ -866,7 +881,7 @@ export default class Sidebar extends React.Component {
                             <h4>
                                 <FormattedMessage
                                     id='sidebar.favorite'
-                                    defaultMessage='Favorites'
+                                    defaultMessage='FAVORITE CHANNELS'
                                 />
                             </h4>
                         </li>
@@ -877,7 +892,7 @@ export default class Sidebar extends React.Component {
                             <h4>
                                 <FormattedMessage
                                     id='sidebar.channels'
-                                    defaultMessage='Channels'
+                                    defaultMessage='PUBLIC CHANNELS'
                                 />
                                 {createPublicChannelIcon}
                             </h4>
@@ -903,7 +918,7 @@ export default class Sidebar extends React.Component {
                             <h4>
                                 <FormattedMessage
                                     id='sidebar.pg'
-                                    defaultMessage='Private Channels'
+                                    defaultMessage='PRIVATE CHANNELS'
                                 />
                                 {createPrivateChannelIcon}
                             </h4>
@@ -915,7 +930,7 @@ export default class Sidebar extends React.Component {
                             <h4>
                                 <FormattedMessage
                                     id='sidebar.direct'
-                                    defaultMessage='Direct Messages'
+                                    defaultMessage='DIRECT MESSAGES'
                                 />
                             </h4>
                         </li>
@@ -928,6 +943,10 @@ export default class Sidebar extends React.Component {
                         className='btn btn-link'
                         onClick={this.openQuickSwitcher}
                     >
+                        <span
+                            className='icon icon__switch'
+                            dangerouslySetInnerHTML={{__html: switchChannelIcon}}
+                        />
                         <FormattedMessage
                             id={quickSwitchText}
                             defaultMessage='Switch Channels'

webapp/components/sidebar_header.jsx

@@ -102,8 +102,8 @@ export default class SidebarHeader extends React.Component {
             <div className='team__header theme'>
                 {tutorialTip}
                 <div className='header__info'>
-                    <div className='user__name'>{'@' + this.props.currentUser.username}</div>
                     {teamNameWithToolTip}
+                    <div className='user__name'>{'@' + this.props.currentUser.username}</div>
                 </div>
                 <SidebarHeaderDropdown
                     ref='dropdown'

webapp/components/sidebar_right/sidebar_right.jsx

@@ -129,7 +129,7 @@ export default class SidebarRight extends React.Component {
         const wasOpen = prevState.searchVisible || prevProps.postRightVisible;
 
         if (isOpen && !wasOpen) {
-            postListScrollChange();
+            setTimeout(() => postListScrollChange(), 0);
         }
     }
 
@@ -210,7 +210,7 @@ export default class SidebarRight extends React.Component {
         if (this.state.searchVisible) {
             content = (
                 <div className='sidebar--right__content'>
-                    <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div>
+                    <div className='search-bar__container channel-header alt'>{searchForm}</div>
                     <SearchResults
                         isMentionSearch={this.state.isMentionSearch}
                         isFlaggedPosts={this.state.isFlaggedPosts}
@@ -226,7 +226,7 @@ export default class SidebarRight extends React.Component {
             content = (
                 <div className='post-right__container'>
                     <FileUploadOverlay overlayType='right'/>
-                    <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div>
+                    <div className='search-bar__container channel-header alt'>{searchForm}</div>
                     <RhsThread
                         fromFlaggedPosts={this.props.fromFlaggedPosts}
                         fromSearch={this.props.fromSearch}

webapp/components/suggestion/switch_channel_provider.jsx

@@ -26,6 +26,8 @@ class SwitchChannelSuggestion extends Suggestion {
     render() {
         const {item, isSelection} = this.props;
         const channel = item.channel;
+        const globeIcon = Constants.GLOBE_ICON_SVG;
+        const lockIcon = Constants.LOCK_ICON_SVG;
 
         let className = 'mentions__name';
         if (isSelection) {
@@ -35,9 +37,19 @@ class SwitchChannelSuggestion extends Suggestion {
         let displayName = channel.display_name;
         let icon = null;
         if (channel.type === Constants.OPEN_CHANNEL) {
-            icon = <div className='status'><i className='fa fa-globe'/></div>;
+            icon = (
+                <span
+                    className='icon icon__globe icon--body'
+                    dangerouslySetInnerHTML={{__html: globeIcon}}
+                />
+            );
         } else if (channel.type === Constants.PRIVATE_CHANNEL) {
-            icon = <div className='status'><i className='fa fa-lock'/></div>;
+            icon = (
+                <span
+                    className='icon icon__lock icon--body'
+                    dangerouslySetInnerHTML={{__html: lockIcon}}
+                />
+            );
         } else if (channel.type === Constants.GM_CHANNEL) {
             displayName = getChannelDisplayName(channel);
             icon = <div className='status status--group'>{'G'}</div>;

webapp/components/team_sidebar/components/team_button.jsx

@@ -69,6 +69,7 @@ export default class TeamButton extends React.Component {
         } else {
             btn = (
                 <OverlayTrigger
+                    trigger={['hover', 'focus']}
                     delayShow={Constants.OVERLAY_TIME_DELAY}
                     placement={this.props.placement}
                     overlay={

webapp/components/user_settings/custom_theme_chooser.jsx

@@ -295,6 +295,7 @@ class CustomThemeChooser extends React.Component {
                                 {codeThemeOptions}
                             </select>
                             <OverlayTrigger
+                                trigger={['hover', 'focus']}
                                 placement='top'
                                 overlay={popoverContent}
                                 ref='headerOverlay'

webapp/components/webrtc/components/webrtc_header.jsx

@@ -59,6 +59,7 @@ export default function WebrtcHeader(props) {
                     onClick={props.toggleSize}
                 >
                     <OverlayTrigger
+                        trigger={['hover', 'focus']}
                         delayShow={Constants.OVERLAY_TIME_DELAY}
                         placement='top'
                         overlay={expandSidebarTooltip}
@@ -66,6 +67,7 @@ export default function WebrtcHeader(props) {
                         <i className='fa fa-expand'/>
                     </OverlayTrigger>
                     <OverlayTrigger
+                        trigger={['hover', 'focus']}
                         delayShow={Constants.OVERLAY_TIME_DELAY}
                         placement='top'
                         overlay={shrinkSidebarTooltip}

webapp/i18n/en.json

@@ -1087,6 +1087,8 @@
   "channel_flow.handleTooShort": "Channel URL must be 2 or more lowercase alphanumeric characters",
   "channel_flow.invalidName": "Invalid Channel Name",
   "channel_flow.set_url_title": "Set Channel URL",
+  "channel_header.channelMembers": "Members",
+  "channel_header.addChannelHeader": "Add a channel description",
   "channel_header.addMembers": "Add Members",
   "channel_header.addToFavorites": "Add to Favorites",
   "channel_header.channelHeader": "Edit Channel Header",
@@ -1096,6 +1098,7 @@
   "channel_header.manageMembers": "Manage Members",
   "channel_header.notificationPreferences": "Notification Preferences",
   "channel_header.recentMentions": "Recent Mentions",
+  "channel_header.pinnedPosts": "Pinned Posts",
   "channel_header.removeFromFavorites": "Remove from Favorites",
   "channel_header.rename": "Rename Channel",
   "channel_header.setHeader": "Edit Channel Header",
@@ -1980,15 +1983,15 @@
   "setting_upload.import": "Import",
   "setting_upload.noFile": "No file selected.",
   "setting_upload.select": "Select file",
-  "sidebar.channels": "Channels",
+  "sidebar.channels": "PUBLIC CHANNELS",
   "sidebar.createChannel": "Create new public channel",
   "sidebar.createGroup": "Create new private channel",
-  "sidebar.direct": "Direct Messages",
-  "sidebar.favorite": "Favorites",
+  "sidebar.direct": "DIRECT MESSAGES",
+  "sidebar.favorite": "FAVORITE CHANNELS",
   "sidebar.more": "More",
   "sidebar.moreElips": "More...",
   "sidebar.otherMembers": "Outside this team",
-  "sidebar.pg": "Private Channels",
+  "sidebar.pg": "PRIVATE CHANNELS",
   "sidebar.removeList": "Remove from list",
   "sidebar.tutorialScreen1": "<h4>Channels</h4><p><strong>Channels</strong> organize conversations across different topics. They’re open to everyone on your team. To send private communications use <strong>Direct Messages</strong> for a single person or <strong>Private Channel</strong> for multiple people.</p>",
   "sidebar.tutorialScreen2": "<h4>\"{townsquare}\" and \"{offtopic}\" channels</h4><p>Here are two public channels to start:</p><p><strong>{townsquare}</strong> is a place for team-wide communication. Everyone in your team is a member of this channel.</p><p><strong>{offtopic}</strong> is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.</p>",

webapp/sass/components/_buttons.scss

@@ -1,7 +1,7 @@
 @charset 'UTF-8';
 
 .btn {
-    @include single-transition(all, .25s, ease-in);
+    @include single-transition(all, .15s, ease-in);
     @include border-radius($border-rad);
 
     &.btn-primary {

webapp/sass/components/_inputs.scss

@@ -45,3 +45,23 @@ input {
         margin-top: 3px;
     }
 }
+
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: inherit;
+    opacity: 0.5;
+}
+
+::-moz-placeholder { /* Firefox 19+ */
+    color: inherit;
+    opacity: 0.5;
+}
+
+:-ms-input-placeholder { /* IE 10+ */
+    color: inherit;
+    opacity: 0.5;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+    color: inherit;
+    opacity: 0.5;
+}

webapp/sass/components/_mentions.scss

@@ -36,6 +36,24 @@
     width: 100%;
     z-index: 101;
 
+    .icon {
+        @include opacity(.5);
+        display: inline-block;
+        margin: 0 7px 0 0;
+        position: relative;
+        text-align: center;
+        top: 2px;
+        vertical-align: top;
+        width: 16px;
+
+        &.icon__globe {
+            svg {
+                height: 14px;
+                width: 14px;
+            }
+        }
+    }
+
     .status {
         font-size: 15px;
         text-align: center;
@@ -59,11 +77,12 @@
     @include border-radius(20px);
     display: block;
     font-size: 15px;
-    height: 20px;
-    line-height: 20px;
-    margin-right: 6px;
+    height: 16px;
+    line-height: 16px;
+    margin-right: 7px;
+    margin-top: 3px;
     text-align: center;
-    width: 20px;
+    width: 16px;
 
     .mention--align {
         display: inline-block;

webapp/sass/components/_popover.scss

@@ -4,6 +4,7 @@
 .popover {
     @include border-radius($border-rad);
     color: lighten($black, 25%);
+    padding: 0;
 
     &.bottom,
     &.right,
@@ -220,17 +221,70 @@
 .member-list__popover {
     max-width: initial;
 
+    .more-modal__header {
+        padding: 14px 0;
+
+        .icon {
+            @include opacity(.8);
+            margin: 0 38px 0 24px;
+            position: relative;
+            top: 2px;
+        }
+
+        span {
+            font-weight: 500;
+        }
+    }
+
     .more-modal__list {
         .more-modal__row {
-            min-height: inherit;
+            border-bottom: none;
+            border-top: 1px solid;
+            cursor: pointer;
+            height: 45px;
+            padding: 5px 19px 5px 17px;
+
+            &:hover {
+                border-left: 3px solid transparent;
+                padding-left: 14px;
+
+                .more-modal__actions {
+                    @include opacity(1);
+                }
+            }
+
+            &.more-modal__row--button {
+                border-left: none;
+                height: 40px;
+                position: relative;
+
+                button {
+                    font-weight: 500;
+                    height: 100%;
+                    left: 0;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        .more-modal__name {
+            line-height: 33px;
+        }
+
+        .more-modal__image {
+            margin: 0;
         }
 
         .more-modal__details {
             line-height: 32px;
+            padding-left: 30px;
         }
 
         .more-modal__actions {
-            line-height: 31px;
+            @include opacity(0);
+            line-height: 42px;
             margin: 0;
         }
     }

webapp/sass/components/_search.scss

@@ -1,14 +1,7 @@
 @charset 'UTF-8';
 
-.channel-header {
-    .search-bar__container {
-        padding: 0 7px 0 3px;
-    }
-}
-
 .search-bar__container {
-    @include flex(0 0 56px);
-    padding: 12px 5px 0 0;
+    @include flex(0 0 79px);
 
     .channel-header__links {
         .sidebar--right & {
@@ -31,30 +24,10 @@
     }
 }
 
-.sidebar__collapse {
-    @include single-transition(all, .2s, linear);
-    @include translateX(0);
-    cursor: pointer;
-    display: none;
-    fill: $white;
-    font-size: 35px;
-    left: 0;
-    line-height: 40px;
-    padding-left: 1px;
+.search__icon {
+    left: 10px;
     position: absolute;
-    text-align: center;
-    width: 49px;
-    z-index: 5;
-}
-
-.sidebar__search-icon {
-    @include opacity(.5);
-    color: $dark-gray;
-    display: none;
-    font-size: 14px;
-    margin-left: 10px;
-    position: absolute;
-    top: 15px;
+    top: 8px;
 }
 
 .sidebar__search-clear {
@@ -69,31 +42,33 @@
     width: 40px;
 }
 
+.search-form__container {
+
+}
+
 .search__form {
     position: relative;
 
     .search-bar__container & {
-        @include border-radius(2px);
+        @include border-radius(50px);
         border: 1px solid $light-gray;
-        margin: 0;
-        width: 300px;
+        margin: 16px 10px 0 0;
+        width: 229px;
     }
 
     .sidebar--right & {
-        float: left;
-        margin-right: 7px;
-        width: 325px;
+        width: 100%;
     }
 
     .search-bar {
+        background: transparent;
+        border: none;
         box-shadow: none;
-        height: 40px;
-        padding-right: 30px;
-
-        .search-bar__container & {
-            border: none;
-            height: 30px;
-        }
+        font-size: 14px;
+        height: 35px;
+        outline: none;
+        padding: 0 30px 0 40px;
+        width: 100%;
     }
 
     .icon--refresh {

webapp/sass/components/_status-icon.scss

@@ -42,10 +42,10 @@
 
 .status {
     display: inline-block;
-    margin-right: 6px;
+    margin: 0 7px 0 1px;
     position: relative;
-    top: 1px;
-    width: 12px;
+    top: 2px;
+    width: 15px;
 
     &.status--group {
         border-radius: 2px;
@@ -54,18 +54,19 @@
         height: 16px;
         left: 1px;
         line-height: 15px;
-        margin-left: -3px;
+        margin: 0 9px 0 -1px;
         text-align: center;
         top: -1px;
-        width: 16px;
+        width: 15px;
 
         .mentions__name & {
-            height: 20px;
+            height: 18px;
             left: 0;
-            line-height: 20px;
+            line-height: 18px;
             margin-left: 0;
+            margin-right: 6px;
             text-align: center;
-            width: 20px;
+            width: 17px;
         }
     }
 

webapp/sass/components/_webrtc.scss

@@ -2,14 +2,9 @@
 
 .webrtc__header {
     @include webrtc-button;
-    float: left;
-    margin-right: 10px;
-    position: relative;
-    top: 13px;
 
     svg {
         position: relative;
-        width: 20px;
     }
 }
 

webapp/sass/layout/_headers.scss

@@ -1,57 +1,82 @@
 @charset 'UTF-8';
 
 .channel-header {
-    @include flex(0 0 57px);
-    border-left: none;
+    @include flex(0 0 70px);
+    border-bottom: 1px solid;
     font-size: 14px;
-    line-height: 56px;
     position: relative;
     width: 100%;
     z-index: 9;
 
-    .member-popover__trigger,
-    .pinned-posts-button {
+    .channel-header__icon {
+        @include border-radius(50%);
+        border: 1px solid;
         cursor: pointer;
-        display: inline-block;
-        margin-left: 7px;
+        height: 37px;
+        line-height: 36px;
+        margin: 16px 10px 0 0;
         min-width: 30px;
         text-align: center;
-        white-space: nowrap;
+        width: 37px;
+
+        &.wide {
+            @include border-radius(37px);
+            padding: 0;
+            white-space: nowrap;
+            width: auto;
+
+            > div {
+                padding: 0 13px 0 15px;
+            }
+        }
+
+        .icon__text {
+            font-weight: 600;
+            margin-right: 9px;
+        }
+
+        a {
+            display: block;
+        }
 
         .fa {
             font-size: 19px;
         }
-    }
 
-    .member-popover__container,
-    .member-popover__trigger {
-        display: inline;
-    }
-
-    .member-popover__trigger {
         & + div {
             display: none;
         }
-    }
 
-    .member-popover__trigger {
-        .fa {
-            margin-left: 4px;
+        .icon {
             position: relative;
+        }
+
+        .icon__pin,
+        .icon__members {
             top: 2px;
         }
+
+        .icon__mentions {
+            top: 5px;
+        }
+
+        .icon__flag {
+            top: 3px;
+        }
     }
 
-    .pinned-posts-button svg {
-        position: relative;
-        top: 5px;
+    .move--left & {
+        .icon--hidden {
+            display: none;
+        }
     }
 
     &.alt {
         margin: 0;
 
         th {
-            font-weight: normal !important;
+            font-weight: normal;
+            vertical-align: top;
 
             &.header-list__right {
                 padding-right: 4px;
@@ -69,15 +94,15 @@
 
         &:first-child {
             border-left: none;
-            padding-left: 15px;
-            padding-right: 1em;
+            padding: 0 0 0 20px;
             text-align: left !important;
             width: 100%;
         }
 
         &:last-child {
-            padding-right: 6px;
-            width: 8.9%;
+            .channel-header__icon {
+                margin-right: 17px;
+            }
         }
     }
 
@@ -93,13 +118,26 @@
 
     .heading {
         display: inline-block;
-        font-size: 1.3em;
-        font-weight: 600;
+        font-size: 17px;
+        font-weight: 400;
         margin: 0 4px 0 0;
-        max-width: 100%;
+        max-width: calc(100vw - 780px);
         overflow: hidden;
         text-overflow: ellipsis;
-        vertical-align: middle;
+        vertical-align: top;
+        white-space: nowrap;
+
+        .move--left & {
+            max-width: calc(100vw - 830px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 880px);
+            }
+        }
+
+        .multi-teams & {
+            max-width: calc(100vw - 830px);
+        }
     }
 
     .caret {
@@ -131,62 +169,74 @@
 
 .header-dropdown__icon {
     color: inherit;
-    font-size: 12px;
+    font-size: 21px;
     margin-left: 1px;
     position: relative;
-    top: 1px;
+    top: 2px;
 }
 
 .channel-header__info {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
+    margin-top: 12px;
 
-    > div {
-        display: block;
+    .channel-header__title {
+        .header-dropdown__icon {
+            color: $dark-gray;
+        }
+
+        > a {
+            display: inline-block;
+            text-decoration: none;
+        }
+
+        .modal {
+            white-space: normal;
+        }
+    }
+
+    .channel-header__description {
+        display: inline-block;
+        height: 22px;
+        margin-top: 3px;
+        max-width: calc(100vw - 730px);
+        overflow: hidden;
+        text-overflow: ellipsis;
         white-space: nowrap;
         word-break: break-word;
 
-        &.dropdown {
-            float: left;
-            max-width: 90%;
-            padding-right: 1em;
+        .markdown__heading {
+            font-size: 1em;
+            margin: 0;
+        }
 
-            .header-dropdown__icon {
-                color: $dark-gray;
-            }
+        .multi-teams & {
+            max-width: calc(100vw - 780px);
+        }
 
-            a {
-                text-decoration: none;
-            }
+        &.light {
+            @include opacity(.6);
+            color: inherit;
 
-            .modal {
-                white-space: normal;
+            &:hover,
+            &:focus {
+                color: inherit;
             }
         }
 
-        &.description {
-            margin-top: 2px;
+        .move--left & {
+            max-width: calc(100vw - 780px);
+        }
+
+        .markdown-inline-img {
             max-height: 45px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-
-            .markdown-inline-img {
-                max-height: 45px;
-            }
         }
+    }
 
-        &.popover {
-            white-space: normal;
-        }
+    .status {
+        width: 18px;
 
-        .status {
-            width: 18px;
-
-            svg {
-                max-height: 20px;
-                width: 16px;
-            }
+        svg {
+            max-height: 20px;
+            width: 16px;
         }
     }
 }
@@ -261,7 +311,7 @@
         @include legacy-pie-clearfix;
         @include display-flex();
         @include flex-direction(row-reverse);
-        padding: 9px 10px;
+        padding: 16px 47px 12px 12px;
         position: relative;
 
         &:before {
@@ -305,11 +355,12 @@
         .sidebar-header-dropdown,
         .admin-navbar-dropdown {
             font-size: .85em;
+            height: 100%;
             left: 0;
-            margin-right: -15px;
+            margin-right: -22px;
             position: absolute;
             right: 22px;
-            top: 10px;
+            top: 0;
 
             li {
                 width: 100%;
@@ -323,7 +374,7 @@
                 color: $white;
                 display: block;
                 font-size: 1em;
-                height: 40px;
+                height: 100%;
                 left: 0;
                 line-height: 1.8;
                 padding: 10px;
@@ -331,7 +382,7 @@
             }
 
             .dropdown-menu {
-                margin-right: 3px;
+                margin-right: 10px;
                 margin-top: 4px;
                 width: 199px;
 
@@ -344,8 +395,16 @@
 
             .sidebar-header-dropdown__icon,
             .admin-navbar-dropdown__icon {
+                border-radius: 36px;
                 fill: $white;
                 float: right;
+                height: 36px;
+                line-height: 36px;
+                position: relative;
+                right: -3px;
+                text-align: center;
+                top: 7px;
+                width: 36px;
             }
         }
 
@@ -377,9 +436,7 @@
         }
 
         .team__name {
-            float: left;
             line-height: 22px;
-            margin-top: -2px;
         }
 
         .user__name {
@@ -419,8 +476,30 @@
 }
 
 .channel-header__favorites {
+    @include opacity(.5);
     float: left;
-    margin: 1px 10px 0 0;
+    height: 20px;
+    margin: 0 8px 0 0;
+    padding-top: 3px;
+    position: relative;
+    z-index: 1;
+
+    &.inactive {
+        color: inherit;
+
+        &:hover,
+        &:active {
+            color: inherit;
+        }
+    }
+
+    &.active {
+        @include opacity(1);
+    }
+
+    i {
+        font-size: 17px;
+    }
 }
 
 .app__body {
@@ -476,6 +555,7 @@
             &.active {
                 color: $primary-color;
                 @include opacity(1);
+
                 .icon {
                     fill: $primary-color;
                 }

webapp/sass/layout/_navigation.scss

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

webapp/sass/layout/_post.scss

@@ -1487,16 +1487,21 @@
 
     .flag-icon__container {
         display: inline-block;
-        font-size: 12px;
+        height: 15px;
         margin-left: 7px;
         position: relative;
-        top: 1px;
+        top: 2px;
+        vertical-align: top;
         visibility: hidden;
 
         &.visible {
             visibility: visible;
         }
 
+        svg {
+            width: 12px;
+        }
+
         path {
             fill: inherit;
         }

webapp/sass/layout/_sidebar-left.scss

@@ -16,6 +16,33 @@
         padding-top: 44px;
     }
 
+    .sidebar-item {
+        .icon {
+            display: inline-block;
+            margin: 0 7px 0 1px;
+            position: relative;
+            text-align: left;
+            vertical-align: top;
+            width: 15px;
+        }
+
+        .icon__lock {
+            top: 2px;
+        }
+
+        .icon__globe {
+            top: 1px;
+        }
+    }
+
+    .sidebar-item__name {
+        display: inline-block;
+        max-width: 167px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: top;
+    }
+
     .sidebar__divider {
         color: $white;
         font-size: .9em;
@@ -44,7 +71,6 @@
     }
 
     .sidebar__switcher {
-        border-top: 1px solid;
         bottom: 0;
         display: block;
         padding-bottom: 0;
@@ -54,18 +80,30 @@
         button {
             @include single-transition(all, .15s, ease-in);
             display: block;
-            height: 42px;
-            text-align: center;
+            font-weight: 600;
+            height: 50px;
+            line-height: 50px;
+            padding: 0;
             text-decoration: none;
             width: 100%;
 
             > span {
-                @include single-transition(all, .15s, ease-in);
-                @include opacity(.6);
+                display: inline-block;
                 position: relative;
+                vertical-align: middle;
                 z-index: 5;
             }
 
+            .icon {
+                display: none;
+                margin-right: 15px;
+
+                svg {
+                    position: relative;
+                    top: 7px;
+                }
+            }
+
             &:hover {
                 span {
                     @include opacity(1);
@@ -93,15 +131,20 @@
     }
 
     .badge {
-        background-color: $primary-color;
+        @include border-radius(100px);
+        font-size: 11px;
+        height: 16px;
+        line-height: 16px;
+        min-width: 18px;
+        padding: 0 5px;
         position: absolute;
-        right: 10px;
-        top: 5px;
+        right: 15px;
+        top: 8px;
     }
 
     .nav-pills__container {
         -webkit-overflow-scrolling: touch;
-        height: calc(100% - 99px);
+        height: calc(100% - 120px);
         overflow: auto;
         position: relative;
     }
@@ -119,11 +162,11 @@
     }
 
     .nav-pills__unread-indicator-top {
-        top: 66px;
+        top: 80px;
     }
 
     .nav-pills__unread-indicator-bottom {
-        bottom: 50px;
+        bottom: 60px;
     }
 
     .nav {
@@ -135,12 +178,10 @@
 
         li {
             > h4 {
-                color: #aaaaaa;
                 font-size: 1em;
-                font-weight: 400;
-                letter-spacing: -.3px;
-                margin: 1.1em 0 .5em;
-                padding: 0 10px 0 15px;
+                font-weight: 600;
+                margin: 1.5em 0 .7em;
+                padding: 0 12px 0 17px;
                 text-transform: uppercase;
             }
 
@@ -155,17 +196,24 @@
                 line-height: 1.5;
                 outline: none;
                 overflow: hidden;
-                padding: 3px 10px 3px 25px;
+                padding: 5px 0 5px 17px;
                 text-overflow: ellipsis;
                 white-space: nowrap;
 
+                .icon {
+                    &.icon__globe,
+                    &.icon__lock {
+                        @include opacity(.5);
+                    }
+                }
+
                 &.has-badge {
-                    padding-right: 30px;
+                    .sidebar-item__name {
+                        max-width: 142px;
+                    }
                 }
 
                 &.has-close {
-                    padding-right: 30px;
-
                     &:hover {
                         .btn-close {
                             @include opacity(.8);
@@ -177,11 +225,11 @@
                         @include opacity(0);
                         display: none;
                         font-family: 'Open Sans', sans-serif;
-                        font-size: 20px;
+                        font-size: 21px;
                         font-weight: 600;
                         position: absolute;
-                        right: 15px;
-                        top: -1px;
+                        right: 18px;
+                        top: 0px;
 
                         &:hover {
                             @include opacity(1);
@@ -204,7 +252,14 @@
                         left: 0;
                         position: absolute;
                         top: 0;
-                        width: 5px;
+                        width: 3px;
+                    }
+                }
+
+                .icon {
+                    &.icon__globe,
+                    &.icon__lock {
+                        @include opacity(.7);
                     }
                 }
 
@@ -229,9 +284,8 @@
     }
 
     .add-channel-btn {
-        color: #aaaaaa;
         float: right;
-        font-size: 22px;
+        font-size: 1.9em;
         font-weight: 700;
         line-height: 18px;
         margin: -2px 0 0 0;
@@ -245,35 +299,46 @@
     }
 
     .status-wrapper {
+        height: 36px;
+        width: 36px;
+
         .status {
-            bottom: -9px;
+            bottom: -4px;
             height: 18px;
             right: -5px;
             width: 18px;
 
-            svg {
-                top: 3px;
-                max-height: 12px;
+            &.status-edit {
+                .fa {
+                    top: 4px;
+                }
+            }
+
+            .fa {
+                position: relative;
+                top: 2px;
             }
 
             .icon__container {
-                position: relative;
-                top: 3px;
-
                 &:after {
                     border-radius: 20px;
                     content: '';
-                    height: 9px;
-                    left: 5px;
+                    height: 10px;
+                    left: 4px;
                     position: absolute;
-                    top: 2px;
-                    width: 9px;
+                    top: 4px;
+                    width: 10px;
                 }
+            }
 
-                svg {
-                    top: 0;
-                    z-index: 1;
-                }
+            svg {
+                height: 13px;
+                left: 3px;
+                max-height: initial;
+                position: relative;
+                top: 3px;
+                width: 13px;
+                z-index: 1;
             }
         }
     }

webapp/sass/layout/_sidebar-right.scss

@@ -39,6 +39,25 @@
         }
     }
 
+    .sidebar-right__table {
+        display: table;
+
+        > div:not(.sidebar-collapse__container) {
+            display: table-cell;
+
+            &:last-child {
+                .channel-header__icon {
+                    margin-right: 17px;
+                }
+            }
+        }
+
+        .search-form__container {
+            padding-right: 10px;
+            width: 100%;
+        }
+    }
+
     .post-body {
         img {
             max-height: 200px;
@@ -131,7 +150,6 @@
         @include flex(1 1 auto);
         @include flex-direction(column);
         border-left: $border-gray;
-        border-top: $border-gray;
         height: calc(100% - 56px);
     }
 
@@ -191,7 +209,7 @@
 
     .sidebar--right__header {
         @include flex(0 0 44px);
-        border-bottom: $border-gray;
+        border-bottom: 1px solid;
         color: inherit;
         font-size: 1em;
         height: 44px;
@@ -222,7 +240,7 @@
             @include opacity(.9);
             margin: 0 3px;
             position: relative;
-            top: 1px;
+            top: 3px;
         }
     }
 
@@ -234,3 +252,25 @@
 .sidebar-right-container {
     height: 100%;
 }
+
+.sidebar-collapse__container {
+    display: none;
+}
+
+.sidebar-collapse {
+    @include single-transition(all, .2s, linear);
+    @include translateX(0);
+    cursor: pointer;
+    font-size: 16px;
+    height: 48px;
+    line-height: 0;
+    padding-left: 1px;
+    text-align: center;
+    width: 50px;
+    z-index: 5;
+
+    .fa {
+        position: relative;
+        top: 18px;
+    }
+}

webapp/sass/responsive/_desktop.scss

@@ -80,22 +80,20 @@
 }
 
 @media (max-width: 1024px) {
-    .inner-wrap {
-        &.move--left {
-            .channel-header {
-                .heading {
-                    width: 100px;
-                }
-            }
-        }
-    }
-
     .channel-header {
         .search-bar__container {
             .search__form {
                 width: 150px;
             }
         }
+
+        .heading {
+            max-width: calc(100vw - 800px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 750px);
+            }
+        }
     }
 
     .integration-option {

webapp/sass/responsive/_mobile.scss

@@ -1,6 +1,12 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .channel-header {
+        .channel-header__icon {
+            display: none;
+        }
+    }
+
     .member-role .member-menu,
     .member-drop .member-menu {
         right: 0;
@@ -76,10 +82,10 @@
         @include box-shadow(none);
         background: alpha-color($black, .8);
         border: none;
-        height: calc(100% - 40px);
+        height: calc(100% - 50px);
         max-width: 100%;
         position: fixed;
-        top: 47px;
+        top: 40px !important;
         width: 100%;
 
         &.in {
@@ -865,14 +871,18 @@
                 white-space: nowrap;
 
                 .heading {
+                    font-size: 17px;
+                    font-weight: 400;
                     line-height: normal;
                     position: relative;
-                    top: 11px;
+                    top: 14px;
                     vertical-align: top;
                 }
 
                 .header-dropdown__icon {
-                    top: 18px;
+                    font-size: 12px;
+                    margin-left: 5px;
+                    top: 20px;
                     vertical-align: top;
                 }
             }
@@ -891,12 +901,12 @@
                 @include translate3d(0, 100%, 0);
                 background: alpha-color($black, .9);
                 display: block;
-                height: calc(100% - 40px);
+                height: calc(100% - 48px);
                 left: 0;
                 overflow: auto;
                 padding: 1.4em 0 0;
                 position: fixed;
-                top: 42px;
+                top: 48px;
                 visibility: hidden;
                 width: 100%;
 
@@ -981,21 +991,36 @@
     }
 
     .search-bar__container {
-        @include flex(0 0 44px);
+        @include flex(0 0 50px);
         background: $primary-color;
         color: $white;
         padding: 0;
 
+        .search-form__container {
+            padding: 0;
+        }
+
         .search__form {
             @include single-transition(all, .2s, linear);
             @include translateX(0);
             border: none;
-            height: 45px;
-            padding: 7px 20px 0 49px;
-            position: relative;
+            margin-top: 9px;
             width: 100%;
-            margin-left: 0px;
-            margin-right: 0px;
+
+            .search-bar {
+                font-size: 14px;
+                height: 32px;
+                padding: 0 40px;
+            }
+
+            .search__icon {
+                left: 15px;
+                top: 7px;
+
+                svg {
+                    width: 17px;
+                }
+            }
 
             .icon--refresh {
                 @include opacity(.6);
@@ -1009,7 +1034,7 @@
                 background: $white;
                 border: none;
                 color: $dark-gray;
-                padding: 0 31px 0 31px;
+                padding: 0 31px;
             }
         }
 
@@ -1053,7 +1078,7 @@
         }
 
         .nav-pills__container {
-            height: calc(100% - 42px);
+            height: calc(100% - 60px);
         }
 
         > div {
@@ -1110,7 +1135,7 @@
                 }
 
                 h4 {
-                    margin: 16px 0 8px;
+                    margin: 2em 0 1.5em;
                 }
 
                 > a {
@@ -1148,10 +1173,10 @@
             }
 
             .emoji-rhs {
-                position: relative;
                 display: none;
-                top: 1px;
+                position: relative;
                 right: -1px;
+                top: 1px;
             }
 
             .msg-typing:empty {
@@ -1171,27 +1196,32 @@
             }
         }
 
-        .sidebar__collapse,
-        .sidebar__search-icon {
-            display: block;
+        .sidebar-collapse__container {
+            display: table-cell;
+            vertical-align: top;
         }
 
         .sidebar__search-clear {
+            @include opacity(1);
+            color: inherit;
             display: block;
-            top: 6px;
-            height: 30px;
-            width: 35px;
-            margin-right: 18px;
+            height: 32px;
+            margin-right: 0;
+            text-align: center;
+            top: 0;
+            width: 42px;
+
             &.visible {
                 visibility: visible;
             }
         }
 
         .sidebar__search-clear-x {
-            margin-left: 14px;
-            font-size: 22px;
+            font-size: 21px;
             font-weight: 700;
-            opacity: .7;
+            line-height: 0;
+            position: relative;
+            top: 9px;
         }
 
         .sidebar--right__close {
@@ -1199,12 +1229,12 @@
         }
 
         .sidebar-right__body {
-            height: calc(100% - 44px);
+            height: calc(100% - 56px);
         }
     }
 
     .search-items-container {
-        height: calc(100% - 44px);
+        height: calc(100% - 56px);
     }
 
     .inner-wrap {
@@ -1261,10 +1291,10 @@
 
     .app__content {
         margin: 0;
-        padding-top: 45px;
+        padding-top: 56px;
 
         .channel__wrap & {
-            padding-top: 45px;
+            padding-top: 56px;
         }
 
         #channel-header {

webapp/sass/responsive/_tablet.scss

@@ -1,6 +1,30 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 960px) {
+    .inner-wrap {
+        &.move--left {
+            .channel-header {
+                .heading {
+                    max-width: calc(100vw - 600px);
+
+                    .multi-teams & {
+                        max-width: calc(100vw - 650px);
+                    }
+                }
+            }
+
+            .channel-header__info {
+                .channel-header__description {
+                    max-width: calc(100vw - 600px);
+
+                    .multi-teams & {
+                        max-width: calc(100vw - 650px);
+                    }
+                }
+            }
+        }
+    }
+
     .textarea-wrapper {
         .textbox-preview-link,
         .textbox-help-link {
@@ -8,15 +32,23 @@
         }
     }
 
-    .channel-header {
-        .heading {
-            max-width: 90px;
+    .channel-header__info {
+        .channel-header__description {
+            max-width: calc(100vw - 660px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 710px);
+            }
         }
     }
 
-    .search__form {
-        .sidebar--right & {
-            width: 300px;
+    .channel-header {
+        .heading {
+            max-width: calc(100vw - 700px);
+
+            .multi-teams & {
+                max-width: calc(100vw - 750px);
+            }
         }
     }
 
@@ -137,7 +169,6 @@
             transform: translateX(0) !important;
 
             .search-bar__container {
-                padding-right: 8px;
                 z-index: 5;
             }
         }

webapp/sass/routes/_about-modal.scss

@@ -25,8 +25,16 @@
                     font-size: 16px;
                 }
 
-                .fa {
-                    margin: 0 4px 0 8px;
+                .icon {
+                    margin: 0 5px 0 8px;
+                    position: relative;
+                    top: 1px;
+
+                    svg {
+                        @include opacity(.8);
+                        height: 14px;
+                        width: 14px;
+                    }
                 }
             }
         }

webapp/sass/utils/_mixins.scss

@@ -31,28 +31,8 @@
 // Webrtc button
 @mixin webrtc-button {
     .webrtc__button {
-        @include border-radius(50px);
-        background: $button--ready;
-        display: block;
-        height: 33px;
-        text-align: center;
-        width: 33px;
-
-        &.on,
-        &:hover {
-            background: darken($button--ready, 5%);
-        }
-
         &.offline {
-            background: $video-circle-offline;
-
-            &:hover {
-                background: $video-circle-offline;
-            }
-        }
-
-        svg {
-            fill: $white;
+            @include opacity(.5);
         }
     }
 }

webapp/stores/search_store.jsx

@@ -98,7 +98,7 @@ class SearchStoreClass extends EventEmitter {
         return this.searchTerm;
     }
 
-    storeSearchResults(results, isMentionSearch, isFlaggedPosts, isPinnedPosts) {
+    storeSearchResults(results, isMentionSearch = false, isFlaggedPosts = false, isPinnedPosts = false) {
         this.searchResults = results;
         this.isMentionSearch = isMentionSearch;
         this.isFlaggedPosts = isFlaggedPosts;

webapp/utils/constants.jsx

@@ -444,9 +444,10 @@ export const Constants = {
     OPEN_TEAM: 'O',
     MAX_POST_LEN: 4000,
     EMOJI_SIZE: 16,
+    MEMBERS_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Symbols' stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g id='Channel-Header/Web-HD' transform='translate(-725.000000, -32.000000)' fill-rule='nonzero' fill='inherit'> <g id='Channel-Header'> <g id='user-count' transform='translate(676.000000, 22.000000)'> <path d='M64.9481342,24 C64.6981342,20.955 63.2551342,19.076 60.6731342,18.354 C61.4831342,17.466 61.9881342,16.296 61.9881342,15 C61.9881342,12.238 59.7501342,10 56.9881342,10 C54.2261342,10 51.9881342,12.238 51.9881342,15 C51.9881342,16.297 52.4941342,17.467 53.3031342,18.354 C50.7221342,19.076 49.2771342,20.955 49.0271342,24 C49.0161342,24.146 49.0061342,24.577 49.0001342,25.001 C48.9911342,25.553 49.4361342,26 49.9881342,26 L63.9881342,26 C64.5411342,26 64.9851342,25.553 64.9761342,25.001 C64.9701342,24.577 64.9601342,24.146 64.9481342,24 Z M56.9881342,12 C58.6421342,12 59.9881342,13.346 59.9881342,15 C59.9881342,16.654 58.6421342,18 56.9881342,18 C55.3341342,18 53.9881342,16.654 53.9881342,15 C53.9881342,13.346 55.3341342,12 56.9881342,12 Z M51.0321342,24 C51.2981342,21.174 52.7911342,20 55.9881342,20 L57.9881342,20 C61.1851342,20 62.6781342,21.174 62.9441342,24 L51.0321342,24 Z' id='User_4_x2C__Profile_5-Copy-9'></path> </g> </g> </g> </g> </svg>",
     TEAM_INFO_SVG: "<svg width='100%' height='100%' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g transform='matrix(1.17647,0,0,1.17647,-1.55431e-15,-1.00573e-14)'> <path d='M8.5,0C3.797,0 0,3.797 0,8.5C0,13.203 3.797,17 8.5,17C13.203,17 17,13.203 17,8.5C17,3.797 13.203,0 8.5,0ZM10,8.5C10,7.672 9.328,7 8.5,7C7.672,7 7,7.672 7,8.5L7,12.45C7,13.278 7.672,13.95 8.5,13.95C9.328,13.95 10,13.278 10,12.45L10,8.5ZM8.5,3C9.328,3 10,3.672 10,4.5C10,5.328 9.328,6 8.5,6C7.672,6 7,5.328 7,4.5C7,3.672 7.672,3 8.5,3Z'/> </g> </svg>",
-    FLAG_ICON_OUTLINE_SVG: "<svg width='12px' height='12px' viewBox='0 0 48 48' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g> <g transform='matrix(1,0,0,0.957537,-0.5,1.42123)'> <path d='M2.5,0.5C1.4,0.5 0.5,1.4 0.5,2.5L0.5,45.6C0.5,46.7 1.4,47.6 2.5,47.6C3.6,47.6 4.5,46.7 4.5,45.6L4.5,2.5C4.4,1.4 3.5,0.5 2.5,0.5Z'/> </g> <g transform='matrix(0.923469,0,0,0.870026,1.64285,2.0085)'> <path d='M46.4,3.5C43.3,2.1 40.1,1.4 36.5,1.4C32.1,1.4 27.8,2.4 23.6,3.4C19.4,4.4 15.5,5.3 11.6,5.3C10.5,5.3 9.4,5.2 8.4,5.1L8.4,37C9.4,37.1 10.5,37.2 11.6,37.2C16,37.2 20.3,36.2 24.5,35.2C28.7,34.2 32.6,33.3 36.5,33.3C39.5,33.3 42.3,33.9 44.8,35.1C45.4,35.4 46.1,35.3 46.7,35C47.3,34.6 47.6,34 47.6,33.3L47.6,5.3C47.5,4.6 47.1,3.9 46.4,3.5Z' style='stroke-width:3.23px; fill:none;'/> </g> </g> </svg>",
-    FLAG_ICON_SVG: "<svg width='12px' height='12px' viewBox='0 0 48 48' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;'> <g> <g transform='matrix(1,0,0,0.957537,-0.5,1.42123)'> <path d='M2.5,0.5C1.4,0.5 0.5,1.4 0.5,2.5L0.5,45.6C0.5,46.7 1.4,47.6 2.5,47.6C3.6,47.6 4.5,46.7 4.5,45.6L4.5,2.5C4.4,1.4 3.5,0.5 2.5,0.5Z'/> </g> <g transform='matrix(0.923469,0,0,0.870026,1.64285,2.0085)'> <path d='M46.4,3.5C43.3,2.1 40.1,1.4 36.5,1.4C32.1,1.4 27.8,2.4 23.6,3.4C19.4,4.4 15.5,5.3 11.6,5.3C10.5,5.3 9.4,5.2 8.4,5.1L8.4,37C9.4,37.1 10.5,37.2 11.6,37.2C16,37.2 20.3,36.2 24.5,35.2C28.7,34.2 32.6,33.3 36.5,33.3C39.5,33.3 42.3,33.9 44.8,35.1C45.4,35.4 46.1,35.3 46.7,35C47.3,34.6 47.6,34 47.6,33.3L47.6,5.3C47.5,4.6 47.1,3.9 46.4,3.5Z' style='stroke-width:3.23px;'/> </g> </g> </svg>",
+    FLAG_FILLED_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-1073.000000, -33.000000)' fill-rule='nonzero' fill='inherit'> <g transform='translate(-1.000000, 0.000000)'> <g transform='translate(1064.000000, 22.000000)'> <g transform='translate(10.000000, 11.000000)'> <path d='M8,1 L2,1 C2,0.447 1.553,0 1,0 C0.447,0 0,0.447 0,1 L0,15.5 C0,15.776 0.224,16 0.5,16 L1.5,16 C1.776,16 2,15.776 2,15.5 L2,11 L7,11 L7,12 C7,12.553 7.447,13 8,13 L15,13 C15.553,13 16,12.553 16,12 L16,4 C16,3.447 15.553,3 15,3 L9,3 L9,2 C9,1.447 8.553,1 8,1 Z'></path> </g> </g> </g> </g> </g> </svg>",
+    FLAG_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-1106.000000, -33.000000)' fill-rule='nonzero' fill='inherit'> <g> <g transform='translate(1096.000000, 22.000000)'> <g transform='translate(10.000000, 11.000000)'> <path d='M8,1 L2,1 C2,0.447 1.553,0 1,0 C0.447,0 0,0.447 0,1 L0,15.5 C0,15.776 0.224,16 0.5,16 L1.5,16 C1.776,16 2,15.776 2,15.5 L2,11 L7,11 L7,12 C7,12.553 7.447,13 8,13 L15,13 C15.553,13 16,12.553 16,12 L16,4 C16,3.447 15.553,3 15,3 L9,3 L9,2 C9,1.447 8.553,1 8,1 Z M9,11 L9,9.5 C9,9.224 8.776,9 8.5,9 L2,9 L2,3 L7,3 L7,4.5 C7,4.776 7.224,5 7.5,5 L14,5 L14,11 L9,11 Z'></path> </g> </g> </g> </g> </g> </svg>",
     ATTACHMENT_ICON_SVG: "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 48 48' enable-background='new 0 0 48 48' xml:space='preserve'><g><path d='M43.922,6.653c-2.643-2.644-6.201-4.107-9.959-4.069c-3.774,0.019-7.32,1.497-9.983,4.161l-12.3,12.3l-8.523,8.521   c-4.143,4.144-4.217,10.812-0.167,14.862c1.996,1.996,4.626,2.989,7.277,2.989c2.73,0,5.482-1.055,7.583-3.156l15.547-15.545   c0.002-0.002,0.002-0.004,0.004-0.005l5.358-5.358c1.394-1.393,2.176-3.24,2.201-5.2c0.026-1.975-0.716-3.818-2.09-5.192   c-2.834-2.835-7.496-2.787-10.394,0.108L9.689,29.857c-0.563,0.563-0.563,1.474,0,2.036c0.281,0.28,0.649,0.421,1.018,0.421   c0.369,0,0.737-0.141,1.018-0.421l18.787-18.788c1.773-1.774,4.609-1.824,6.322-0.11c0.82,0.82,1.263,1.928,1.247,3.119   c-0.017,1.205-0.497,2.342-1.357,3.201l-5.55,5.551c-0.002,0.002-0.002,0.004-0.004,0.005L15.814,40.225   c-3.02,3.02-7.86,3.094-10.789,0.167c-2.928-2.929-2.854-7.77,0.167-10.791l0.958-0.958c0.001-0.002,0.004-0.002,0.005-0.004   L26.016,8.78c2.123-2.124,4.951-3.303,7.961-3.317c2.998,0.02,5.814,1.13,7.91,3.226c4.35,4.351,4.309,11.472-0.093,15.873   L25.459,40.895c-0.563,0.562-0.563,1.473,0,2.035c0.281,0.281,0.65,0.422,1.018,0.422c0.369,0,0.737-0.141,1.018-0.422   L43.83,26.596C49.354,21.073,49.395,12.126,43.922,6.653z'></path></g></svg>",
     MATTERMOST_ICON_SVG: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='0 0 500 500' style='enable-background:new 0 0 500 500;' xml:space='preserve'> <style type='text/css'> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#222222;} </style> <g id='XMLID_1_'> <g id='XMLID_3_'> <path id='XMLID_4_' class='st0' d='M396.9,47.7l2.6,53.1c43,47.5,60,114.8,38.6,178.1c-32,94.4-137.4,144.1-235.4,110.9 S51.1,253.1,83,158.7C104.5,95.2,159.2,52,222.5,40.5l34.2-40.4C150-2.8,49.3,63.4,13.3,169.9C-31,300.6,39.1,442.5,169.9,486.7 s272.6-25.8,316.9-156.6C522.7,223.9,483.1,110.3,396.9,47.7z'/> </g> <path id='XMLID_2_' class='st0' d='M335.6,204.3l-1.8-74.2l-1.5-42.7l-1-37c0,0,0.2-17.8-0.4-22c-0.1-0.9-0.4-1.6-0.7-2.2 c0-0.1-0.1-0.2-0.1-0.3c0-0.1-0.1-0.2-0.1-0.2c-0.7-1.2-1.8-2.1-3.1-2.6c-1.4-0.5-2.9-0.4-4.2,0.2c0,0-0.1,0-0.1,0 c-0.2,0.1-0.3,0.1-0.4,0.2c-0.6,0.3-1.2,0.7-1.8,1.3c-3,3-13.7,17.2-13.7,17.2l-23.2,28.8l-27.1,33l-46.5,57.8 c0,0-21.3,26.6-16.6,59.4s29.1,48.7,48,55.1c18.9,6.4,48,8.5,71.6-14.7C336.4,238.4,335.6,204.3,335.6,204.3z'/> </g> </svg>",
     ONLINE_AVATAR_SVG: "<svg version='1.1'id='Layer_1' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#' xmlns:svg='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:cc='http://creativecommons.org/ns#' inkscape:version='0.48.4 r9939' sodipodi:docname='TRASH_1_4.svg'xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-243 245 12 12'style='enable-background:new -243 245 12 12;' xml:space='preserve'> <sodipodi:namedview  inkscape:cx='26.358185' inkscape:zoom='1.18' bordercolor='#666666' pagecolor='#ffffff' borderopacity='1' objecttolerance='10' inkscape:cy='139.7898' gridtolerance='10' guidetolerance='10' showgrid='false' showguides='true' id='namedview6' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:guide-bbox='true' inkscape:window-width='1366' inkscape:current-layer='Layer_1' inkscape:window-height='705' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:window-x='-8'> <sodipodi:guide  position='50.036793,85.991376' orientation='1,0' id='guide2986'></sodipodi:guide> <sodipodi:guide  position='58.426196,66.216355' orientation='0,1' id='guide3047'></sodipodi:guide> </sodipodi:namedview> <g> <path class='online--icon' d='M-236,250.5C-236,250.5-236,250.5-236,250.5C-236,250.5-236,250.5-236,250.5C-236,250.5-236,250.5-236,250.5z'/> <ellipse class='online--icon' cx='-238.5' cy='248' rx='2.5' ry='2.5'/> </g> <path class='online--icon' d='M-238.9,253.8c0-0.4,0.1-0.9,0.2-1.3c-2.2-0.2-2.2-2-2.2-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5c0,0.1-0.1,0.5,0,0.6 c0.2,1.3,2.2,2.3,4.4,2.4c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0C-238.7,255.7-238.9,254.8-238.9,253.8z'/> <g> <g> <path class='online--icon' d='M-232.3,250.1l1.3,1.3c0,0,0,0.1,0,0.1l-4.1,4.1c0,0,0,0-0.1,0c0,0,0,0,0,0l-2.7-2.7c0,0,0-0.1,0-0.1l1.2-1.2 c0,0,0.1,0,0.1,0l1.4,1.4l2.9-2.9C-232.4,250.1-232.3,250.1-232.3,250.1z'/> </g> </g> </svg>",
@@ -455,13 +456,21 @@ export const Constants = {
     ONLINE_ICON_SVG: "<div class='icon__container'><svg width='100%' height='100%' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'><path class='online--icon' d='M10,0c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm6.19,7.18c0,0.208 -0.075,0.384 -0.224,0.53l-5.782,5.64l-1.087,1.059c-0.149,0.146 -0.33,0.218 -0.543,0.218c-0.213,0 -0.394,-0.072 -0.543,-0.218l-1.086,-1.059l-2.891,-2.82c-0.149,-0.146 -0.224,-0.322 -0.224,-0.53c0,-0.208 0.075,-0.384 0.224,-0.53l1.086,-1.059c0.149,-0.146 0.33,-0.218 0.543,-0.218c0.213,0 0.394,0.072 0.543,0.218l2.348,2.298l5.24,-5.118c0.149,-0.146 0.33,-0.218 0.543,-0.218c0.213,0 0.394,0.072 0.543,0.218l1.086,1.059c0.149,0.146 0.224,0.322 0.224,0.53Z'/></svg></div>",
     AWAY_ICON_SVG: "<div class='icon__container'><svg width='100%' height='100%' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'><path class='away--icon' d='M10,0c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm5.25,8.5l-10.5,0c-0.414,0 -0.75,0.336 -0.75,0.75l0,1.5c0,0.414 0.336,0.75 0.75,0.75l10.5,0c0.414,0 0.75,-0.336 0.75,-0.75l0,-1.5c0,-0.414 -0.336,-0.75 -0.75,-0.75Z'/></svg></div>",
     OFFLINE_ICON_SVG: "<svg class='offline--icon' width='100%' height='100%' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'><path d='M10,0c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,2c4.415,0 8,3.585 8,8c0,4.415 -3.585,8 -8,8c-4.415,0 -8,-3.585 -8,-8c0,-4.415 3.585,-8 8,-8Z'/></svg>",
-    MENU_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='4px' height='16px' viewBox='0 0 8 32' enable-background='new 0 0 8 32' xml:space='preserve'> <g> <circle cx='4' cy='4.062' r='4'/> <circle cx='4' cy='16' r='4'/> <circle cx='4' cy='28' r='4'/> </g> </svg>",
+    MENU_ICON: "<svg width='16px' height='10px' viewBox='0 0 16 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-188.000000, -38.000000)' fill-rule='nonzero' fill='inherit'> <g> <g> <g transform='translate(188.000000, 38.000000)'> <path d='M15.5,0 C15.776,0 16,0.224 16,0.5 L16,1.5 C16,1.776 15.776,2 15.5,2 L0.5,2 C0.224,2 0,1.776 0,1.5 L0,0.5 C0,0.224 0.224,0 0.5,0 L15.5,0 Z M15.5,4 C15.776,4 16,4.224 16,4.5 L16,5.5 C16,5.776 15.776,6 15.5,6 L0.5,6 C0.224,6 0,5.776 0,5.5 L0,4.5 C0,4.224 0.224,4 0.5,4 L15.5,4 Z M15.5,8 C15.776,8 16,8.224 16,8.5 L16,9.5 C16,9.776 15.776,10 15.5,10 L0.5,10 C0.224,10 0,9.776 0,9.5 L0,8.5 C0,8.224 0.224,8 0.5,8 L15.5,8 Z'></path> </g> </g> </g> </g> </g> </svg>",
     COMMENT_ICON: "<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='15px' height='15px' viewBox='1 1.5 15 15' enable-background='new 1 1.5 15 15' xml:space='preserve'> <g> <g> <path fill='#211B1B' d='M14,1.5H3c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2h1.628l1.884,3l1.866-3H14c1.104,0,2-0.896,2-2v-8 C16,2.396,15.104,1.5,14,1.5z M15,11.5c0,0.553-0.447,1-1,1H8l-1.493,2l-1.504-1.991L5,12.5H3c-0.552,0-1-0.447-1-1v-8 c0-0.552,0.448-1,1-1h11c0.553,0,1,0.448,1,1V11.5z'/> </g> </g> </svg>",
     REPLY_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-158 242 18 18' style='enable-background:new -158 242 18 18;' xml:space='preserve'> <path d='M-142.2,252.6c-2-3-4.8-4.7-8.3-4.8v-3.3c0-0.2-0.1-0.3-0.2-0.3s-0.3,0-0.4,0.1l-6.9,6.2c-0.1,0.1-0.1,0.2-0.1,0.3 c0,0.1,0,0.2,0.1,0.3l6.9,6.4c0.1,0.1,0.3,0.1,0.4,0.1c0.1-0.1,0.2-0.2,0.2-0.4v-3.8c4.2,0,7.4,0.4,9.6,4.4c0.1,0.1,0.2,0.2,0.3,0.2 c0,0,0.1,0,0.1,0c0.2-0.1,0.3-0.3,0.2-0.4C-140.2,257.3-140.6,255-142.2,252.6z M-150.8,252.5c-0.2,0-0.4,0.2-0.4,0.4v3.3l-6-5.5 l6-5.3v2.8c0,0.2,0.2,0.4,0.4,0.4c3.3,0,6,1.5,8,4.5c0.5,0.8,0.9,1.6,1.2,2.3C-144,252.8-147.1,252.5-150.8,252.5z'/> </svg>",
     SCROLL_BOTTOM_ICON: "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'viewBox='-239 239 21 23' style='enable-background:new -239 239 21 23;' xml:space='preserve'> <path d='M-239,241.4l2.4-2.4l8.1,8.2l8.1-8.2l2.4,2.4l-10.5,10.6L-239,241.4z M-228.5,257.2l8.1-8.2l2.4,2.4l-10.5,10.6l-10.5-10.6 l2.4-2.4L-228.5,257.2z'/> </svg>",
-    VIDEO_ICON: "<svg width='55%'height='100%'viewBox='0 0 13 8'> <g transform='matrix(1,0,0,1,-507,-146)'> <g transform='matrix(0.0133892,0,0,0.014499,500.635,142.838)'> <path d='M1158,547.286L1158,644.276C1158,684.245 1125.55,716.694 1085.58,716.694L579.341,716.694C539.372,716.694 506.922,684.245 506.922,644.276L506.922,306.322C506.922,266.353 539.371,233.904 579.341,233.903L1085.58,233.903C1125.55,233.904 1158,266.353 1158,306.322L1158,402.939L1359.75,253.14C1365.83,248.362 1373.43,245.973 1382.56,245.973C1386.61,245.973 1390.83,246.602 1395.22,247.859C1408.4,252.134 1414.99,259.552 1414.99,270.113L1414.99,680.485C1414.99,691.046 1408.4,698.464 1395.22,702.739C1390.83,703.996 1386.61,704.624 1382.56,704.624C1373.43,704.624 1365.83,702.236 1359.75,697.458L1158,547.286Z'/> </g> </g> </svg>",
-    PIN_ICON: "<svg width='19px' height='19px'  viewBox='0 0 25 25' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='1.414'><path d='M24.78 9.236L15.863.316l-1.487 4.46-4.46 4.46L8.43 7.75 3.972 9.235l4.458 4.458L.776 24.388l10.627-7.72 4.46 4.46 1.485-4.46-1.486-1.485 4.46-4.46 4.46-1.487z' fill-rule='nonzero'/></svg>",
+    VIDEO_ICON: "<svg width='16px' height='12px' viewBox='0 0 16 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-696.000000, -34.000000)' fill-rule='nonzero' fill='inherit'> <g transform='translate(-1.000000, 0.000000)'> <g transform='translate(687.000000, 22.000000)'> <g transform='translate(10.000000, 12.000000)'> <path d='M15.105,1.447 L12,3 L12,1 C12,0.447 11.553,0 11,0 L1,0 C0.447,0 0,0.447 0,1 L0,11 C0,11.553 0.447,12 1,12 L11,12 C11.553,12 12,11.553 12,11 L12,9 L15.105,10.553 C15.6,10.8 16,10.553 16,10 L16,2 C16,1.447 15.6,1.2 15.105,1.447 Z M12.895,7.211 C12.612,7.07 12.306,7 12,7 L10.5,7 C10.224,7 10,7.224 10,7.5 L10,10 L2,10 L2,2 L10,2 L10,4.5 C10,4.776 10.224,5 10.5,5 L12,5 C12.306,5 12.612,4.93 12.895,4.789 L14,4.236 L14,7.763 L12.895,7.211 Z'></path> </g> </g> </g> </g> </g> </svg>",
+    PIN_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Symbols' stroke='inherit' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-775.000000, -32.000000)' fill-rule='nonzero' fill='inherit'> <g> <g transform='translate(764.000000, 22.000000)'> <g transform='translate(10.000000, 10.000000)'> <path d='M16.456,7.291 L9.483,0.25 C9.31,0.078 9.178,0 9.08,0 C8.896,0 8.831,0.276 8.831,0.732 L8.831,3.044 L5.831,5.96 L2.578,6.268 C1.887,6.405 1.668,6.917 2.167,7.41 L4.781,10.011 L3.83,10.961 L1.05,15.511 C0.93,15.761 1.03,15.862 1.28,15.74 L5.83,12.961 L6.786,12.005 L9.359,14.565 C9.556,14.76 9.754,14.854 9.929,14.854 C10.197,14.854 10.413,14.634 10.497,14.219 L10.83,10.961 L13.746,7.961 L16.082,7.961 C16.788,7.961 16.955,7.785 16.456,7.291 Z M12.312,6.567 L9.396,9.567 L8.911,10.065 L8.84,10.757 L8.797,11.184 L5.589,7.992 L6.018,7.952 L6.72,7.886 L7.225,7.396 L10.225,4.48 L10.547,4.167 L12.616,6.256 L12.312,6.567 Z'></path> </g> </g> </g> </g> </g> </svg>",
     LEAVE_TEAM_SVG: "<svg width='100%' height='100%' viewBox='0 0 164 164' version='1.1' xmlns='http://www.w3.org/2000/svg'    xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round; stroke-miterlimit:1.41421;'> <path d='M26.023,164L26.023,7.035L26.022,0.32L137.658,0.32L137.658,164L124.228,164L124.228, 13.749L39.452,13.749L39.452,164L26.023, 164ZM118.876,164L118.876,18.619L58.137,32.918L58.137,149.701L118.876,164Z'/></svg>",
+    SEARCH_ICON_SVG: "<svg width='19px' height='18px' viewBox='0 0 19 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='inherit' stroke-width='1' fill='none' fill-rule='evenodd'> <g transform='translate(-719.000000, -20.000000)' stroke-width='1.5'> <g transform='translate(0.000000, 1.000000)'> <g transform='translate(63.000000, 10.000000)'> <g transform='translate(657.000000, 10.000000)'> <circle cx='7' cy='7' r='7'></circle> <path d='M12.5,11.5 L16.5,15.5' stroke-linecap='round'></path> </g> </g> </g> </g> </g> </svg>",
+    MENTIONS_ICON_SVG: "<svg width='20px' height='20px' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-1057.000000, -31.000000)' fill='inherit'> <g> <g transform='translate(1049.000000, 22.000000)'> <path d='M17.4296875,15.8867188 C15.9882812,15.8867188 15.1210938,17.0351562 15.1210938,18.96875 C15.1210938,20.8789062 15.9882812,22.0507812 17.4179688,22.0507812 C18.8945312,22.0507812 19.84375,20.8554688 19.84375,18.96875 C19.84375,17.0820312 18.90625,15.8867188 17.4296875,15.8867188 Z M17.8398438,9.125 C23.3242188,9.125 27.25,12.59375 27.25,17.7734375 C27.25,21.5117188 25.5625,23.9609375 22.7734375,23.9609375 C21.4023438,23.9609375 20.265625,23.1992188 20.078125,22.0390625 L19.9609375,22.0390625 C19.46875,23.2226562 18.4140625,23.8789062 17.0429688,23.8789062 C14.6054687,23.8789062 12.9648438,21.8867188 12.9648438,18.9101562 C12.9648438,16.0625 14.6171875,14.09375 16.9960938,14.09375 C18.25,14.09375 19.3632812,14.7382812 19.8085938,15.7460938 L19.9375,15.7460938 L19.9375,14.328125 L21.9179688,14.328125 L21.9179688,20.984375 C21.9179688,21.7578125 22.328125,22.2851562 23.171875,22.2851562 C24.4726562,22.2851562 25.421875,20.6679688 25.421875,17.8320312 C25.421875,13.5664062 22.2929688,10.7421875 17.7109375,10.7421875 C13.1640625,10.7421875 9.90625,14.140625 9.90625,18.96875 C9.90625,24.1367188 13.3515625,27.0429688 18.109375,27.0429688 C19.5625,27.0429688 21.0507812,26.84375 21.7773438,26.5390625 L21.7773438,28.15625 C20.78125,28.484375 19.4570312,28.671875 18.0273438,28.671875 C12.2382812,28.671875 8.078125,25.109375 8.078125,18.8984375 C8.078125,13.0625 12.0859375,9.125 17.8398438,9.125 Z'></path> </g> </g> </g></g></svg>",
+    MENU_ICON_SVG: "<svg width='16px' height='10px' viewBox='0 0 16 10' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-26.000000, -24.000000)' fill-rule='nonzero' fill='inherit'> <g transform='translate(26.000000, 24.000000)'> <path d='M1.5,0 L0.5,0 C0.224,0 0,0.224 0,0.5 L0,1.5 C0,1.776 0.224,2 0.5,2 L1.5,2 C1.776,2 2,1.776 2,1.5 L2,0.5 C2,0.224 1.776,0 1.5,0 Z'></path> <path d='M15.5,0 L3.5,0 C3.224,0 3,0.224 3,0.5 L3,1.5 C3,1.776 3.224,2 3.5,2 L15.5,2 C15.776,2 16,1.776 16,1.5 L16,0.5 C16,0.224 15.776,0 15.5,0 Z'></path> <path d='M1.5,4 L0.5,4 C0.224,4 0,4.224 0,4.5 L0,5.5 C0,5.776 0.224,6 0.5,6 L1.5,6 C1.776,6 2,5.776 2,5.5 L2,4.5 C2,4.224 1.776,4 1.5,4 Z'></path> <path d='M3.5,6 L11.5,6 C11.776,6 12,5.776 12,5.5 L12,4.5 C12,4.224 11.776,4 11.5,4 L3.5,4 C3.224,4 3,4.224 3,4.5 L3,5.5 C3,5.776 3.224,6 3.5,6 Z'></path> <path d='M1.5,8 L0.5,8 C0.224,8 0,8.224 0,8.5 L0,9.5 C0,9.776 0.224,10 0.5,10 L1.5,10 C1.776,10 2,9.776 2,9.5 L2,8.5 C2,8.224 1.776,8 1.5,8 Z'></path> <path d='M13.5,8 L3.5,8 C3.224,8 3,8.224 3,8.5 L3,9.5 C3,9.776 3.224,10 3.5,10 L13.5,10 C13.776,10 14,9.776 14,9.5 L14,8.5 C14,8.224 13.776,8 13.5,8 Z'></path> </g> </g> </g> </svg>",
+    INFO_ICON_SVG: "<svg width='22px' height='22px' viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-388.000000, -18.000000)' fill='inherit'> <g> <g transform='translate(381.000000, 11.000000)'> <g transform='translate(7.000000, 7.000000)'> <path d='M11,22 C4.92486775,22 0,17.0751322 0,11 C0,4.92486775 4.92486775,0 11,0 C17.0751322,0 22,4.92486775 22,11 C22,17.0751322 17.0751322,22 11,22 Z M11,20.7924685 C16.408231,20.7924685 20.7924685,16.408231 20.7924685,11 C20.7924685,5.59176898 16.408231,1.20753149 11,1.20753149 C5.59176898,1.20753149 1.20753149,5.59176898 1.20753149,11 C1.20753149,16.408231 5.59176898,20.7924685 11,20.7924685 Z M10.1572266,16.0625 L10.1572266,8.69335938 L11.3466797,8.69335938 L11.3466797,16.0625 L10.1572266,16.0625 Z M10.7519531,7.50390625 C10.3417969,7.50390625 10,7.16210938 10,6.75195312 C10,6.33496094 10.3417969,6 10.7519531,6 C11.1689453,6 11.5039062,6.33496094 11.5039062,6.75195312 C11.5039062,7.16210938 11.1689453,7.50390625 10.7519531,7.50390625 Z'></path> </g> </g> </g> </g> </g> </svg>",
+    MESSAGE_ICON_SVG: "<svg width='16px' height='16px' viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-202.000000, -176.000000)' fill-rule='nonzero' fill='inherit'> <g> <g transform='translate(202.000000, 176.000000)'> <path d='M15,0 C15.553,0 16,0.496 16,1.048 L16,8.048 C16,8.601 15.553,9 15,9 L14,9 L14,7.048 L14,3.048 C14,2.496 13.553,2 13,2 L5,2 L3,2 L3,1.048 C3,0.496 3.447,0 4,0 L15,0 Z M12,3 C12.55,3 13,3.508 13,4.07 L13,12.048 C13,12.61 12.55,13 12,13 L11,13 L11,15.376 C11,15.94 10.596,16.035 10.098,15.791 L4.72,13 L1,13 C0.45,13 0,12.61 0,12.048 L0,4.07 C0,3.508 0.45,3 1,3 L12,3 Z'></path> </g> </g> </g> </g> </svg>",
+    SWITCH_CHANNEL_ICON_SVG: "<svg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-32.000000, -982.000000)' fill-rule='nonzero' fill='inherit'> <g> <g transform='translate(0.000000, 961.000000)'> <g transform='translate(32.000000, 21.000000)'> <path d='M21.5,0.5 L2.5,0.5 C1.121,0.5 0,1.622 0,3 L0,21 C0,22.378 1.121,23.5 2.5,23.5 L21.5,23.5 C22.879,23.5 24,22.378 24,21 L24,3 C24,1.622 22.879,0.5 21.5,0.5 Z M2.5,1.5 L21.5,1.5 C22.327,1.5 23,2.173 23,3 L23,4.5 L1,4.5 L1,3 C1,2.173 1.673,1.5 2.5,1.5 Z M21.5,22.5 L2.5,22.5 C1.673,22.5 1,21.827 1,21 L1,5.5 L23,5.5 L23,21 C23,21.827 22.327,22.5 21.5,22.5 Z'></path> <circle cx='2.5' cy='3' r='1'></circle> <circle cx='4.5' cy='3' r='1'></circle> <circle cx='6.5' cy='3' r='1'></circle> <path d='M19.146,16.94 C19.673,16.263 20,15.423 20,14.5 C20,12.294 18.206,10.5 16,10.5 C13.794,10.5 12,12.294 12,14.5 C12,16.706 13.794,18.5 16,18.5 C16.922,18.5 17.762,18.174 18.439,17.647 L21.146,20.354 C21.244,20.451 21.372,20.5 21.5,20.5 C21.628,20.5 21.756,20.451 21.853,20.354 C22.048,20.159 22.048,19.842 21.853,19.647 L19.146,16.94 Z M13,14.5 C13,12.846 14.346,11.5 16,11.5 C17.654,11.5 19,12.846 19,14.5 C19,16.154 17.654,17.5 16,17.5 C14.346,17.5 13,16.154 13,14.5 Z'></path> <path d='M2.5,8.5 L7.5,8.5 C7.776,8.5 8,8.276 8,8 C8,7.724 7.776,7.5 7.5,7.5 L2.5,7.5 C2.224,7.5 2,7.724 2,8 C2,8.276 2.224,8.5 2.5,8.5 Z'></path> <path d='M10.5,8.5 L13.5,8.5 C13.776,8.5 14,8.276 14,8 C14,7.724 13.776,7.5 13.5,7.5 L10.5,7.5 C10.224,7.5 10,7.724 10,8 C10,8.276 10.224,8.5 10.5,8.5 Z'></path> <path d='M21.5,7.5 L16.5,7.5 C16.224,7.5 16,7.724 16,8 C16,8.276 16.224,8.5 16.5,8.5 L21.5,8.5 C21.776,8.5 22,8.276 22,8 C22,7.724 21.776,7.5 21.5,7.5 Z'></path> <path d='M2.5,11.5 L5.5,11.5 C5.776,11.5 6,11.276 6,11 C6,10.724 5.776,10.5 5.5,10.5 L2.5,10.5 C2.224,10.5 2,10.724 2,11 C2,11.276 2.224,11.5 2.5,11.5 Z'></path> <path d='M8.5,11.5 L12.5,11.5 C12.776,11.5 13,11.276 13,11 C13,10.724 12.776,10.5 12.5,10.5 L8.5,10.5 C8.224,10.5 8,10.724 8,11 C8,11.276 8.224,11.5 8.5,11.5 Z'></path> <path d='M10.5,13.5 L7.5,13.5 C7.224,13.5 7,13.724 7,14 C7,14.276 7.224,14.5 7.5,14.5 L10.5,14.5 C10.776,14.5 11,14.276 11,14 C11,13.724 10.776,13.5 10.5,13.5 Z'></path> <path d='M2.5,14.5 L4.5,14.5 C4.776,14.5 5,14.276 5,14 C5,13.724 4.776,13.5 4.5,13.5 L2.5,13.5 C2.224,13.5 2,13.724 2,14 C2,14.276 2.224,14.5 2.5,14.5 Z'></path> <path d='M2.5,17.5 L8.5,17.5 C8.776,17.5 9,17.276 9,17 C9,16.724 8.776,16.5 8.5,16.5 L2.5,16.5 C2.224,16.5 2,16.724 2,17 C2,17.276 2.224,17.5 2.5,17.5 Z'></path> <path d='M10.5,19.5 L2.5,19.5 C2.224,19.5 2,19.724 2,20 C2,20.276 2.224,20.5 2.5,20.5 L10.5,20.5 C10.776,20.5 11,20.276 11,20 C11,19.724 10.776,19.5 10.5,19.5 Z'></path> </g> </g> </g> </g> </g> </svg>",
+    GLOBE_ICON_SVG: "<svg width='13px' height='13px' viewBox='0 0 14 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-115.000000, -147.000000)' fill-rule='nonzero' fill='inherit'> <g transform='translate(95.000000, 0.000000)'> <g transform='translate(20.000000, 113.000000)'> <g transform='translate(0.000000, 34.000000)'> <path d='M10.409,0.893375 C9.40275,0.329875 8.24075,0.00875 7,0 C3.13075,0 0,3.140375 0,7 C0,10.521875 2.594375,13.42775 5.97625,13.93 C6.314875,13.974625 6.6535,14 7,14 C8.24075,14 9.40275,13.678875 10.409,13.1145 C12.551875,11.918375 14,9.6285 14,7 C13.99125,4.3715 12.551875,2.090375 10.409,0.893375 Z M11.554375,4.375 L9.431625,4.375 C9.302125,3.5 9.10875,2.736125 8.86725,2.085125 C10.003875,2.519125 10.9515,3.5 11.554375,4.375 Z M6.941375,1.73775 C6.960625,1.736875 6.979875,1.73425 7,1.73425 C7.020125,1.73425 7.039375,1.736875 7.058625,1.73775 C7.340375,2.172625 7.697375,3.5 7.92225,4.375 L6.07775,4.375 C6.302625,3.5 6.659625,2.172625 6.941375,1.73775 Z M1.81475,7.875 C1.7675,7.875 1.73425,7.29925 1.73425,7 C1.73425,6.70075 1.764875,6.125 1.813,6.125 L4.396875,6.125 C4.384625,6.125 4.375,6.7025 4.375,7 C4.375,7.2975 4.384625,7.875 4.396875,7.875 L1.81475,7.875 Z M4.354875,11.54475 C4.346125,11.54475 4.337375,11.54475 4.337375,11.536 C3.548125,11.07575 2.893625,10.5 2.436875,9.625 L4.568375,9.625 C4.697875,10.5 4.890375,11.262125 5.131875,11.91225 C4.8615,11.81075 4.599875,11.692625 4.354875,11.54475 Z M4.568375,4.375 L2.443875,4.375 C3.045875,3.5 3.994375,2.517375 5.131875,2.083375 C4.89125,2.734375 4.697875,3.5 4.568375,4.375 Z M7.0595,12.26225 C7.039375,12.26225 7.020125,12.26575 7,12.26575 C6.979875,12.26575 6.960625,12.26225 6.9405,12.26225 C6.65875,11.8265 6.302625,11.375 6.07775,9.625 L7.921375,9.625 C7.697375,11.375 7.34125,11.8265 7.0595,12.26225 Z M8.11125,7.875 L5.88875,7.875 C5.873875,7.875 5.8625,7.30625 5.8625,7 C5.8625,6.69375 5.873875,6.125 5.88875,6.125 L8.11125,6.125 C8.126125,6.125 8.1375,6.69375 8.1375,7 C8.1375,7.30625 8.126125,7.875 8.11125,7.875 Z M10.409,11.0075 C10.13075,11.242 9.828,11.45025 9.506875,11.631375 C9.30125,11.74075 9.086875,11.839625 8.8655,11.923625 C9.107,11.270875 9.30125,10.5 9.431625,9.625 L11.557875,9.625 C11.25425,10.5 10.8675,10.618125 10.409,11.0075 Z M9.603125,7.875 C9.615375,7.875 9.625,7.2975 9.625,7 C9.625,6.7025 9.615375,6.125 9.603125,6.125 L12.186125,6.125 C12.235125,6.125 12.26575,6.70075 12.26575,7 C12.26575,7.29925 12.233375,7.875 12.18525,7.875 L9.603125,7.875 Z'></path> </g> </g> </g> </g> </g> </svg>",
+    LOCK_ICON_SVG: "<svg width='12px' height='13px' viewBox='0 0 13 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <g stroke='none' stroke-width='1' fill='inherit' fill-rule='evenodd'> <g transform='translate(-116.000000, -175.000000)' fill-rule='nonzero' fill='inherit'> <g transform='translate(95.000000, 0.000000)'> <g transform='translate(20.000000, 113.000000)'> <g transform='translate(1.000000, 62.000000)'> <path d='M12.0714286,6.5 L11.1428571,6.5 L11.1428571,4.64285714 C11.1428571,2.07814286 9.06471429,0 6.5,0 C3.93528571,0 1.85714286,2.07814286 1.85714286,4.64285714 L1.85714286,6.5 L0.928571429,6.5 C0.415071429,6.5 0,7.00792857 0,7.52142857 L0,13.9285714 C0,14.4420714 0.415071429,14.8571429 0.928571429,14.8571429 L12.0714286,14.8571429 C12.5849286,14.8571429 13,14.4420714 13,13.9285714 L13,7.52142857 C13,7.00792857 12.5849286,6.5 12.0714286,6.5 Z M6.5,1.85714286 C8.03585714,1.85714286 9.28571429,3.107 9.28571429,4.64285714 L9.28571429,6.5 L8.35714286,6.5 L4.64285714,6.5 L3.71428571,6.5 L3.71428571,4.64285714 C3.71428571,3.107 4.96414286,1.85714286 6.5,1.85714286 Z'></path> </g> </g> </g> </g> </g> </svg>",
     THEMES: {
         default: {
             type: 'Mattermost',

webapp/utils/utils.jsx

@@ -491,17 +491,21 @@ export function applyTheme(theme) {
 
     if (theme.sidebarText) {
         changeCss('.app__body .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y', 'background:' + theme.sidebarText);
-        changeCss('.app__body .ps-container:hover .ps-scrollbar-y-rail:hover', 'background:' + changeOpacity(theme.sidebarText, 0.15));
+        changeCss('.app__body .ps-container:hover .ps-scrollbar-y-rail:hover, .app__body .sidebar__switcher button:hover', 'background:' + changeOpacity(theme.sidebarText, 0.15));
         changeCss('.sidebar--left .nav-pills__container li > a, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li a', 'color:' + changeOpacity(theme.sidebarText, 0.6));
         changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.8));
-        changeCss('.sidebar--left .nav-pills__container li > h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6));
-        changeCss('.app__body .sidebar--left .sidebar__switcher button, .sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
+        changeCss('.app__body .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.8));
         changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
-        changeCss('.sidebar--left .status .offline--icon, .app__body .sidebar--menu svg', 'fill:' + theme.sidebarText);
+        changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus, .app__body .sidebar--left .nav-pills__container li > h4', 'color:' + theme.sidebarText);
+        changeCss('.sidebar--left .status .offline--icon, .app__body .sidebar--menu svg, .app__body .sidebar-item .icon', 'fill:' + theme.sidebarText);
         changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3));
         changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu .divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
         changeCss('.app__body .sidebar--left .sidebar__switcher', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
         changeCss('@media(max-width: 768px){.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + changeOpacity(theme.sidebarText, 0.6));
+        changeCss('@media(max-width: 768px){.app__body .search__icon svg', 'stroke:' + theme.sidebarText);
+        changeCss('.app__body .sidebar--left .sidebar__switcher button', 'color:' + theme.sidebarText);
+        changeCss('.app__body .sidebar--left .sidebar__switcher button svg', 'fill:' + theme.sidebarText);
+        changeCss('.app__body .sidebar__switcher button', 'background:' + changeOpacity(theme.sidebarText, 0.08));
     }
 
     if (theme.sidebarUnreadText) {
@@ -509,7 +513,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.sidebarTextHoverBg) {
-        changeCss('.sidebar--left .nav-pills__container li > a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a, .app__body .sidebar__switcher button:hover', 'background:' + theme.sidebarTextHoverBg);
+        changeCss('.sidebar--left .nav-pills__container li > a:hover, .app__body .modal .settings-modal .nav-pills>li:hover a', 'background:' + theme.sidebarTextHoverBg);
     }
 
     if (theme.sidebarTextActiveBorder) {
@@ -544,28 +548,30 @@ export function applyTheme(theme) {
         changeCss('.app__body #navbar .navbar-default .navbar-toggle .icon-bar', 'background:' + theme.sidebarHeaderTextColor);
         changeCss('.app__body .post-list__timestamp > div', 'border-color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.5));
         changeCss('@media(max-width: 768px){.app__body .search-bar__container', 'color:' + theme.sidebarHeaderTextColor);
+        changeCss('@media(max-width: 768px){.app__body .search-bar__container .search__form', 'background:' + changeOpacity(theme.sidebarHeaderTextColor, 0.2));
+        changeCss('.app__body .navbar-right__icon', 'background:' + changeOpacity(theme.sidebarHeaderTextColor, 0.2));
+        changeCss('.app__body .navbar-right__icon svg', 'fill:' + theme.sidebarHeaderTextColor);
+        changeCss('.app__body .navbar-right__icon svg', 'stroke:' + theme.sidebarHeaderTextColor);
     }
 
     if (theme.onlineIndicator) {
+        changeCss('.app__body .status.status--online', 'color:' + theme.onlineIndicator);
         changeCss('.app__body .status .online--icon', 'fill:' + theme.onlineIndicator);
-        changeCss('.app__body .channel-header__info .status .online--icon', 'fill:' + theme.onlineIndicator);
-        changeCss('.app__body .navbar .status .online--icon', 'fill:' + theme.onlineIndicator);
     }
 
     if (theme.awayIndicator) {
+        changeCss('.app__body .status.status--away', 'color:' + theme.awayIndicator);
         changeCss('.app__body .status .away--icon', 'fill:' + theme.awayIndicator);
-        changeCss('.app__body .channel-header__info .status .away--icon', 'fill:' + theme.awayIndicator);
-        changeCss('.app__body .navbar .status .away--icon', 'fill:' + theme.awayIndicator);
     }
 
     if (theme.mentionBj) {
-        changeCss('.sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'background:' + theme.mentionBj);
+        changeCss('.sidebar--left .nav-pills__unread-indicator', 'background:' + theme.mentionBj);
         changeCss('.app__body .sidebar--left .badge', 'background:' + theme.mentionBj);
         changeCss('.multi-teams .team-sidebar .badge', 'background:' + theme.mentionBj);
     }
 
     if (theme.mentionColor) {
-        changeCss('.app__body .sidebar--left .nav-pills__unread-indicator, .app__body .new-messages__button div', 'color:' + theme.mentionColor);
+        changeCss('.app__body .sidebar--left .nav-pills__unread-indicator', 'color:' + theme.mentionColor);
         changeCss('.app__body .sidebar--left .badge', 'color:' + theme.mentionColor);
         changeCss('.app__body .multi-teams .team-sidebar .badge', 'color:' + theme.mentionColor);
     }
@@ -583,7 +589,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .popover.right>.arrow:after, .app__body .tip-overlay.tip-overlay--sidebar .arrow, .app__body .tip-overlay.tip-overlay--header .arrow', 'border-right-color:' + theme.centerChannelBg);
         changeCss('.app__body .popover.left>.arrow:after', 'border-left-color:' + theme.centerChannelBg);
         changeCss('.app__body .popover.top>.arrow:after, .app__body .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg);
-        changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'background:' + theme.centerChannelBg);
+        changeCss('@media(min-width: 768px){.app__body .form-control', 'background:' + theme.centerChannelBg);
         changeCss('@media(min-width: 768px){.app__body .sidebar--right.sidebar--right--expanded .sidebar-right-container', 'background:' + theme.centerChannelBg);
         changeCss('.app__body .attachment__content', 'background:' + theme.centerChannelBg);
         changeCss('body.app__body', 'scrollbar-face-color:' + theme.centerChannelBg);
@@ -595,10 +601,13 @@ export function applyTheme(theme) {
 
     if (theme.centerChannelColor) {
         changeCss('.app__body .mentions__name .status.status--group, .app__body .multi-select__note', 'background:' + changeOpacity(theme.centerChannelColor, 0.12));
+        changeCss('.app__body .channel-header .channel-header__icon, .app__body .search-bar__container .search__form', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.12));
         changeCss('.app__body .post-list__arrows, .app__body .post .flag-icon__container', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3));
-        changeCss('.app__body .modal .status .offline--icon, .app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon', 'fill:' + theme.centerChannelColor);
+        changeCss('@media(min-width: 768px){.app__body .search__icon svg', 'stroke:' + changeOpacity(theme.centerChannelColor, 0.4));
+        changeCss('.app__body .channel-header__icon svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.4));
+        changeCss('.app__body .modal .status .offline--icon, .app__body .channel-header__links .icon, .app__body .sidebar--right .sidebar--right__subheader .usage__icon, .app__body .more-modal__header svg, .app__body .icon--body', 'fill:' + theme.centerChannelColor);
         changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
-        changeCss('.app__body .nav-tabs > li > a:hover, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:focus, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:hover, .app__body .post .dropdown-menu a, .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .sidebar--right .sidebar--right__header, .app__body .channel-header, .app__body .nav-tabs > li > a:hover, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:focus, .app__body .nav-tabs, .app__body .nav-tabs > li.active > a:hover, .app__body .post .dropdown-menu a, .sidebar--left, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .post.post--system .post__body, .app__body .modal .channel-switch-modal .modal-header .close', 'color:' + changeOpacity(theme.centerChannelColor, 0.6));
         changeCss('.app__body .nav-tabs, .app__body .nav-tabs > li.active > a, pp__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay, .app__body .form-control[disabled], .app__body .form-control[readonly], .app__body fieldset[disabled] .form-control', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65));
@@ -614,7 +623,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .channel-header .heading', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07));
         changeCss('.app__body .channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
-        changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.6));
+        changeCss('.app__body .channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
         changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.6));
         changeCss('.app__body .custom-textarea, .app__body .custom-textarea:focus, .app__body .file-preview, .app__body .post-image__details, .app__body .sidebar--right .sidebar-right__body, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .settings-modal .settings-table .settings-content .divider-light, .app__body .webhooks__container, .app__body .dropdown-menu, .app__body .modal .modal-header, .app__body .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25));
@@ -630,11 +639,11 @@ export function applyTheme(theme) {
         changeCss('.app__body .post-image__details', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .post-image__column a, .app__body .post-image__column a:hover, .app__body .post-image__column a:focus', 'color:' + theme.centerChannelColor);
         changeCss('@media(min-width: 768px){.app__body .search-bar__container .search__form .search-bar, .app__body .form-control', 'color:' + theme.centerChannelColor);
-        changeCss('.app__body .input-group-addon, .app__body .search-bar__container .search__form, .app__body .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .input-group-addon, .app__body .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('@media(min-width: 768px){.app__body .post-list__table .post-list__content .dropdown-menu a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.1));
         changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3));
         changeCss('.app__body .attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3));
-        changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
+        changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container, .app__body .member-list__popover .more-modal__header', 'background:' + changeOpacity(theme.centerChannelColor, 0.05));
         changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .search-item-container, .app__body .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1));
@@ -689,23 +698,26 @@ export function applyTheme(theme) {
 
     if (theme.linkColor) {
         changeCss('.app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor);
-        changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5));
+        changeCss('.app__body .attachment .attachment__container, .app__body .member-list__popover .more-modal__list .more-modal__row:hover', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5));
         changeCss('.app__body .channel-header__links .icon:hover, .app__body .channel-header__links > a.active .icon, .app__body .post .flag-icon__container.visible, .app__body .post .reacticon__container, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor);
+        changeCss('@media(min-width: 768px){.app__body .search__form.focused .search__icon svg', 'stroke:' + theme.linkColor);
         changeCss('.app__body .channel-header__links .icon:hover, .app__body .post .flag-icon__container.visible, .app__body .post .comment-icon__container, .app__body .post .post__reply', 'fill:' + theme.linkColor);
-        changeCss('.app__body .channel-header #member_popover:hover', 'color:' + changeOpacity(theme.linkColor, 0.6));
+        changeCss('.app__body .channel-header .channel-header__icon:hover #member_popover', 'color:' + theme.linkColor);
         changeCss('.app__body .channel-header .pinned-posts-button:hover svg', 'fill:' + changeOpacity(theme.linkColor, 0.6));
+        changeCss('.app__body .member-list__popover .more-modal__actions svg, .app__body .channel-header .channel-header__icon:hover svg, .app__body .channel-header .channel-header__icon.active svg', 'fill:' + theme.linkColor);
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'background:' + changeOpacity(theme.linkColor, 0.1));
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'border-color:' + changeOpacity(theme.linkColor, 0.4));
+        changeCss('.app__body .channel-header .channel-header__icon:hover, .app__body .channel-header .channel-header__icon.active, .app__body .search-bar__container .search__form.focused', 'border-color:' + theme.linkColor);
         changeCss('.app__body .post-reaction.post-reaction--current-user', 'color:' + theme.linkColor);
     }
 
     if (theme.buttonBg) {
-        changeCss('.app__body .btn.btn-primary, .app__body .tutorial__circles .circle.active, .app__body .post__pinned-badge', 'background:' + theme.buttonBg);
-        changeCss('.app__body .btn.btn-primary:hover, .app__body .btn.btn-primary:active, .app__body .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25));
+        changeCss('.app__body .new-messages__button div, .app__body .btn.btn-primary, .app__body .tutorial__circles .circle.active, .app__body .post__pinned-badge', 'background:' + theme.buttonBg);
+        changeCss('.app__body .btn.btn-primary:hover, .app__body .btn.btn-primary:active, .app__body .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.15));
     }
 
     if (theme.buttonColor) {
-        changeCss('.app__body .btn.btn-primary, .app__body .post__pinned-badge', 'color:' + theme.buttonColor);
+        changeCss('.app__body .new-messages__button div, .app__body .btn.btn-primary, .app__body .post__pinned-badge', 'color:' + theme.buttonColor);
     }
 
     if (theme.errorTextColor) {