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

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

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'

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-loading-text={'<span class=\'fa fa-refresh fa-rotate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')}
-                        data-complete-text={'<span class=\'glyphicon glyphicon-ok\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')}
+                        data-complete-text={'<span class=\'fa fa-check\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')}
                     >
                         <FormattedMessage
                             id='admin.team.upload'

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>
             );

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'

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>
             );

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>
             );

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...'

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}
                                     >

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'

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'

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';
         }
 

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'>

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>
             );

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>
             );

webapp/components/file_upload.jsx

@@ -318,9 +318,10 @@ class FileUpload extends React.Component {
                 ref='input'
                 className='btn btn-file'
             >
-                <span>
+                <span
-                    <i className='glyphicon glyphicon-paperclip'/>
+                    className='icon'
-                </span>
+                    dangerouslySetInnerHTML={{__html: Constants.ATTACHMENT_ICON_SVG}}
+                />
                 <input
                     ref='fileInput'
                     type='file'

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>

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>
         );
 

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/>

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'

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
+                <p>
-                    id='post_body.deleted'
+                    <FormattedMessage
-                    defaultMessage='(message deleted)'
+                        id='post_body.deleted'
-                />
+                        defaultMessage='(message deleted)'
+                    />
+                    {removeButton}
+                </p>
             );
         } else {
             message = (

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>
         );

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'>
+                    {profilePicContainer}
-                        <img
-                            src={Client.getUsersRoute() + '/' + post.user_id + '/image?time=' + timestamp}
-                            height='36'
-                            width='36'
-                        />
-                    </div>
                     <div>
                         <ul className='post__header'>
                             <li className='col col__name'>

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'>
+                    {profilePicContainer}
-                        {profilePic}
-                    </div>
                     <div>
                         <ul className='post__header'>
                             <li className='col__name'>{userProfile}</li>

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'

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>

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'

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: 'general', uiName: formatMessage(holders.generalTab), icon: 'icon fa fa-cog'});
-        tabs.push({name: 'import', uiName: formatMessage(holders.importTab), icon: 'glyphicon glyphicon-upload'});
+        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

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>
+                </span>
-                <code>
+                <span>
                     <FormattedMessage
                         id='textbox.preformatted'
                         defaultMessage='```preformatted```'
                     />
-                </code>
+                </span>
                 <span>
                     <FormattedMessage
                         id='textbox.quote'

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:

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'
+                                id='user.settings.display.fullScreen'
-                                defaultMessage='Fixed width, centered'
+                                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'
+                                id='user.settings.display.fixedWidthCentered'
-                                defaultMessage='Full width'
+                                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'
+                        id='user.settings.display.fullScreen'
-                        defaultMessage='Fixed width, centered'
+                        defaultMessage='Full width'
                     />
                 );
             } else {
                 describe = (
                     <FormattedMessage
-                        id='user.settings.display.fullScreen'
+                        id='user.settings.display.fixedWidthCentered'
-                        defaultMessage='Full width'
+                        defaultMessage='Fixed width, centered'
                     />
                 );
             }

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: 'general', uiName: formatMessage(holders.general), icon: 'icon fa fa-gear'});
-        tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'glyphicon glyphicon-lock'});
+        tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'icon fa fa-lock'});
-        tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'glyphicon glyphicon-exclamation-sign'});
+        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: 'display', uiName: formatMessage(holders.display), icon: 'icon fa fa-eye'});
-        tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'glyphicon glyphicon-list-alt'});
+        tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'icon fa fa-list-alt'});
 
         return (
             <Modal

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.collapseDesc": "Expand links to show a preview of content, when available.",
-  "user.settings.display.collapseDisplay": "Auto Collapse Previews",
+  "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)",

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;
+}

webapp/sass/components/_files.scss

