PLT-3418, PLT-2950, PLT-3375, PLT-3382, PLT-3446, PLT-3465: Multiple UI Improvements (#3449)

Improving help text margins Updating changes for get link and create post files Fixing icon for select team screen Fixing styles for select team button Adding improvements to posts UI Adding improvement to post layout Updating changes for post controls Updating z-index for sidebar--right Updating help text position Fixing code for posts Fixing css for post view Pushing improvements for posts view Updating changes for post view Updating post layout Fixing system time css Updating header for system posts Updating post css Removing opacity and changing color for system messages Simplifying root post and system post behaviour Removing images from compact view Updating help text for display Updating embed preview text for advanced option PLT-3490 - Fixing RHS issue on Edge
2016-07-06 00:46:36 +05:00
--- a/webapp/components/about_build_modal.jsx
+++ b/webapp/components/about_build_modal.jsx
@@ -135,7 +135,7 @@ export default class AboutBuildModal extends React.Component {
                                        id='about.version'
                                        defaultMessage='Version:'
                                    />
-                                    {'\u00a0' + config.Version + '\u00a0' + config.BuildNumber}
+                                    {'\u00a0' + config.Version + '\u00a0 (' + config.BuildNumber + ')'}
                                </div>
                                <div>
                                    <FormattedMessage
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -157,7 +157,7 @@ export default class AdminSidebar extends React.Component {
        return (
            <AdminSidebarCategory
                parentLink='/admin_console'
-                icon='fa-gear'
+                icon='fa-user'
                title={
                    <FormattedMessage
                        id='admin.sidebar.teams'
@@ -275,7 +275,7 @@ export default class AdminSidebar extends React.Component {
                    <ul className='nav nav-pills nav-stacked'>
                        <AdminSidebarCategory
                            parentLink='/admin_console'
-                            icon='fa-gear'
+                            icon='fa-bar-chart'
                            title={
                                <FormattedMessage
                                    id='admin.sidebar.reports'
@@ -608,7 +608,7 @@ export default class AdminSidebar extends React.Component {
                        {this.renderTeams()}
                        <AdminSidebarCategory
                            parentLink='/admin_console'
-                            icon='fa-gear'
+                            icon='fa-wrench'
                            title={
                                <FormattedMessage
                                    id='admin.sidebar.other'
--- a/webapp/components/admin_console/brand_image_setting.jsx
+++ b/webapp/components/admin_console/brand_image_setting.jsx
@@ -105,9 +105,14 @@ export default class BrandImageSetting extends React.Component {
    }

    render() {
-        let btnClass = 'btn';
+        let btnPrimaryClass = 'btn';
        if (this.state.brandImage) {
-            btnClass += ' btn-primary';
+            btnPrimaryClass += ' btn-primary';
+        }
+
+        let letbtnDefaultClass = 'btn';
+        if (!this.props.disabled) {
+            letbtnDefaultClass += ' btn-default';
        }

        let img = null;
@@ -152,7 +157,7 @@ export default class BrandImageSetting extends React.Component {
                <div className='col-sm-8'>
                    <div className='file__upload'>
                        <button
-                            className='btn btn-default'
+                            className={letbtnDefaultClass}
                            disabled={this.props.disabled}
                        >
                            <FormattedMessage
@@ -169,12 +174,12 @@ export default class BrandImageSetting extends React.Component {
                        />
                    </div>
                    <button
-                        className={btnClass}
+                        className={btnPrimaryClass}
                        disabled={this.props.disabled || !this.state.brandImage}
                        onClick={this.handleImageSubmit}
                        id='upload-button'
-                        data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')}
-                        data-complete-text={'<span class=\'glyphicon glyphicon-ok\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')}
+                        data-loading-text={'<span class=\'fa fa-refresh fa-rotate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')}
+                        data-complete-text={'<span class=\'fa fa-check\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')}
                    >
                        <FormattedMessage
                            id='admin.team.upload'
--- a/webapp/components/admin_console/email_connection_test.jsx
+++ b/webapp/components/admin_console/email_connection_test.jsx
@@ -85,7 +85,7 @@ export default class EmailConnectionTestButton extends React.Component {
        if (this.state.testing) {
            contents = (
                <span>
-                    <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
+                    <span className='fa fa-refresh icon--rotate'/>
                    {Utils.localizeMessage('admin.email.testing', 'Testing...')}
                </span>
            );
--- a/webapp/components/admin_console/license_settings.jsx
+++ b/webapp/components/admin_console/license_settings.jsx
@@ -131,7 +131,7 @@ class LicenseSettings extends React.Component {
                        className='btn btn-danger'
                        onClick={this.handleRemove}
                        id='remove-button'
-                        data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + this.props.intl.formatMessage(holders.removing)}
+                        data-loading-text={'<span class=\'fa fa-refresh icon--rotate\'></span> ' + this.props.intl.formatMessage(holders.removing)}
                    >
                        <FormattedMessage
                            id='admin.license.keyRemove'
@@ -195,7 +195,7 @@ class LicenseSettings extends React.Component {
                        disabled={!this.state.fileSelected}
                        onClick={this.handleSubmit}
                        id='upload-button'
-                        data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + this.props.intl.formatMessage(holders.uploading)}
+                        data-loading-text={'<span class=\'fa fa-refresh icon--rotate\'></span> ' + this.props.intl.formatMessage(holders.uploading)}
                    >
                        <FormattedMessage
                            id='admin.license.upload'
--- a/webapp/components/admin_console/recycle_db.jsx
+++ b/webapp/components/admin_console/recycle_db.jsx
@@ -75,7 +75,7 @@ export default class RecycleDbButton extends React.Component {
        if (this.state.loading) {
            contents = (
                <span>
-                    <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
+                    <span className='fa fa-refresh icon--rotate'/>
                    {Utils.localizeMessage('admin.recycle.loading', ' Recycling...')}
                </span>
            );
--- a/webapp/components/admin_console/reload_config.jsx
+++ b/webapp/components/admin_console/reload_config.jsx
@@ -78,7 +78,7 @@ export default class ReloadConfigButton extends React.Component {
        if (this.state.loading) {
            contents = (
                <span>
-                    <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
+                    <span className='fa fa-refresh icon--rotate'/>
                    {Utils.localizeMessage('admin.reload.loading', ' Loading...')}
                </span>
            );
--- a/webapp/components/admin_console/save_button.jsx
+++ b/webapp/components/admin_console/save_button.jsx
@@ -26,7 +26,7 @@ export default class SaveButton extends React.Component {
        if (saving) {
            contents = (
                <span>
-                    <span className='glyphicon glyphicon-refresh glyphicon-refresh-animate'/>
+                    <span className='icon fa fa-refresh icon--rotate'/>
                    <FormattedMessage
                        id='admin.saving'
                        defaultMessage='Saving Config...'
--- a/webapp/components/change_url_modal.jsx
+++ b/webapp/components/change_url_modal.jsx
@@ -2,6 +2,7 @@
 // See License.txt for license information.

 import ReactDOM from 'react-dom';
+import Constants from 'utils/constants.jsx';
 import {Modal, Tooltip, OverlayTrigger} from 'react-bootstrap';
 import * as Utils from 'utils/utils.jsx';

@@ -154,6 +155,7 @@ export default class ChangeUrlModal extends React.Component {
                            <div className='col-sm-10'>
                                <div className={urlClass}>
                                    <OverlayTrigger
+                                        delayShow={Constants.OVERLAY_TIME_DELAY}
                                        placement='top'
                                        overlay={urlTooltip}
                                    >
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -478,7 +478,7 @@ export default class ChannelHeader extends React.Component {
                                            aria-expanded='true'
                                        >
                                            <strong className='heading'><StatusIcon status={this.getTeammateStatus()}/>{channelTitle} </strong>
-                                            <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'/>
+                                            <span className='fa fa-chevron-down header-dropdown__icon'/>
                                        </a>
                                        <ul
                                            className='dropdown-menu'
--- a/webapp/components/channel_invite_button.jsx
+++ b/webapp/components/channel_invite_button.jsx
@@ -65,7 +65,7 @@ export default class ChannelInviteButton extends React.Component {
                onClick={this.handleClick}
                spinning={this.state.addingUser}
            >
-                <i className='glyphicon glyphicon-envelope'/>
+                <i className='fa fa-envelope fa-margin--right'/>
                <FormattedMessage
                    id='channel_invite.add'
                    defaultMessage=' Add'
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -85,7 +85,7 @@ class CreatePost extends React.Component {
            submitting: false,
            initialText: draft.messageText,
            ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
-            centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
+            fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
            showTutorialTip: false,
            showPostDeletedModal: false,
            typing: false
@@ -325,7 +325,7 @@ class CreatePost extends React.Component {
        // wait to load these since they may have changed since the component was constructed (particularly in the case of skipping the tutorial)
        this.setState({
            ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
-            centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
+            fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
            showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER
        });
    }
@@ -381,7 +381,7 @@ class CreatePost extends React.Component {
        this.setState({
            showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER,
            ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'),
-            centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED
+            fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN
        });
    }

@@ -503,7 +503,7 @@ class CreatePost extends React.Component {
        }

        let centerClass = '';
-        if (this.state.centerTextbox) {
+        if (!this.state.fullWidthTextBox) {
            centerClass = 'center';
        }

--- a/webapp/components/create_team/components/display_name.jsx
+++ b/webapp/components/create_team/components/display_name.jsx
@@ -100,7 +100,7 @@ export default class TeamSignupDisplayNamePage extends React.Component {
                        <FormattedMessage
                            id='create_team.display_name.next'
                            defaultMessage='Next'
-                        /><i className='glyphicon glyphicon-chevron-right'></i>
+                        /><i className='fa fa-chevron-right'></i>
                    </button>
                    <div className='margin--extra'>
                        <Link to='/select_team'>
--- a/webapp/components/file_attachment.jsx
+++ b/webapp/components/file_attachment.jsx
@@ -206,7 +206,11 @@ class FileAttachment extends React.Component {
                        className='post-image__name'
                        rel='noopener noreferrer'
                    >
-                        <i className='glyphicon glyphicon-paperclip'/>{trimmedFilename}
+                        <span
+                            className='icon'
+                            dangerouslySetInnerHTML={{__html: Constants.ATTACHMENT_ICON_SVG}}
+                        />
+                        {trimmedFilename}
                    </a>
                </OverlayTrigger>
            );
--- a/webapp/components/file_preview.jsx
+++ b/webapp/components/file_preview.jsx
@@ -57,7 +57,7 @@ export default class FilePreview extends React.Component {
                            className='file-preview__remove'
                            onClick={this.handleRemove}
                        >
-                            <i className='glyphicon glyphicon-remove'/>
+                            <i className='fa fa-remove'/>
                        </a>
                    </div>
                );
@@ -73,7 +73,7 @@ export default class FilePreview extends React.Component {
                            className='file-preview__remove'
                            onClick={this.handleRemove}
                        >
-                            <i className='glyphicon glyphicon-remove'/>
+                            <i className='fa fa-remove'/>
                        </a>
                    </div>
                );
@@ -96,7 +96,7 @@ export default class FilePreview extends React.Component {
                        className='file-preview__remove'
                        onClick={this.handleRemove}
                    >
-                        <i className='glyphicon glyphicon-remove'/>
+                        <i className='fa fa-remove'/>
                    </a>
                </div>
            );
--- a/webapp/components/file_upload.jsx
+++ b/webapp/components/file_upload.jsx
@@ -318,9 +318,10 @@ class FileUpload extends React.Component {
                ref='input'
                className='btn btn-file'
            >
-                <span>
-                    <i className='glyphicon glyphicon-paperclip'/>
-                </span>
+                <span
+                    className='icon'
+                    dangerouslySetInnerHTML={{__html: Constants.ATTACHMENT_ICON_SVG}}
+                />
                <input
                    ref='fileInput'
                    type='file'
--- a/webapp/components/get_link_modal.jsx
+++ b/webapp/components/get_link_modal.jsx
@@ -16,18 +16,30 @@ export default class GetLinkModal extends React.Component {
        this.onHide = this.onHide.bind(this);

        this.copyLink = this.copyLink.bind(this);
+        this.selectLinkOnClick = this.selectLinkOnClick.bind(this);

        this.state = {
            copiedLink: false
        };
    }

+    componntWillUnmount() {
+        $(this.refs.textarea).off('click');
+    }
+
    onHide() {
        this.setState({copiedLink: false});

        this.props.onHide();
    }

+    selectLinkOnClick() {
+        $(this.refs.textarea).on('click', function selectLinkOnClick() {
+            $(this).select();
+            this.setSelectionRange(0, this.value.length);
+        });
+    }
+
    copyLink() {
        var copyTextarea = $(ReactDOM.findDOMNode(this.refs.textarea));
        copyTextarea.select();
@@ -76,7 +88,6 @@ export default class GetLinkModal extends React.Component {
        const linkText = (
            <textarea
                className='form-control no-resize min-height'
-                readOnly='true'
                ref='textarea'
                value={this.props.link}
            />
@@ -99,6 +110,7 @@ export default class GetLinkModal extends React.Component {
            <Modal
                show={this.props.show}
                onHide={this.onHide}
+                onEntered={this.selectLinkOnClick}
            >
                <Modal.Header closeButton={true}>
                    <h4 className='modal-title'>{this.props.title}</h4>
--- a/webapp/components/navbar.jsx
+++ b/webapp/components/navbar.jsx
@@ -387,7 +387,7 @@ export default class Navbar extends React.Component {
                            aria-expanded='true'
                        >
                            <span className='heading'><StatusIcon status={this.getTeammateStatus()}/>{channelTitle} </span>
-                            <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span>
+                            <span className='fa fa-chevron-down header-dropdown__icon'></span>
                        </a>
                        <ul
                            className='dropdown-menu'
@@ -628,7 +628,7 @@ export default class Navbar extends React.Component {
                className='navbar-toggle pull-right'
                onClick={this.showSearch}
            >
-                <span className='glyphicon glyphicon-search icon--white'/>
+                <span className='fa fa-search icon-search icon--white'/>
            </button>
        );

--- a/webapp/components/needs_team.jsx
+++ b/webapp/components/needs_team.jsx
@@ -122,7 +122,7 @@ export default class NeedsTeam extends React.Component {
                <ErrorBar/>
                <div className='container-fluid'>
                    <SidebarRight/>
-                    <SidebarRightMenu/>
+                    <SidebarRightMenu teamType={this.state.team.type}/>
                    {content}

                    <GetPostLinkModal/>
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -104,6 +104,11 @@ export default class Post extends React.Component {
            type = 'Comment';
        }

+        let hideControls = '';
+        if (post.state === Constants.POST_DELETED || post.state === Constants.POST_FAILED) {
+            hideControls = 'post--hide-controls';
+        }
+
        const commentCount = this.props.commentCount;

        let rootUser;
@@ -113,13 +118,6 @@ export default class Post extends React.Component {
            rootUser = 'other--root';
        }

-        let postType = '';
-        if (type !== 'Post') {
-            postType = 'post--comment';
-        } else if (commentCount > 0) {
-            postType = 'post--root';
-        }
-
        let currentUserCss = '';
        if (this.props.currentUser.id === post.user_id && !post.props.from_webhook && !PostUtils.isSystemMessage(post)) {
            currentUserCss = 'current--user';
@@ -142,9 +140,22 @@ export default class Post extends React.Component {
            shouldHighlightClass = 'post--highlight';
        }

+        let postType = '';
+        if (type !== 'Post') {
+            postType = 'post--comment';
+        } else if (commentCount > 0) {
+            postType = 'post--root';
+            sameUserClass = '';
+            rootUser = '';
+        }
+
        let systemMessageClass = '';
        if (PostUtils.isSystemMessage(post)) {
            systemMessageClass = 'post--system';
+            sameUserClass = '';
+            currentUserCss = '';
+            postType = '';
+            rootUser = '';
        }

        let profilePic = (
@@ -170,18 +181,20 @@ export default class Post extends React.Component {
        }

        let compactClass = '';
+        let profilePicContainer = (<div className='post__img'>{profilePic}</div>);
        if (this.props.compactDisplay) {
            compactClass = 'post--compact';
+            profilePicContainer = '';
        }

        return (
            <div>
                <div
                    id={'post_' + post.id}
-                    className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass}
+                    className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass + ' ' + hideControls}
                >
                    <div className={'post__content ' + centerClass}>
-                        <div className='post__img'>{profilePic}</div>
+                        {profilePicContainer}
                        <div>
                            <PostHeader
                                ref='header'
--- a/webapp/components/post_view/components/post_body.jsx
+++ b/webapp/components/post_view/components/post_body.jsx
@@ -4,6 +4,7 @@
 import FileAttachmentList from 'components/file_attachment_list.jsx';
 import UserStore from 'stores/user_store.jsx';
 import * as Utils from 'utils/utils.jsx';
+import * as GlobalActions from 'actions/global_actions.jsx';
 import Constants from 'utils/constants.jsx';
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
@@ -16,6 +17,11 @@ import loadingGif from 'images/load.gif';
 import React from 'react';

 export default class PostBody extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.removePost = this.removePost.bind(this);
+    }
    shouldComponentUpdate(nextProps) {
        if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
            return true;
@@ -44,6 +50,10 @@ export default class PostBody extends React.Component {
        return false;
    }

+    removePost() {
+        GlobalActions.emitRemovePost(this.props.post);
+    }
+
    render() {
        const post = this.props.post;
        const filenames = this.props.post.filenames;
@@ -144,12 +154,27 @@ export default class PostBody extends React.Component {
        }

        let message;
+        let removeButton;
        if (this.props.post.state === Constants.POST_DELETED) {
+            removeButton = (
+                <a
+                    href='#'
+                    className='post__remove theme'
+                    type='button'
+                    onClick={this.removePost}
+                >
+                    {'×'}
+                </a>
+            );
+
            message = (
-                <FormattedMessage
-                    id='post_body.deleted'
-                    defaultMessage='(message deleted)'
-                />
+                <p>
+                    <FormattedMessage
+                        id='post_body.deleted'
+                        defaultMessage='(message deleted)'
+                    />
+                    {removeButton}
+                </p>
            );
        } else {
            message = (
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -20,7 +20,6 @@ export default class PostInfo extends React.Component {

        this.dropdownPosition = this.dropdownPosition.bind(this);
        this.handlePermalink = this.handlePermalink.bind(this);
-        this.removePost = this.removePost.bind(this);
    }
    dropdownPosition(e) {
        var position = $('#post-list').height() - $(e.target).offset().top;
@@ -165,25 +164,6 @@ export default class PostInfo extends React.Component {
        GlobalActions.showGetPostLinkModal(this.props.post);
    }

-    removePost() {
-        GlobalActions.emitRemovePost(this.props.post);
-    }
-    createRemovePostButton(post) {
-        if (!Utils.isPostEphemeral(post)) {
-            return null;
-        }
-
-        return (
-            <a
-                href='#'
-                className='post__remove theme'
-                type='button'
-                onClick={this.removePost}
-            >
-                {'×'}
-            </a>
-        );
-    }
    render() {
        var post = this.props.post;
        var comments = '';
@@ -232,7 +212,6 @@ export default class PostInfo extends React.Component {
                        {dropdown}
                    </div>
                    {comments}
-                    {this.createRemovePostButton(post)}
                </li>
            </ul>
        );
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -194,9 +194,19 @@ export default class RhsComment extends React.Component {
            );
        }

+        let profilePic = (
+            <img
+                src={Client.getUsersRoute() + '/' + post.user_id + '/image?time=' + timestamp}
+                height='36'
+                width='36'
+            />
+        );
+
        let compactClass = '';
+        let profilePicContainer = (<div className='post__img'>{profilePic}</div>);
        if (this.props.compactDisplay) {
            compactClass = 'post--compact';
+            profilePicContainer = '';
        }

        var dropdown = this.createDropdown();
@@ -216,13 +226,7 @@ export default class RhsComment extends React.Component {
        return (
            <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}>
                <div className='post__content'>
-                    <div className='post__img'>
-                        <img
-                            src={Client.getUsersRoute() + '/' + post.user_id + '/image?time=' + timestamp}
-                            height='36'
-                            width='36'
-                        />
-                    </div>
+                    {profilePicContainer}
                    <div>
                        <ul className='post__header'>
                            <li className='col col__name'>
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -230,8 +230,10 @@ export default class RhsRootPost extends React.Component {
        }

        let compactClass = '';
+        let profilePicContainer = (<div className='post__img'>{profilePic}</div>);
        if (this.props.compactDisplay) {
            compactClass = 'post--compact';
+            profilePicContainer = '';
        }

        const messageWrapper = (
@@ -246,9 +248,7 @@ export default class RhsRootPost extends React.Component {
            <div className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}>
                <div className='post-right-channel__name'>{channelName}</div>
                <div className='post__content'>
-                    <div className='post__img'>
-                        {profilePic}
-                    </div>
+                    {profilePicContainer}
                    <div>
                        <ul className='post__header'>
                            <li className='col__name'>{userProfile}</li>
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -142,7 +142,7 @@ class SearchBar extends React.Component {
    render() {
        var isSearching = null;
        if (this.state.isSearching) {
-            isSearching = <span className={'glyphicon glyphicon-refresh glyphicon-refresh-animate'}></span>;
+            isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}></span>;
        }

        let helpClass = 'search-help-popover';
@@ -174,7 +174,7 @@ class SearchBar extends React.Component {
                    style={{overflow: 'visible'}}
                    autoComplete='off'
                >
-                    <span className='glyphicon glyphicon-search sidebar__search-icon'/>
+                    <span className='fa fa-search sidebar__search-icon'/>
                    <SuggestionBox
                        ref='search'
                        className='form-control search-bar'
--- a/webapp/components/select_team/select_team.jsx
+++ b/webapp/components/select_team/select_team.jsx
@@ -69,7 +69,7 @@ export default class SelectTeam extends React.Component {
                        >
                            <span className='signup-team-dir__name'>{team.display_name}</span>
                            <span
-                                className='glyphicon glyphicon-menu-right right signup-team-dir__arrow'
+                                className='fa fa-angle-right right signup-team-dir__arrow'
                                aria-hidden='true'
                            />
                        </Link>
@@ -93,7 +93,7 @@ export default class SelectTeam extends React.Component {
                        >
                            <span className='signup-team-dir__name'>{openTeam.display_name}</span>
                            <span
-                                className='glyphicon glyphicon-menu-right right signup-team-dir__arrow'
+                                className='fa fa-angle-right right signup-team-dir__arrow'
                                aria-hidden='true'
                            />
                        </Link>
--- a/webapp/components/sidebar_right_menu.jsx
+++ b/webapp/components/sidebar_right_menu.jsx
@@ -175,7 +175,7 @@ export default class SidebarRightMenu extends React.Component {
                            href='#'
                            onClick={GlobalActions.showGetTeamInviteLinkModal}
                        >
-                            <i className='icon glyphicon glyphicon-link'></i>
+                            <i className='icon fa fa-link'></i>
                            <FormattedMessage
                                id='sidebar_right_menu.teamLink'
                                defaultMessage='Get Team Invite Link'
--- a/webapp/components/team_settings_modal.jsx
+++ b/webapp/components/team_settings_modal.jsx
@@ -68,11 +68,11 @@ class TeamSettingsModal extends React.Component {
    render() {
        const {formatMessage} = this.props.intl;
        const tabs = [];
-        tabs.push({name: 'general', uiName: formatMessage(holders.generalTab), icon: 'glyphicon glyphicon-cog'});
-        tabs.push({name: 'import', uiName: formatMessage(holders.importTab), icon: 'glyphicon glyphicon-upload'});
+        tabs.push({name: 'general', uiName: formatMessage(holders.generalTab), icon: 'icon fa fa-cog'});
+        tabs.push({name: 'import', uiName: formatMessage(holders.importTab), icon: 'icon fa fa-upload'});

        // To enable export uncomment this line
-        //tabs.push({name: 'export', uiName: formatMessage(holders.exportTab), icon: 'glyphicon glyphicon-download'});
+        //tabs.push({name: 'export', uiName: formatMessage(holders.exportTab), icon: 'fa fa-download'});

        return (
            <div
--- a/webapp/components/textbox.jsx
+++ b/webapp/components/textbox.jsx
@@ -130,7 +130,7 @@ export default class Textbox extends React.Component {

        const helpText = (
            <div
-                style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '0.3' : '0'}}
+                style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '0.45' : '0'}}
                className='help__format-text'
            >
                <b>
@@ -155,18 +155,18 @@ export default class Textbox extends React.Component {
                    </strike>
                    {'~~ '}
                </span>
-                <code>
+                <span>
                    <FormattedMessage
                        id='textbox.inlinecode'
                        defaultMessage='`inline code`'
                    />
-                </code>
-                <code>
+                </span>
+                <span>
                    <FormattedMessage
                        id='textbox.preformatted'
                        defaultMessage='```preformatted```'
                    />
-                </code>
+                </span>
                <span>
                    <FormattedMessage
                        id='textbox.quote'
--- a/webapp/components/user_settings/user_settings_advanced.jsx
+++ b/webapp/components/user_settings/user_settings_advanced.jsx
@@ -243,7 +243,7 @@ export default class AdvancedSettingsDisplay extends React.Component {
            return (
                <FormattedMessage
                    id='user.settings.advance.embed_preview'
-                    defaultMessage='Show preview snippet of links below message'
+                    defaultMessage='Show experimental previews of link content, when available'
                />
            );
        default:
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -189,7 +189,7 @@ export default class UserSettingsDisplay extends React.Component {
                        <br/>
                        <FormattedMessage
                            id='user.settings.display.collapseDesc'
-                            defaultMessage='Toggle whether to automatically collapse all image previews.'
+                            defaultMessage='Expand links to show a preview of content, when available.'
                        />
                    </div>
                </div>
@@ -200,7 +200,7 @@ export default class UserSettingsDisplay extends React.Component {
                    title={
                        <FormattedMessage
                            id='user.settings.display.collapseDisplay'
-                            defaultMessage='Auto Collapse Previews'
+                            defaultMessage='Link previews'
                        />
                    }
                    inputs={inputs}
@@ -518,6 +518,13 @@ export default class UserSettingsDisplay extends React.Component {
                                id='user.settings.display.messageDisplayClean'
                                defaultMessage='Standard'
                            />
+                            {': '}
+                            <span className='font-weight--normal'>
+                                <FormattedMessage
+                                    id='user.settings.display.messageDisplayCleanDes'
+                                    defaultMessage='Easy to scan and read.'
+                                />
+                            </span>
                        </label>
                        <br/>
                    </div>
@@ -533,6 +540,13 @@ export default class UserSettingsDisplay extends React.Component {
                                id='user.settings.display.messageDisplayCompact'
                                defaultMessage='Compact'
                            />
+                            {': '}
+                            <span className='font-weight--normal'>
+                                <FormattedMessage
+                                    id='user.settings.display.messageDisplayCompactDes'
+                                    defaultMessage='Fit as many messages on the screen as we can.'
+                                />
+                            </span>
                        </label>
                        <br/>
                    </div>
@@ -599,7 +613,7 @@ export default class UserSettingsDisplay extends React.Component {

        if (this.props.activeSection === Preferences.CHANNEL_DISPLAY_MODE) {
            const channelDisplayMode = [false, false];
-            if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) {
+            if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) {
                channelDisplayMode[0] = true;
            } else {
                channelDisplayMode[1] = true;
@@ -613,11 +627,11 @@ export default class UserSettingsDisplay extends React.Component {
                                type='radio'
                                name='channelDisplayMode'
                                checked={channelDisplayMode[0]}
-                                onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)}
+                                onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)}
                            />
                            <FormattedMessage
-                                id='user.settings.display.fixedWidthCentered'
-                                defaultMessage='Fixed width, centered'
+                                id='user.settings.display.fullScreen'
+                                defaultMessage='Full width'
                            />
                        </label>
                        <br/>
@@ -628,11 +642,11 @@ export default class UserSettingsDisplay extends React.Component {
                                type='radio'
                                name='channelDisplayMode'
                                checked={channelDisplayMode[1]}
-                                onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN)}
+                                onChange={this.handleChannelDisplayModeRadio.bind(this, Preferences.CHANNEL_DISPLAY_MODE_CENTERED)}
                            />
                            <FormattedMessage
-                                id='user.settings.display.fullScreen'
-                                defaultMessage='Full width'
+                                id='user.settings.display.fixedWidthCentered'
+                                defaultMessage='Fixed width, centered'
                            />
                        </label>
                        <br/>
@@ -666,18 +680,18 @@ export default class UserSettingsDisplay extends React.Component {
            );
        } else {
            let describe;
-            if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_CENTERED) {
+            if (this.state.channelDisplayMode === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN) {
                describe = (
                    <FormattedMessage
-                        id='user.settings.display.fixedWidthCentered'
-                        defaultMessage='Fixed width, centered'
+                        id='user.settings.display.fullScreen'
+                        defaultMessage='Full width'
                    />
                );
            } else {
                describe = (
                    <FormattedMessage
-                        id='user.settings.display.fullScreen'
-                        defaultMessage='Full width'
+                        id='user.settings.display.fixedWidthCentered'
+                        defaultMessage='Fixed width, centered'
                    />
                );
            }
--- a/webapp/components/user_settings/user_settings_modal.jsx
+++ b/webapp/components/user_settings/user_settings_modal.jsx
@@ -211,15 +211,15 @@ class UserSettingsModal extends React.Component {
        }
        var tabs = [];

-        tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'glyphicon glyphicon-cog'});
-        tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'glyphicon glyphicon-lock'});
-        tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'glyphicon glyphicon-exclamation-sign'});
+        tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'icon fa fa-gear'});
+        tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'icon fa fa-lock'});
+        tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'icon fa fa-exclamation-circle'});
        if (global.window.mm_config.EnableOAuthServiceProvider === 'true') {
-            tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'});
+            tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'icon fa fa-th'});
        }

-        tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'glyphicon glyphicon-eye-open'});
-        tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'glyphicon glyphicon-list-alt'});
+        tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'icon fa fa-eye'});
+        tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'icon fa fa-list-alt'});

        return (
            <Modal
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1366,7 +1366,7 @@
  "tutorial_tip.out": "Opt out of these tips.",
  "tutorial_tip.seen": "Seen this before? ",
  "upload_overlay.info": "Drop a file to upload it.",
-  "user.settings.advance.embed_preview": "Show preview snippet of links below message",
+  "user.settings.advance.embed_preview": "Show experimental previews of link content, when available",
  "user.settings.advance.embed_toggle": "Show toggle for all embed previews",
  "user.settings.advance.enabledFeatures": "{count, number} {count, plural, one {Feature} other {Features}} Enabled",
  "user.settings.advance.formattingDesc": "If enabled, posts will be formatted to create links, show emoji, style the text, and add line breaks. By default, this setting is enabled. Changing this setting requires the page to be refreshed.",
@@ -1412,8 +1412,8 @@
  "user.settings.display.channelDisplayTitle": "Channel Display Mode",
  "user.settings.display.channeldisplaymode": "Select the width of the center channel.",
  "user.settings.display.clockDisplay": "Clock Display",
-  "user.settings.display.collapseDesc": "Toggle whether to automatically collapse all image previews.",
-  "user.settings.display.collapseDisplay": "Auto Collapse Previews",
+  "user.settings.display.collapseDesc": "Expand links to show a preview of content, when available.",
+  "user.settings.display.collapseDisplay": "Link previews",
  "user.settings.display.collapseOff": "Off",
  "user.settings.display.collapseOn": "On",
  "user.settings.display.fixedWidthCentered": "Fixed width, centered",
@@ -1422,7 +1422,9 @@
  "user.settings.display.fullScreen": "Full width",
  "user.settings.display.language": "Language",
  "user.settings.display.messageDisplayClean": "Standard",
+  "user.settings.display.messageDisplayCleanDes": "Easy to scan and read.",
  "user.settings.display.messageDisplayCompact": "Compact",
+  "user.settings.display.messageDisplayCompactDes": "Fit as many messages on the screen as we can.",
  "user.settings.display.messageDisplayDescription": "Select how messages in a channel should be displayed.",
  "user.settings.display.messageDisplayTitle": "Message Display",
  "user.settings.display.militaryClock": "24-hour clock (example: 16:00)",
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -25,3 +25,17 @@ body {
 .word-break--all {
    word-break: break-all;
 }
+
+.fa {
+    &.fa-margin--left {
+        margin-left: 2px;
+    }
+
+    &.fa-margin--right {
+        margin-right: 2px;
+    }
+}
+
+.font-weight--normal {
+    font-weight: normal;
+}
--- a/webapp/sass/components/_files.scss
+++ b/webapp/sass/components/_files.scss
@@ -71,6 +71,7 @@
    i {
        color: $white;
        cursor: pointer;
+        font-size: 16px;
        opacity: inherit;
        position: absolute;
        right: 5px;
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -140,7 +140,7 @@
            border: 1px solid $light-gray;
            color: $white;
            min-height: 56px;
-            padding: 15px 15px 11px;
+            padding: 14px 15px 11px;

            .modal-title {
                color: $bg--gray;
--- a/webapp/sass/components/_save-button.scss
+++ b/webapp/sass/components/_save-button.scss
@@ -1,7 +1,7 @@
@charset 'UTF-8';

 .save-button {
-    .glyphicon {
+    .icon {
        margin-right: 10px;
    }
-}
+}
--- a/webapp/sass/components/_scrollbar.scss
+++ b/webapp/sass/components/_scrollbar.scss
@@ -11,7 +11,7 @@

 ::-webkit-scrollbar-thumb {
    @include border-radius($border-rad * 2);
-    background: rgba(0, 0, 0, .4);
+    background: rgba(0, 0, 0, .2);
 }

 body {
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -11,7 +11,7 @@
    padding: 12px 8px 0 0;
 }

-.glyphicon-refresh-animate {
+.icon--rotate {
    @include animation(spin .7s infinite linear);
 }

@@ -88,7 +88,7 @@
        }
    }

-    .glyphicon-refresh-animate {
+    .icon--refresh {
        @include opacity(0.5);
        position: absolute;
        right: 27px;
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -97,8 +97,10 @@

 .header-dropdown__icon {
    color: inherit;
-    font-size: 11px;
-    top: 3px;
+    font-size: 12px;
+    margin-left: 1px;
+    position: relative;
+    top: 1px;
 }

 .channel-header__info {
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -46,8 +46,10 @@
                width: 21px;
            }

-            .glyphicon-search {
-                top: -1px;
+            .icon-search {
+                font-size: 17px;
+                position: relative;
+                top: -2px;
            }

            .icon--white {
@@ -80,7 +82,8 @@
            }

            .header-dropdown__icon {
-                top: 1px;
+                margin-left: 0;
+                top: -1px;
            }

            .dropdown-toggle {
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -1,152 +1,156 @@
@charset 'UTF-8';

-.post-right__container {
-    @include display-flex;
-    @include flex-direction(column);
-    height: 100%;
+.app__body {
+    .post-right__container {
+        @include display-flex;
+        @include flex-direction(column);
+        height: 100%;

-    .post-right-root-message {
-        padding: 1em 1em 0;
-    }
+        .post-right-root-message {
+            padding: 1em 1em 0;
+        }

-    .post-right-comments-container {
-        position: relative;
+        .post-right-comments-container {
+            position: relative;
+
+            .post {
+                &:first-child {
+                    padding-top: 15px;
+                }
+            }
+        }
+
+
+        .help_format_text {
+            bottom: -63px;
+            right: auto;
+        }

        .post {
-            &:first-child {
-                padding-top: 15px;
+            &.post--root {
+                border-bottom: 1px solid #ddd;
+                padding-bottom: 1em;
+
+                .post__body {
+                    background: transparent !important;
+                }
            }
-        }
-    }

-
-    .help_format_text {
-        bottom: -63px;
-        right: auto;
-    }
-
-    .post {
-        &.post--root {
-            border-bottom: 1px solid #ddd;
-            padding-bottom: 1em;
+            .post__header {
+                .col__reply {
+                    background: transparent !important;
+                    border: none !important;
+                    text-align: right;
+                    top: 0;
+                }
+            }

            .post__body {
-                background: transparent !important;
+                width: 100%;
            }
        }

-        .post__header {
-            .col__reply {
-                text-align: right;
-                top: 0;
-            }
+        hr {
+            border: none;
+            margin-bottom: 0;
        }

-        .post__body {
+        .post-create__container {
            width: 100%;
+
+            .textarea-wrapper {
+                min-height: 100px;
+            }
+
+            .btn {
+                margin-bottom: 10px;
+            }
+
+            .custom-textarea {
+                min-height: 100px;
+            }
+
+            .msg-typing {
+                @include opacity(.7);
+                display: block;
+                float: left;
+                font-size: 13px;
+                height: 20px;
+                line-height: 20px;
+                margin-top: 3px;
+                max-width: 230px;
+                min-width: 1px;
+            }
+
+            .post-create-footer {
+                padding: 5px 0 10px;
+                width: 100%;
+            }
+
+            .post-right-comments-upload-in-progress {
+                color: #a8adb7;
+                margin-right: 10px;
+                padding: 6px 0;
+            }
        }
    }

-    hr {
-        border: none;
-        margin-bottom: 0;
+    .post-right-header {
+        border-bottom: $border-gray;
+        color: #999;
+        font-size: 1em;
+        font-weight: 400;
+        height: 39px;
+        padding: 10px 10px 0 15px;
+        text-transform: uppercase;
    }

-    .post-create__container {
+    .post-right-root-container {
+        border-bottom: $border-gray;
+        padding: 5px 10px;
+
+        ul {
+            margin-bottom: 2px;
+            padding-left: 0;
+        }
+    }
+
+    .post-right-channel__name {
+        font-weight: 600;
+        margin: 0 0 15px;
+    }
+
+    .post-right-root-container li {
+        display: inline;
+        list-style-type: none;
+        padding-right: 3px;
+    }
+
+    .post-right-root-time {
+        color: #a8adb7;
+    }
+
+    .post-right-create-comment-container {
+        bottom: 0;
+        left: 0;
+        margin-bottom: 18px;
+        padding: 5px;
+        position: absolute;
        width: 100%;
+    }

-        .textarea-wrapper {
-            min-height: 100px;
-        }
+    .post-right__scroll {
+        @include flex(1 1 auto);
+        -webkit-overflow-scrolling: touch;
+        overflow: auto;
+        position: relative;

-        .btn {
-            margin-bottom: 10px;
-        }
-
-        .custom-textarea {
-            min-height: 100px;
-        }
-
-        .msg-typing {
-            @include opacity(.7);
-            display: block;
-            float: left;
-            font-size: 13px;
-            height: 20px;
-            line-height: 20px;
-            margin-top: 3px;
-            max-width: 230px;
-            min-width: 1px;
-        }
-
-        .post-create-footer {
-            padding: 5px 0 10px;
-            width: 100%;
-        }
-
-        .post-right-comments-upload-in-progress {
-            color: #a8adb7;
-            margin-right: 10px;
-            padding: 6px 0;
+        .file-preview__container {
+            margin-top: 5px;
        }
    }
-}

-.post-right-header {
-    border-bottom: $border-gray;
-    color: #999;
-    font-size: 1em;
-    font-weight: 400;
-    height: 39px;
-    padding: 10px 10px 0 15px;
-    text-transform: uppercase;
-}
-
-.post-right-root-container {
-    border-bottom: $border-gray;
-    padding: 5px 10px;
-
-    ul {
-        margin-bottom: 2px;
-        padding-left: 0;
+    .post-right-comment-time {
+        color: #a8adb7;
    }
 }
-
-.post-right-channel__name {
-    font-weight: 600;
-    margin: 0 0 15px;
-}
-
-.post-right-root-container li {
-    display: inline;
-    list-style-type: none;
-    padding-right: 3px;
-}
-
-.post-right-root-time {
-    color: #a8adb7;
-}
-
-.post-right-create-comment-container {
-    bottom: 0;
-    left: 0;
-    margin-bottom: 18px;
-    padding: 5px;
-    position: absolute;
-    width: 100%;
-}
-
-.post-right__scroll {
-    @include flex(1 1 auto);
-    -webkit-overflow-scrolling: touch;
-    overflow: auto;
-    position: relative;
-
-    .file-preview__container {
-        margin-top: 5px;
-    }
-}
-
-.post-right-comment-time {
-    color: #a8adb7;
-}
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -86,8 +86,19 @@ body.ios {

    b,
    i,
+    span {
+        margin: 0 2px;
+        position: relative;
+        top: -1px;
+    }
+
+    b {
+        @include opacity(.9);
+    }
+
    code {
-        margin-right: 3px;
+        background: transparent;
+        padding: 0;
    }

    .textbox-preview-link {
@@ -402,6 +413,11 @@ body.ios {
            right: 0;
            top: 1px;

+            svg {
+                height: 18px;
+                width: 18px;
+            }
+
            &:hover,
            &:active {
                @include opacity(.9);
@@ -452,7 +468,7 @@ body.ios {

        .dropdown-menu {
            &.bottom {
-                bottom: 25px;
+                bottom: 19px;
                top: auto;
            }
        }
@@ -483,6 +499,14 @@ body.ios {
        background-color: beige;
    }

+    &.post--hide-controls {
+        .post__header {
+            .col__reply {
+                display: none;
+            }
+        }
+    }
+
    &.post--compact {
        &.post--thread {
            .post__header {
@@ -557,6 +581,16 @@ body.ios {
                padding: 0;
                width: 100%;

+                svg {
+                    display: inline-block;
+                    height: 13px;
+                    margin: 5px 4px 0 0;
+                    opacity: .5;
+                    position: relative;
+                    vertical-align: top;
+                    width: 13px;
+                }
+
                > div {
                    display: none;
                }
@@ -596,6 +630,10 @@ body.ios {
        }
    }

+    .post--fail {
+        position: relative;
+    }
+
    p {
        font-size: .97em;
        line-height: 1.6em;
@@ -634,33 +672,6 @@ body.ios {
        &.same--user {
            padding: 0 .5em 0 1em;

-            &.post--system {
-                padding: 8px .5em 0 1em;
-
-                .post__header {
-                    height: auto;
-                    margin-bottom: 2px;
-
-                    .col__name {
-                        display: inline-block;
-                    }
-
-                    .col__reply {
-
-                    }
-                }
-
-                .post__time {
-                    @include opacity(.6);
-                    font-size: .9em;
-                    left: inherit;
-                    line-height: inherit;
-                    position: inherit;
-                    text-rendering: inherit;
-                    top: inherit;
-                }
-            }
-
            &:hover {
                .post__time {
                    @include opacity(.5);
@@ -682,7 +693,7 @@ body.ios {
                }

                .col__reply {
-                    top: 6px;
+                    top: -1px;
                }
            }
        }
@@ -721,7 +732,7 @@ body.ios {

            .post__header {
                .col__reply {
-                    top: 53px;
+                    top: -4px;
                }
            }
        }
@@ -775,11 +786,14 @@ body.ios {
        }

        .col__reply {
+            border: 1px solid transparent;
+            border-radius: 2px;
+            min-width: 70px;
+            padding: 2px 5px;
            position: absolute;
            right: 0;
-            top: 30px;
+            top: -4px;
            white-space: nowrap;
-            width: 65px;
        }

        .permalink-popover {
@@ -841,6 +855,7 @@ body.ios {
            min-width: 130px;
            padding: 2px 0;
            right: 0;
+            top: 20px;

            li {
                display: block;
@@ -864,15 +879,15 @@ body.ios {
        @include opacity(.5);
        color: inherit;
        display: inline-block;
+        float: right;
        font-family: 'Open Sans', sans-serif;
        font-size: 20px;
        font-weight: 600;
        height: 20px;
        line-height: 20px;
        position: relative;
-        right: 15px;
+        right: -10px;
        text-decoration: none;
-        top: -5px;
        vertical-align: top;
        visibility: hidden;
        width: 20px;
@@ -885,9 +900,8 @@ body.ios {
    .post__body {
        @include legacy-pie-clearfix;
        padding: .2em .5em;
-        width: calc(100% - 75px);
+        width: 100%;
        word-wrap: break-word;
-        position: relative;

        p {
            margin: 0 0 .4em;
@@ -1013,12 +1027,8 @@ body.ios {
    }

    .post__time {
-        font-size: .9em;
-    }
-
-    .post__time,
-    &.post--system .post__body {
        @include opacity(.6);
+        font-size: .9em;
    }

    .post-loading-gif {
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -85,8 +85,9 @@
            margin-bottom: 0;

            .col__reply {
-                top: 0;
+                top: -3px;
                width: 65px;
+                z-index: auto;
            }

            .col__name {
@@ -146,7 +147,7 @@
            &.post--comment {
                .post__header {
                    .col__reply {
-                        top: 0;
+                        top: -3px;
                    }
                }
            }
@@ -158,6 +159,12 @@
            }
        }

+        &.current--user {
+            .post__link {
+                margin: 0 0 8px;
+            }
+        }
+
        &.same--root {
            &.same--user {
                .post__header {
@@ -355,9 +362,10 @@
                    margin-top: 10px;
                }

-                button.close {
+                .close {
                    font-size: 27px;
                    font-weight: normal;
+                    margin-top: -2px;
                }

                .modal-title {
@@ -453,8 +461,8 @@
                        }

                        &.minimize-settings {
-                            padding: 0;
                            display: none;
+                            padding: 0;

                            .user-settings {
                                padding: 70px 20px 30px;
@@ -469,13 +477,12 @@
                    .nav {
                        > li {
                            > a {
-                                border-top: 1px solid #dddddd;
+                                border-top: 1px solid transparent;
                                font-size: 1.1em;
                                line-height: 2.7;
-                                color: #555555;

-                                .glyphicon {
-                                    margin-left: 7px;
+                                .icon {
+                                    margin: 0 7px;
                                }
                            }
                        }
@@ -667,7 +674,8 @@
            padding: 7px 20px 0 49px;
            position: relative;

-            .glyphicon-refresh-animate {
+            .icon--refresh {
+                @include opacity(.6);
                color: $black;
                right: 33px;
                top: 15px;
@@ -793,7 +801,6 @@
        @include translate3d(100%, 0, 0);
        right: 0;
        width: 100%;
-        z-index: 5;

        .sidebar__collapse,
        .sidebar__search-icon {
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -16,7 +16,6 @@
    .sidebar--right {
        @include single-transition(all, .5s, ease);
        @include translateX(100%);
-        z-index: 5;

        &.move--left {
            -webkit-transform: translateX(0) !important;
@@ -113,6 +112,18 @@

    .post {
        &.post--compact {
+
+            .channel__wrap & {
+                .post__time {
+                    font-size: .85em;
+                    left: -70px;
+                    position: absolute;
+                    text-align: right;
+                    top: 6px;
+                    width: 60px;
+                }
+            }
+
            &:not(.post--thread) {
                padding: 5px .5em 0 70px;

@@ -121,15 +132,6 @@
                    vertical-align: bottom;
                }

-                .post__time {
-                    font-size: .85em;
-                    left: -70px;
-                    position: absolute;
-                    text-align: right;
-                    top: 4px;
-                    width: 60px;
-                }
-
                span {
                    p {
                        &:last-child {
@@ -156,7 +158,7 @@
                    }

                    .col__reply {
-                        top: 2px;
+                        top: -1px;
                    }
                }

@@ -176,7 +178,7 @@
                    &.post--comment {
                        .post__header {
                            .col__reply {
-                                top: 0;
+                                top: -1px;
                            }
                        }
                    }
@@ -191,7 +193,7 @@
                }

                .post__content {
-                    padding-right: 85px;
+                    padding-right: 45px;
                }
            }

@@ -202,7 +204,7 @@

                    .post__header {
                        .col__reply {
-                            top: 4px;
+                            top: -1px;
                        }
                    }

@@ -211,6 +213,18 @@
                            display: none;
                        }
                    }
+
+                    &.post--root {
+                        .post__img {
+                            img {
+                                display: block;
+                            }
+                        }
+
+                        .post__time {
+                            @include opacity(.6);
+                        }
+                    }
                }

                &.post--comment {
@@ -241,26 +255,16 @@
            &.same--user {
                .post__time {
                    @include opacity(0);
-                    font-size: 11px;
-                    left: -4px;
-                    line-height: 37px;
-                    position: absolute;
-                    text-rendering: auto;
-                    top: -2px;
                }

-                &.post--compact {
-                    &.post--system {
-                        .post__time {
-                            position: absolute;
-                            top: 3px;
-                        }
-                    }
-
+                &:not(.post--compact) {
                    .post__time {
-                        font-size: .85em;
-                        left: -70px;
-                        top: -5px;
+                        font-size: 11px;
+                        left: -4px;
+                        line-height: 37px;
+                        position: absolute;
+                        text-rendering: auto;
+                        top: -2px;
                    }
                }
            }
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -283,9 +283,22 @@
            padding: 10px;

            .category-icon {
+                font-size: 15px;
+                margin-right: 7px;
+                overflow: hidden;
                right: 12px;
+                text-align: center;
                top: 6px;
-                width: 17px;
+                vertical-align: bottom;
+                width: 16px;
+
+                &.fa-user {
+                    font-size: 14px;
+                }
+
+                &.fa-bar-chart {
+                    font-size: 16px;
+                }
            }
        }

--- a/webapp/sass/routes/_settings.scss
+++ b/webapp/sass/routes/_settings.scss
@@ -342,13 +342,16 @@

            a {
                border-radius: 0;
-                color: #777;
+                color: $gray;
                padding: 8px 5px 8px 15px;
            }

-            .glyphicon {
+            .icon {
+                font-size: 15px;
+                margin-right: 10px;
+                text-align: center;
                top: 2px;
-                width: 25px;
+                width: 14px;
            }

            &:hover {
--- a/webapp/sass/routes/_signup.scss
+++ b/webapp/sass/routes/_signup.scss
@@ -291,21 +291,23 @@
            color: #444444;
        }

-        .glyphicon {
-            &.glyphicon-ok,
-            &.glyphicon-refresh {
+        .fa {
+            position: relative;
+
+            &.fa-check,
+            &.fa-refresh {
                font-size: .9em;
                left: -2px;
                margin-right: .5em;
            }

-            &.glyphicon-chevron-right {
+            &.fa-chevron-right {
                font-size: .8em;
-                right: -2px;
-                top: 0px;
+                right: -5px;
+                top: 0;
            }

-            &.glyphicon-chevron-left {
+            &.fa-chevron-left {
                font-size: .8em;
                left: -2px;
                top: 0px;
@@ -443,19 +445,21 @@
    }

    .signup-team-dir__arrow {
-        color: #999999;
+        color: $dark-gray;
        float: right;
-        font-size: .9em;
-        line-height: 3.5em;
+        font-size: 1.5em;
+        line-height: 25px;
+        position: relative;
+        top: .66em;
    }
 }


 .authorize-box {
+    border: 1px solid $black;
+    height: 280px;
    margin: 100px auto;
    width: 500px;
-    height: 280px;
-    border: 1px solid black;
 }

 .authorize-inner {
@@ -467,6 +471,6 @@
 }

 .verify_panel {
-    margin: 60px auto auto auto;
+    margin: 60px auto auto;
    max-width: 380px;
 }
--- a/webapp/utils/constants.jsx
+++ b/webapp/utils/constants.jsx
@@ -279,6 +279,7 @@ export default {
    OPEN_TEAM: 'O',
    MAX_POST_LEN: 4000,
    EMOJI_SIZE: 16,
+    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_ICON_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>",
    AWAY_ICON_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='-299 391 12 12'style='enable-background:new -299 391 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> <ellipse class='away--icon' cx='-294.6' cy='394' rx='2.5' ry='2.5'/> <path class='away--icon' d='M-293.8,399.4c0-0.4,0.1-0.7,0.2-1c-0.3,0.1-0.6,0.2-1,0.2c-2.5,0-2.5-2-2.5-2s-1,0.1-1.2,0.5c-0.4,0.6-0.6,1.7-0.7,2.5 c0,0.1-0.1,0.5,0,0.6c0.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.7,0,1.4-0.1,2-0.3 C-293.3,401.5-293.8,400.5-293.8,399.4z'/> </g> <path class='away--icon' d='M-287,400c0,0.1-0.1,0.1-0.1,0.1l-4.9,0c-0.1,0-0.1-0.1-0.1-0.1v-1.6c0-0.1,0.1-0.1,0.1-0.1l4.9,0c0.1,0,0.1,0.1,0.1,0.1 V400z'/> </svg>",
@@ -548,7 +549,7 @@ export default {
        CHANNEL_DISPLAY_MODE: 'channel_display_mode',
        CHANNEL_DISPLAY_MODE_CENTERED: 'centered',
        CHANNEL_DISPLAY_MODE_FULL_SCREEN: 'full',
-        CHANNEL_DISPLAY_MODE_DEFAULT: 'centered',
+        CHANNEL_DISPLAY_MODE_DEFAULT: 'full',
        MESSAGE_DISPLAY: 'message_display',
        MESSAGE_DISPLAY_CLEAN: 'clean',
        MESSAGE_DISPLAY_COMPACT: 'compact',
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -587,6 +587,7 @@ export function applyTheme(theme) {
    }

    if (theme.centerChannelBg) {
+        changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply', 'background:' + theme.centerChannelBg, 1);
        changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column', 'background:' + theme.centerChannelBg, 1);
        changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1);
        changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
@@ -607,7 +608,9 @@ export function applyTheme(theme) {

    if (theme.centerChannelColor) {
        changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
+        changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2);
        changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.app__body .post.post--system .post__body', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1);
        changeCss('.app__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, 1);
        changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1);
        changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
@@ -658,7 +661,7 @@ export function applyTheme(theme) {
        changeCss('.app__body .search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
        changeCss('::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4), 1);
        changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor, 4);
-        changeCss('.app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1);
+        changeCss('.app__body .post-create__container .post-create-body .btn-file svg, .app__body .post.post--compact .post-image__column .post-image__details svg, .app__body .modal .about-modal .about-modal__logo svg, .app__body .post .post__img svg', 'fill:' + theme.centerChannelColor, 1);
        changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5), 2);
        changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5), 2);
        changeCss('.app__body .post.post--comment .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);