Merge branch 'master' of https://github.com/mattermost/platform into plt-383

18 files changed, 140 insertions, 114 deletions

diff --git a/web/react/components/admin_console/email_settings.jsx b/web/react/components/admin_console/email_settings.jsx
index 3b5ad2a1a..762a4ab26 100644
--- a/web/react/components/admin_console/email_settings.jsx
+++ b/web/react/components/admin_console/email_settings.jsx
@@ -288,7 +288,7 @@ export default class EmailSettings extends React.Component {
                             className='control-label col-sm-4'
                             htmlFor='feedbackName'
                         >
-                            {'Feedback Name:'}
+                            {'Notification Display Name:'}
                         </label>
                         <div className='col-sm-8'>
                             <input
@@ -310,7 +310,7 @@ export default class EmailSettings extends React.Component {
                             className='control-label col-sm-4'
                             htmlFor='feedbackEmail'
                         >
-                            {'Feedback Email:'}
+                            {'Notification Email Address:'}
                         </label>
                         <div className='col-sm-8'>
                             <input
diff --git a/web/react/components/admin_console/gitlab_settings.jsx b/web/react/components/admin_console/gitlab_settings.jsx
index 1e10c5592..759892ad3 100644
--- a/web/react/components/admin_console/gitlab_settings.jsx
+++ b/web/react/components/admin_console/gitlab_settings.jsx
@@ -12,7 +12,7 @@ export default class GitLabSettings extends React.Component {
         this.handleSubmit = this.handleSubmit.bind(this);
 
         this.state = {
-            Allow: this.props.config.GitLabSettings.Allow,
+            Enable: this.props.config.GitLabSettings.Enable,
             saveNeeded: false,
             serverError: null
         };
@@ -21,12 +21,12 @@ export default class GitLabSettings extends React.Component {
     handleChange(action) {
         var s = {saveNeeded: true, serverError: this.state.serverError};
 
-        if (action === 'AllowTrue') {
-            s.Allow = true;
+        if (action === 'EnableTrue') {
+            s.Enable = true;
         }
 
-        if (action === 'AllowFalse') {
-            s.Allow = false;
+        if (action === 'EnableFalse') {
+            s.Enable = false;
         }
 
         this.setState(s);
@@ -37,10 +37,9 @@ export default class GitLabSettings extends React.Component {
         $('#save-button').button('loading');
 
         var config = this.props.config;
-        config.GitLabSettings.Allow = React.findDOMNode(this.refs.Allow).checked;
+        config.GitLabSettings.Enable = React.findDOMNode(this.refs.Enable).checked;
         config.GitLabSettings.Secret = React.findDOMNode(this.refs.Secret).value.trim();
         config.GitLabSettings.Id = React.findDOMNode(this.refs.Id).value.trim();
-        config.GitLabSettings.Scope = React.findDOMNode(this.refs.Scope).value.trim();
         config.GitLabSettings.AuthEndpoint = React.findDOMNode(this.refs.AuthEndpoint).value.trim();
         config.GitLabSettings.TokenEndpoint = React.findDOMNode(this.refs.TokenEndpoint).value.trim();
         config.GitLabSettings.UserApiEndpoint = React.findDOMNode(this.refs.UserApiEndpoint).value.trim();
@@ -88,7 +87,7 @@ export default class GitLabSettings extends React.Component {
                     <div className='form-group'>
                         <label
                             className='control-label col-sm-4'
-                            htmlFor='Allow'
+                            htmlFor='Enable'
                         >
                             {'Enable Sign Up With GitLab: '}
                         </label>
@@ -96,21 +95,21 @@ export default class GitLabSettings extends React.Component {
                             <label className='radio-inline'>
                                 <input
                                     type='radio'
-                                    name='Allow'
+                                    name='Enable'
                                     value='true'
-                                    ref='Allow'
-                                    defaultChecked={this.props.config.GitLabSettings.Allow}
-                                    onChange={this.handleChange.bind(this, 'AllowTrue')}
+                                    ref='Enable'
+                                    defaultChecked={this.props.config.GitLabSettings.Enable}
+                                    onChange={this.handleChange.bind(this, 'EnableTrue')}
                                 />
                                     {'true'}
                             </label>
                             <label className='radio-inline'>
                                 <input
                                     type='radio'
-                                    name='Allow'
+                                    name='Enable'
                                     value='false'
-                                    defaultChecked={!this.props.config.GitLabSettings.Allow}
-                                    onChange={this.handleChange.bind(this, 'AllowFalse')}
+                                    defaultChecked={!this.props.config.GitLabSettings.Enable}
+                                    onChange={this.handleChange.bind(this, 'EnableFalse')}
                                 />
                                     {'false'}
                             </label>
@@ -121,28 +120,6 @@ export default class GitLabSettings extends React.Component {
                     <div className='form-group'>
                         <label
                             className='control-label col-sm-4'
-                            htmlFor='Secret'
-                        >
-                            {'Secret:'}
-                        </label>
-                        <div className='col-sm-8'>
-                            <input
-                                type='text'
-                                className='form-control'
-                                id='Secret'
-                                ref='Secret'
-                                placeholder='Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
-                                defaultValue={this.props.config.GitLabSettings.Secret}
-                                onChange={this.handleChange}
-                                disabled={!this.state.Allow}
-                            />
-                            <p className='help-text'>{'Obtain this value via the instructions above for logging into GitLab.'}</p>
-                        </div>
-                    </div>
-
-                    <div className='form-group'>
-                        <label
-                            className='control-label col-sm-4'
                             htmlFor='Id'
                         >
                             {'Id:'}
@@ -156,7 +133,7 @@ export default class GitLabSettings extends React.Component {
                                 placeholder='Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
                                 defaultValue={this.props.config.GitLabSettings.Id}
                                 onChange={this.handleChange}
-                                disabled={!this.state.Allow}
+                                disabled={!this.state.Enable}
                             />
                             <p className='help-text'>{'Obtain this value via the instructions above for logging into GitLab'}</p>
                         </div>
@@ -165,22 +142,22 @@ export default class GitLabSettings extends React.Component {
                     <div className='form-group'>
                         <label
                             className='control-label col-sm-4'
-                            htmlFor='Scope'
+                            htmlFor='Secret'
                         >
-                            {'Scope:'}
+                            {'Secret:'}
                         </label>
                         <div className='col-sm-8'>
                             <input
                                 type='text'
                                 className='form-control'
-                                id='Scope'
-                                ref='Scope'
-                                placeholder='Not currently used by GitLab. Please leave blank'
-                                defaultValue={this.props.config.GitLabSettings.Scope}
+                                id='Secret'
+                                ref='Secret'
+                                placeholder='Ex "jcuS8PuvcpGhpgHhlcpT1Mx42pnqMxQY"'
+                                defaultValue={this.props.config.GitLabSettings.Secret}
                                 onChange={this.handleChange}
-                                disabled={!this.state.Allow}
+                                disabled={!this.state.Enable}
                             />
-                            <p className='help-text'>{'This field is not yet used by GitLab OAuth. Other OAuth providers may use this field to specify the scope of account data from OAuth provider that is sent to Mattermost.'}</p>
+                            <p className='help-text'>{'Obtain this value via the instructions above for logging into GitLab.'}</p>
                         </div>
                     </div>
 
@@ -200,9 +177,9 @@ export default class GitLabSettings extends React.Component {
                                 placeholder='Ex ""'
                                 defaultValue={this.props.config.GitLabSettings.AuthEndpoint}
                                 onChange={this.handleChange}
-                                disabled={!this.state.Allow}
+                                disabled={!this.state.Enable}
                             />
-                            <p className='help-text'>{'Enter <your-gitlab-url>/oauth/authorize (example http://localhost:3000/oauth/authorize).'}</p>
+                            <p className='help-text'>{'Enter <your-gitlab-url>/oauth/authorize (example http://localhost:3000/oauth/authorize).  Make sure you use HTTP or HTTPS in your URLs as appropriate.'}</p>
                         </div>
                     </div>
 
@@ -222,9 +199,9 @@ export default class GitLabSettings extends React.Component {
                                 placeholder='Ex ""'
                                 defaultValue={this.props.config.GitLabSettings.TokenEndpoint}
                                 onChange={this.handleChange}
-                                disabled={!this.state.Allow}
+                                disabled={!this.state.Enable}
                             />
-                            <p className='help-text'>{'Enter <your-gitlab-url>/oauth/token.'}</p>
+                            <p className='help-text'>{'Enter <your-gitlab-url>/oauth/token.   Make sure you use HTTP or HTTPS in your URLs as appropriate.'}</p>
                         </div>
                     </div>
 
@@ -244,9 +221,9 @@ export default class GitLabSettings extends React.Component {
                                 placeholder='Ex ""'
                                 defaultValue={this.props.config.GitLabSettings.UserApiEndpoint}
                                 onChange={this.handleChange}
-                                disabled={!this.state.Allow}
+                                disabled={!this.state.Enable}
                             />
-                            <p className='help-text'>{'Enter <your-gitlab-url>/api/v3/user.'}</p>
+                            <p className='help-text'>{'Enter <your-gitlab-url>/api/v3/user.  Make sure you use HTTP or HTTPS in your URLs as appropriate.'}</p>
                         </div>
                     </div>
 
@@ -272,6 +249,30 @@ export default class GitLabSettings extends React.Component {
     }
 }
 
+
+//config.GitLabSettings.Scope = React.findDOMNode(this.refs.Scope).value.trim();
+//  <div className='form-group'>
+//     <label
+//         className='control-label col-sm-4'
+//         htmlFor='Scope'
+//     >
+//         {'Scope:'}
+//     </label>
+//     <div className='col-sm-8'>
+//         <input
+//             type='text'
+//             className='form-control'
+//             id='Scope'
+//             ref='Scope'
+//             placeholder='Not currently used by GitLab. Please leave blank'
+//             defaultValue={this.props.config.GitLabSettings.Scope}
+//             onChange={this.handleChange}
+//             disabled={!this.state.Allow}
+//         />
+//         <p className='help-text'>{'This field is not yet used by GitLab OAuth. Other OAuth providers may use this field to specify the scope of account data from OAuth provider that is sent to Mattermost.'}</p>
+//     </div>
+// </div>
+
 GitLabSettings.propTypes = {
     config: React.PropTypes.object
 };
diff --git a/web/react/components/command_list.jsx b/web/react/components/command_list.jsx
index 553dcabe7..fea7085b7 100644
--- a/web/react/components/command_list.jsx
+++ b/web/react/components/command_list.jsx
@@ -70,8 +70,8 @@ export default class CommandList extends React.Component {
                         className='command-name'
                         onClick={this.handleClick.bind(this, i)}
                     >
-                        <div className='command__title pull-left'><strong>{this.state.suggestions[i].suggestion}</strong></div>
-                        <div className='command__desc pull-right'>{this.state.suggestions[i].description}</div>
+                        <div className='command__title'><strong>{this.state.suggestions[i].suggestion}</strong></div>
+                        <div className='command__desc'>{this.state.suggestions[i].description}</div>
                     </div>
                 );
             }
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index b7bce9b34..54d77c358 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -43,7 +43,7 @@ export default class MoreDirectChannels extends React.Component {
 
                 handleClick = function clickHandler(e) {
                     e.preventDefault();
-                    utils.switchChannel(channel, channel.teammate_username);
+                    utils.switchChannel(channel);
                     $(React.findDOMNode(self.refs.modal)).modal('hide');
                 };
             } else {
diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx
index 4c01d2c43..57a78a0d4 100644
--- a/web/react/components/navbar_dropdown.jsx
+++ b/web/react/components/navbar_dropdown.jsx
@@ -62,7 +62,7 @@ export default class NavbarDropdown extends React.Component {
 
         if (currentUser != null) {
             isAdmin = Utils.isAdmin(currentUser.roles);
-            isSystemAdmin = Utils.isInRole(currentUser.roles, 'system_admin');
+            isSystemAdmin = Utils.isSystemAdmin(currentUser.roles);
 
             inviteLink = (
                 <li>
diff --git a/web/react/components/rename_channel_modal.jsx b/web/react/components/rename_channel_modal.jsx
index 37958b649..9d514c741 100644
--- a/web/react/components/rename_channel_modal.jsx
+++ b/web/react/components/rename_channel_modal.jsx
@@ -78,7 +78,6 @@ export default class RenameChannelModal extends React.Component {
                 $(React.findDOMNode(this.refs.modal)).modal('hide');
 
                 AsyncClient.getChannel(channel.id);
-                Utils.updateTabTitle(channel.display_name);
                 Utils.updateAddressBar(channel.name);
 
                 React.findDOMNode(this.refs.displayName).value = '';
diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx
index 32b521560..bdefdbee8 100644
--- a/web/react/components/search_results_item.jsx
+++ b/web/react/components/search_results_item.jsx
@@ -47,13 +47,8 @@ export default class SearchResultsItem extends React.Component {
         );
 
         var postChannel = ChannelStore.get(this.props.post.channel_id);
-        var teammate = '';
 
-        if (postChannel.type === 'D') {
-            teammate = utils.getDirectTeammate(this.props.post.channel_id).username;
-        }
-
-        utils.switchChannel(postChannel, teammate);
+        utils.switchChannel(postChannel);
     }
 
     render() {
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 14664ed4d..6033f200f 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -268,14 +268,19 @@ export default class Sidebar extends React.Component {
         }
     }
     updateTitle() {
-        var channel = ChannelStore.getCurrent();
+        const channel = ChannelStore.getCurrent();
         if (channel) {
+            let currentSiteName = '';
+            if (global.window.config.SiteName != null) {
+                currentSiteName = global.window.config.SiteName;
+            }
+
+            let currentChannelName = channel.display_name;
             if (channel.type === 'D') {
-                var teammateUsername = Utils.getDirectTeammate(channel.id).username;
-                document.title = teammateUsername + ' ' + document.title.substring(document.title.lastIndexOf('-'));
-            } else {
-                document.title = channel.display_name + ' ' + document.title.substring(document.title.lastIndexOf('-'));
+                currentChannelName = Utils.getDirectTeammate(channel.id).username;
             }
+
+            document.title = currentChannelName + ' - ' + this.props.teamDisplayName + ' ' + currentSiteName;
         }
     }
     onScroll() {
diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx
index e63418ae8..708cd04cb 100644
--- a/web/react/components/sidebar_right.jsx
+++ b/web/react/components/sidebar_right.jsx
@@ -33,7 +33,7 @@ export default class SidebarRight extends React.Component {
         if (!this.plScrolledToBottom) {
             $('.top-visible-post')[0].scrollIntoView();
         } else {
-            var postHolder = $('.post-list-holder-by-time');
+            var postHolder = $('.post-list-holder-by-time').not('.inactive');
             postHolder.scrollTop(postHolder[0].scrollHeight);
         }
     }
@@ -51,7 +51,7 @@ export default class SidebarRight extends React.Component {
         }
     }
     render() {
-        var postHolder = $('.post-list-holder-by-time');
+        var postHolder = $('.post-list-holder-by-time').not('.inactive');
         const position = postHolder.scrollTop() + postHolder.height() + 14;
         const bottom = postHolder[0].scrollHeight;
         this.plScrolledToBottom = position >= bottom;
diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx
index f1341d9d7..2df2c8ffd 100644
--- a/web/react/components/sidebar_right_menu.jsx
+++ b/web/react/components/sidebar_right_menu.jsx
@@ -26,11 +26,14 @@ export default class SidebarRightMenu extends React.Component {
         var inviteLink = '';
         var teamSettingsLink = '';
         var manageLink = '';
+        var consoleLink = '';
         var currentUser = UserStore.getCurrentUser();
         var isAdmin = false;
+        var isSystemAdmin = false;
 
         if (currentUser != null) {
             isAdmin = utils.isAdmin(currentUser.roles);
+            isSystemAdmin = utils.isSystemAdmin(currentUser.roles);
 
             inviteLink = (
                 <li>
@@ -77,6 +80,17 @@ export default class SidebarRightMenu extends React.Component {
             );
         }
 
+        if (isSystemAdmin) {
+            consoleLink = (
+                <li>
+                    <a
+                        href='/admin_console'
+                    >
+                    <i className='glyphicon glyphicon-wrench'></i>System Console</a>
+                </li>
+            );
+        }
+
         var siteName = '';
         if (global.window.config.SiteName != null) {
             siteName = global.window.config.SiteName;
@@ -107,6 +121,7 @@ export default class SidebarRightMenu extends React.Component {
                         {inviteLink}
                         {teamLink}
                         {manageLink}
+                        {consoleLink}
                         <li>
                             <a
                                 href='#'
diff --git a/web/react/components/user_settings/manage_incoming_hooks.jsx b/web/react/components/user_settings/manage_incoming_hooks.jsx
index 1bbfbd162..fa2e2e5e4 100644
--- a/web/react/components/user_settings/manage_incoming_hooks.jsx
+++ b/web/react/components/user_settings/manage_incoming_hooks.jsx
@@ -21,7 +21,7 @@ export default class ManageIncomingHooks extends React.Component {
         this.getHooks();
     }
     addNewHook() {
-        let hook = {}; //eslint-disable-line prefer-const
+        const hook = {};
         hook.channel_id = this.state.channelId;
 
         Client.addIncomingHook(
@@ -40,13 +40,13 @@ export default class ManageIncomingHooks extends React.Component {
         );
     }
     removeHook(id) {
-        let data = {}; //eslint-disable-line prefer-const
+        const data = {};
         data.id = id;
 
         Client.deleteIncomingHook(
             data,
             () => {
-                let hooks = this.state.hooks; //eslint-disable-line prefer-const
+                const hooks = this.state.hooks;
                 let index = -1;
                 for (let i = 0; i < hooks.length; i++) {
                     if (hooks[i].id === id) {
@@ -69,7 +69,7 @@ export default class ManageIncomingHooks extends React.Component {
     getHooks() {
         Client.listIncomingHooks(
             (data) => {
-                let state = this.state; //eslint-disable-line prefer-const
+                const state = this.state;
 
                 if (data) {
                     state.hooks = data;
@@ -93,9 +93,11 @@ export default class ManageIncomingHooks extends React.Component {
         }
 
         const channels = ChannelStore.getAll();
-        let options = []; //eslint-disable-line prefer-const
+        const options = [];
         channels.forEach((channel) => {
-            options.push(<option value={channel.id}>{channel.name}</option>);
+            if (channel.type !== Constants.DM_CHANNEL) {
+                options.push(<option value={channel.id}>{channel.name}</option>);
+            }
         });
 
         let disableButton = '';
@@ -103,7 +105,7 @@ export default class ManageIncomingHooks extends React.Component {
             disableButton = ' disable';
         }
 
-        let hooks = []; //eslint-disable-line prefer-const
+        const hooks = [];
         this.state.hooks.forEach((hook) => {
             const c = ChannelStore.get(hook.channel_id);
             hooks.push(
diff --git a/web/react/components/user_settings/user_settings_notifications.jsx b/web/react/components/user_settings/user_settings_notifications.jsx
index ba14f019f..42c65ef5d 100644
--- a/web/react/components/user_settings/user_settings_notifications.jsx
+++ b/web/react/components/user_settings/user_settings_notifications.jsx
@@ -420,7 +420,7 @@ export default class NotificationsTab extends React.Component {
                         </label>
                         <br/>
                     </div>
-                    <div><br/>{'Email notifications are sent for mentions and direct messages after you have been away from ' + global.window.config.SiteName + ' for 5 minutes.'}</div>
+                    <div><br/>{'Email notifications are sent for mentions and direct messages after you’ve been offline for more than 60 seconds or away from ' + global.window.config.SiteName + ' for more than 5 minutes.'}</div>
                 </div>
             );
 
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 75e80bc7e..da59f8e5a 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -111,6 +111,7 @@ module.exports = {
     ],
     MONTHS: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     MAX_DMS: 20,
+    DM_CHANNEL: 'D',
     MAX_POST_LEN: 4000,
     EMOJI_SIZE: 16,
     ONLINE_ICON_SVG: "<svg version='1.1' id='Layer_1' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns#' 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:inkscape='http://www.inkscape.org/namespaces/inkscape' sodipodi:docname='TRASH_1_4.svg' inkscape:version='0.48.4 r9939' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12' enable-background='new 0 0 12 12' xml:space='preserve'><sodipodi:namedview  inkscape:cy='139.7898' inkscape:cx='26.358185' inkscape:zoom='1.18' showguides='true' showgrid='false' id='namedview6' guidetolerance='10' gridtolerance='10' objecttolerance='10' borderopacity='1' bordercolor='#666666' pagecolor='#ffffff' inkscape:current-layer='Layer_1' inkscape:window-maximized='1' inkscape:window-y='-8' inkscape:window-x='-8' inkscape:window-height='705' inkscape:window-width='1366' inkscape:guide-bbox='true' inkscape:pageshadow='2' inkscape:pageopacity='0'><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><g><path class='online--icon' d='M6,5.487c1.371,0,2.482-1.116,2.482-2.493c0-1.378-1.111-2.495-2.482-2.495S3.518,1.616,3.518,2.994C3.518,4.371,4.629,5.487,6,5.487z M10.452,8.545c-0.101-0.829-0.36-1.968-0.726-2.541C9.475,5.606,8.5,5.5,8.5,5.5S8.43,7.521,6,7.521C3.507,7.521,3.5,5.5,3.5,5.5S2.527,5.606,2.273,6.004C1.908,6.577,1.648,7.716,1.547,8.545C1.521,8.688,1.49,9.082,1.498,9.142c0.161,1.295,2.238,2.322,4.375,2.358C5.916,11.501,5.958,11.501,6,11.501c0.043,0,0.084,0,0.127-0.001c2.076-0.026,4.214-1.063,4.375-2.358C10.509,9.082,10.471,8.696,10.452,8.545z'/></g></g></svg>",
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index e133ee128..91e47730e 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -78,6 +78,14 @@ export function isAdmin(roles) {
     return false;
 }
 
+export function isSystemAdmin(roles) {
+    if (isInRole(roles, 'system_admin')) {
+        return true;
+    }
+
+    return false;
+}
+
 export function getDomainWithOutSub() {
     var parts = window.location.host.split('.');
 
@@ -388,7 +396,6 @@ export function toTitleCase(str) {
 export function applyTheme(theme) {
     if (theme.sidebarBg) {
         changeCss('.sidebar--left', 'background:' + theme.sidebarBg, 1);
-        changeCss('@media(max-width: 768px){.search-bar__container', 'background:' + theme.sidebarBg, 1);
     }
 
     if (theme.sidebarText) {
@@ -423,6 +430,7 @@ export function applyTheme(theme) {
         changeCss('.sidebar--left .team__header, .sidebar--menu .team__header', 'background:' + theme.sidebarHeaderBg, 1);
         changeCss('.modal .modal-header', 'background:' + theme.sidebarHeaderBg, 1);
         changeCss('#navbar .navbar-default', 'background:' + theme.sidebarHeaderBg, 1);
+        changeCss('@media(max-width: 768px){.search-bar__container', 'background:' + theme.sidebarHeaderBg, 1);
     }
 
     if (theme.sidebarHeaderTextColor) {
@@ -430,8 +438,9 @@ export function applyTheme(theme) {
         changeCss('.sidebar--left .team__header .user__name, .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8), 1);
         changeCss('.sidebar--left .team__header:hover .user__name, .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor, 1);
         changeCss('.modal .modal-header .modal-title, .modal .modal-header .modal-title .name, .modal .modal-header button.close', 'color:' + theme.sidebarHeaderTextColor, 1);
-        changeCss('#navbar .navbar-default .navbar-brand .heading, ', 'color:' + theme.sidebarHeaderTextColor, 1);
+        changeCss('#navbar .navbar-default .navbar-brand .heading', 'color:' + theme.sidebarHeaderTextColor, 1);
         changeCss('#navbar .navbar-default .navbar-toggle .icon-bar, ', 'background:' + theme.sidebarHeaderTextColor, 1);
+        changeCss('@media(max-width: 768px){.search-bar__container', 'color:' + theme.sidebarHeaderTextColor, 2);
     }
 
     if (theme.onlineIndicator) {
@@ -449,29 +458,32 @@ export function applyTheme(theme) {
     }
 
     if (theme.centerChannelBg) {
-        changeCss('.app__content, .markdown__table, .markdown__table tbody tr', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .command-box', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
-        changeCss('.search-bar__container .search__form .search-bar', 'background:' + theme.centerChannelBg, 1);
         changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
         changeCss('.post-image__column .post-image__details', 'background:' + theme.centerChannelBg, 1);
         changeCss('.sidebar--right', 'background:' + theme.centerChannelBg, 1);
     }
 
     if (theme.centerChannelColor) {
-        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .loading-screen .loading__content .round', 'color:' + theme.centerChannelColor, 1);
+        changeCss('.app__content, .post-create__container .post-create-body .btn-file, .post-create__container .post-create-footer .msg-typing, .loading-screen .loading__content .round, .command-name', 'color:' + theme.centerChannelColor, 1);
         changeCss('#post-create', 'color:' + theme.centerChannelColor, 2);
+        changeCss('.mentions--top, .command-box', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3);
+        changeCss('.mentions--top, .command-box', '-webkit-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 2);
+        changeCss('.mentions--top, .command-box', '-moz-box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 1);
         changeCss('.post-body hr', 'background:' + theme.centerChannelColor, 1);
         changeCss('.channel-header .heading', 'color:' + theme.centerChannelColor, 1);
         changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
         changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1);
-        changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .command-box', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('.command-name', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.custom-textarea', 'color:' + theme.centerChannelColor, 1);
         changeCss('.post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2);
         changeCss('.post-image__column .post-image__details', 'color:' + theme.centerChannelColor, 2);
         changeCss('.post-image__column a, .post-image__column a:hover, .post-image__column a:focus', 'color:' + theme.centerChannelColor, 1);
-        changeCss('.search-bar__container .search__form .search-bar', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2) + '; color: ' + theme.centerChannelColor, 2);
+        changeCss('.search-bar__container .search__form .search-bar', 'background:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.search-bar__container .search__form', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.channel-intro .channel-intro__content', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
         changeCss('.date-separator .separator__text', 'color:' + theme.centerChannelColor, 2);
@@ -484,7 +496,7 @@ export function applyTheme(theme) {
         changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('.post:hover, .sidebar--right .sidebar--right__header', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.date-separator.hovered--before:after, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
-        changeCss('.date-separator.hovered--after:before, .new-separator.hovered--after:before', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
+        changeCss('.date-separator.hovered--after:before, .new-separator.hovered--after:before, .command-name:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.post.current--user:hover .post-body ', 'background: none;', 1);
         changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2);
     }
@@ -508,7 +520,6 @@ export function applyTheme(theme) {
         changeCss('.btn.btn-primary', 'color:' + theme.buttonColor, 2);
     }
 }
-
 export function changeCss(className, classValue, classRepeat) {
     // we need invisible container to store additional css definitions
     var cssMainContainer = $('#css-modifier-container');
@@ -633,16 +644,12 @@ export function isValidUsername(name) {
     return error;
 }
 
-export function updateTabTitle(name) {
-    document.title = name + ' ' + document.title.substring(document.title.lastIndexOf('-'));
-}
-
 export function updateAddressBar(channelName) {
     var teamURL = window.location.href.split('/channels')[0];
     history.replaceState('data', '', teamURL + '/channels/' + channelName);
 }
 
-export function switchChannel(channel, teammateName) {
+export function switchChannel(channel) {
     AppDispatcher.handleViewAction({
         type: ActionTypes.CLICK_CHANNEL,
         name: channel.name,
@@ -651,12 +658,6 @@ export function switchChannel(channel, teammateName) {
 
     updateAddressBar(channel.name);
 
-    if (channel.type === 'D' && teammateName) {
-        updateTabTitle(teammateName);
-    } else {
-        updateTabTitle(channel.display_name);
-    }
-
     AsyncClient.getChannels(true, true, true);
     AsyncClient.getChannelExtraInfo(true);
     AsyncClient.getPosts(channel.id);
diff --git a/web/sass-files/sass/partials/_command-box.scss b/web/sass-files/sass/partials/_command-box.scss
index 44eb9b8df..f1aa4dca2 100644
--- a/web/sass-files/sass/partials/_command-box.scss
+++ b/web/sass-files/sass/partials/_command-box.scss
@@ -4,20 +4,29 @@
     width: 100%;
     border: $border-gray;
     bottom: 38px;
+    overflow: auto;
     @extend %popover-box-shadow;
+    .sidebar--right & {
+        bottom: 100px;
+    }
 }
 
 .command-name {
     position: relative;
     width: 100%;
-    background-color: #fff;
-    height: 37px;
-    line-height: 37px;
-    padding: 2px 10px 2px 5px;
+    line-height: 24px;
+    padding: 5px 10px 8px;
     z-index: 101;
+    font-size: 0.95em;
+    border-bottom: 1px solid #ddd;
     &:hover {
         background-color: #e8eaed;
     }
+    .command__desc {
+        margin-left: 5px;
+        @include opacity(0.5);
+        line-height: normal;
+    }
 }
 
 .command-desc {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index d29c653ff..9e8d0dc7d 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -553,13 +553,7 @@
                 padding: 0 10px 0 31px;
                 background: rgba(black, 0.2);
                 @include border-radius(3px);
-                color: #fff;
-            }
-            input[type=text] {
-                @include input-placeholder {
-                    color: #fff;
-                    color: rgba(#fff, 0.5);
-                }
+                color: inherit;
             }
         }
     }
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index 9abdd40da..bcb8b5eac 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -32,8 +32,7 @@
 	top: 15px;
 	margin-left: 10px;
 	font-size: 14px;
-	color: #fff;
-	color: rgba(#fff, 0.5);
+	@include opacity(0.5);
 	display: none;
 }
 .search__form {
diff --git a/web/web.go b/web/web.go
index da7eff13d..bf985a5a0 100644
--- a/web/web.go
+++ b/web/web.go
@@ -850,7 +850,12 @@ func incomingWebhook(c *api.Context, w http.ResponseWriter, r *http.Request) {
 
 	r.ParseForm()
 
-	props := model.MapFromJson(strings.NewReader(r.FormValue("payload")))
+	var props map[string]string
+	if r.Header.Get("Content-Type") == "application/json" {
+		props = model.MapFromJson(r.Body)
+	} else {
+		props = model.MapFromJson(strings.NewReader(r.FormValue("payload")))
+	}
 
 	text := props["text"]
 	if len(text) == 0 {