@@ -71,6 +71,7 @@
     i {
         color: $white;
         cursor: pointer;
+        font-size: 16px;
         opacity: inherit;
         position: absolute;
         right: 5px;

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;

webapp/sass/components/_save-button.scss

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

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 {

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;

webapp/sass/layout/_headers.scss

@@ -97,8 +97,10 @@
 
 .header-dropdown__icon {
     color: inherit;
-    font-size: 11px;
+    font-size: 12px;
-    top: 3px;
+    margin-left: 1px;
+    position: relative;
+    top: 1px;
 }
 
 .channel-header__info {

webapp/sass/layout/_navigation.scss

@@ -46,8 +46,10 @@
                 width: 21px;
             }
 
-            .glyphicon-search {
+            .icon-search {
-                top: -1px;
+                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 {

webapp/sass/layout/_post-right.scss

@@ -1,152 +1,156 @@
 @charset 'UTF-8';
 
-.post-right__container {
+.app__body {
-    @include display-flex;
+    .post-right__container {
-    @include flex-direction(column);
+        @include display-flex;
-    height: 100%;
+        @include flex-direction(column);
+        height: 100%;
 
-    .post-right-root-message {
+        .post-right-root-message {
-        padding: 1em 1em 0;
+            padding: 1em 1em 0;
-    }
+        }
 
-    .post-right-comments-container {
+        .post-right-comments-container {
-        position: relative;
+            position: relative;
+
+            .post {
+                &:first-child {
+                    padding-top: 15px;
+                }
+            }
+        }
+
+
+        .help_format_text {
+            bottom: -63px;
+            right: auto;
+        }
 
         .post {
-            &:first-child {
+            &.post--root {
-                padding-top: 15px;
+                border-bottom: 1px solid #ddd;
+                padding-bottom: 1em;
+
+                .post__body {
+                    background: transparent !important;
+                }
             }
-        }
-    }
 
-
+            .post__header {
-    .help_format_text {
+                .col__reply {
-        bottom: -63px;
+                    background: transparent !important;
-        right: auto;
+                    border: none !important;
-    }
+                    text-align: right;
-
+                    top: 0;
-    .post {
+                }
-        &.post--root {
+            }
-            border-bottom: 1px solid #ddd;
-            padding-bottom: 1em;
 
             .post__body {
-                background: transparent !important;
+                width: 100%;
             }
         }
 
-        .post__header {
+        hr {
-            .col__reply {
+            border: none;
-                text-align: right;
+            margin-bottom: 0;
-                top: 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 {
+    .post-right-header {
-        border: none;
+        border-bottom: $border-gray;
-        margin-bottom: 0;
+        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 {
+    .post-right__scroll {
-            min-height: 100px;
+        @include flex(1 1 auto);
-        }
+        -webkit-overflow-scrolling: touch;
+        overflow: auto;
+        position: relative;
 
-        .btn {
+        .file-preview__container {
-            margin-bottom: 10px;
+            margin-top: 5px;
-        }
-
-        .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;
         }
     }
-}
 
-.post-right-header {
+    .post-right-comment-time {
-    border-bottom: $border-gray;
+        color: #a8adb7;
-    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-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;
-}

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 {

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 {
+                                .icon {
-                                    margin-left: 7px;
+                                    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 {

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 {
+                &:not(.post--compact) {
-                    &.post--system {
-                        .post__time {
-                            position: absolute;
-                            top: 3px;
-                        }
-                    }
-
                     .post__time {
-                        font-size: .85em;
+                        font-size: 11px;
-                        left: -70px;
+                        left: -4px;
-                        top: -5px;
+                        line-height: 37px;
+                        position: absolute;
+                        text-rendering: auto;
+                        top: -2px;
                     }
                 }
             }

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;
+                }
             }
         }
 

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 {

webapp/sass/routes/_signup.scss

@@ -291,21 +291,23 @@
             color: #444444;
         }
 
-        .glyphicon {
+        .fa {
-            &.glyphicon-ok,
+            position: relative;
-            &.glyphicon-refresh {
+
+            &.fa-check,
+            &.fa-refresh {
                 font-size: .9em;
                 left: -2px;
                 margin-right: .5em;
             }
 
-            &.glyphicon-chevron-right {
+            &.fa-chevron-right {
                 font-size: .8em;
-                right: -2px;
+                right: -5px;
-                top: 0px;
+                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;
+        font-size: 1.5em;
-        line-height: 3.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;
 }

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',

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);