17 files changed, 290 insertions, 112 deletions

diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx
index ade58a10a..48cb4d13b 100644
--- a/web/react/components/channel_header.jsx
+++ b/web/react/components/channel_header.jsx
@@ -15,17 +15,8 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Constants = require('../utils/constants.jsx');
 var ActionTypes = Constants.ActionTypes;
 
-function getExtraInfoStateFromStores() {
-  return {
-    extra_info: ChannelStore.getCurrentExtraInfo()
-  };
-}
-
 var ExtraMembers = React.createClass({
     componentDidMount: function() {
-        ChannelStore.addExtraInfoChangeListener(this._onChange);
-        ChannelStore.addChangeListener(this._onChange);
-
         var originalLeave = $.fn.popover.Constructor.prototype.leave;
         $.fn.popover.Constructor.prototype.leave = function(obj) {
             var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
@@ -49,27 +40,21 @@ var ExtraMembers = React.createClass({
         });
 
     },
-    componentWillUnmount: function() {
-        ChannelStore.removeExtraInfoChangeListener(this._onChange);
-        ChannelStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function() {
-        var newState = getExtraInfoStateFromStores();
-        if (!utils.areStatesEqual(newState, this.state)) {
-            this.setState(newState);
-        }
-    },
-    getInitialState: function() {
-        return getExtraInfoStateFromStores();
-    },
     render: function() {
-        var count = this.state.extra_info.members.length == 0 ? "-" : this.state.extra_info.members.length;
-        count = this.state.extra_info.members.length > 19 ? "20+" : count;
+        var count = this.props.members.length == 0 ? "-" : this.props.members.length;
+        count = this.props.members.length > 19 ? "20+" : count;
         var data_content = "";
+        var sortedMembers = this.props.members;
 
-        this.state.extra_info.members.forEach(function(m) {
-            data_content += "<div style='white-space: nowrap'>" + m.username + "</div>";
-        });
+        if(sortedMembers) {
+            sortedMembers.sort(function(a,b) {
+                return a.username.localeCompare(b.username);
+            })
+
+            sortedMembers.forEach(function(m) {
+                data_content += "<div style='white-space: nowrap'>" + m.username + "</div>";
+            });
+        }
 
         return (
             <div style={{"cursor" : "pointer"}} id="member_popover" data-toggle="popover" data-content={data_content} data-original-title="Members" >
@@ -228,7 +213,7 @@ module.exports = React.createClass({
                         <a href="#"><strong className="heading">{channelTitle}</strong></a>
                     }
                     </th>
-                    <th><ExtraMembers channelId={this.state.channel.id} /></th>
+                    <th><ExtraMembers members={this.state.users} channelId={this.state.channel.id} /></th>
                     { searchForm }
                     <th>
                         <div className="dropdown" style={{"marginLeft":"5px", "marginRight":"10px"}}>
diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx
index 191297ce4..18addb52f 100644
--- a/web/react/components/channel_info_modal.jsx
+++ b/web/react/components/channel_info_modal.jsx
@@ -35,9 +35,18 @@ module.exports = React.createClass({
                       <h4 className="modal-title" id="myModalLabel">{channel.display_name}</h4>
                     </div>
                     <div className="modal-body">
-                      <p><strong>Channel Name: </strong>{channel.display_name}</p>
-                      <p><strong>Channel Handle: </strong>{channel.name}</p>
-                      <p><strong>Channel ID: </strong>{channel.id}</p>
+                      <div className="row form-group">
+                        <div className="col-sm-3 info__label">Channel Name: </div>
+                        <div className="col-sm-9">{channel.display_name}</div>
+                      </div>
+                      <div className="row form-group">
+                        <div className="col-sm-3 info__label">Channel Handle:</div>
+                        <div className="col-sm-9">{channel.name}</div>
+                      </div>
+                      <div className="row">
+                        <div className="col-sm-3 info__label">Channel ID:</div>
+                        <div className="col-sm-9">{channel.id}</div>
+                      </div>
                     </div>
                     <div className="modal-footer">
                       <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx
index 085536a0a..fa9ab42ae 100644
--- a/web/react/components/channel_notifications.jsx
+++ b/web/react/components/channel_notifications.jsx
@@ -1,6 +1,8 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+var SettingItemMin = require('./setting_item_min.jsx');
+var SettingItemMax = require('./setting_item_max.jsx');
 
 var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
@@ -9,26 +11,50 @@ var ChannelStore = require('../stores/channel_store.jsx');
 
 module.exports = React.createClass({
     componentDidMount: function() {
+        ChannelStore.addChangeListener(this._onChange);
+
         var self = this;
         $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
             var button = e.relatedTarget;
             var channel_id = button.dataset.channelid;
 
             var notifyLevel = ChannelStore.getMember(channel_id).notify_level;
-            self.setState({ notify_level: notifyLevel, title: button.dataset.title, channel_id: channel_id });
+            var quietMode = false;
+            if (notifyLevel === "quiet") quietMode = true;
+            self.setState({ notify_level: notifyLevel, quiet_mode: quietMode, title: button.dataset.title, channel_id: channel_id });
         });
     },
+    componentWillUnmount: function() {
+        ChannelStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+        if (!this.state.channel_id) return;
+        var notifyLevel = ChannelStore.getMember(this.state.channel_id).notify_level;
+        var quietMode = false;
+        if (notifyLevel === "quiet") quietMode = true;
+
+        var newState = this.state;
+        newState.notify_level = notifyLevel;
+        newState.quiet_mode = quietMode;
+
+        if (!utils.areStatesEqual(this.state, newState)) {
+            this.setState(newState);
+        }
+    },
+    updateSection: function(section) {
+        this.setState({ activeSection: section });
+    },
     getInitialState: function() {
-        return { notify_level: "", title: "", channel_id: "" };
+        return { notify_level: "", title: "", channel_id: "", activeSection: "" };
     },
-    handleUpdate: function(e) {
+    handleUpdate: function() {
         var channel_id = this.state.channel_id;
-        var notify_level = this.state.notify_level;
+        var notify_level = this.state.quiet_mode ? "quiet" : this.state.notify_level;
 
         var data = {};
         data["channel_id"] = channel_id;
         data["user_id"] = UserStore.getCurrentId();
-        data["notify_level"] = this.state.notify_level;
+        data["notify_level"] = notify_level;
 
         if (!data["notify_level"] || data["notify_level"].length === 0) return;
 
@@ -37,7 +63,7 @@ module.exports = React.createClass({
                 var member = ChannelStore.getMember(channel_id);
                 member.notify_level = notify_level;
                 ChannelStore.setChannelMember(member);
-                $(this.refs.modal.getDOMNode()).modal('hide');
+                this.updateSection("");
             }.bind(this),
             function(err) {
                 this.setState({ server_error: err.message });
@@ -45,42 +71,138 @@ module.exports = React.createClass({
         );
     },
     handleRadioClick: function(notifyLevel) {
-        this.setState({ notify_level: notifyLevel });
+        this.setState({ notify_level: notifyLevel, quiet_mode: false });
         this.refs.modal.getDOMNode().focus();
     },
-    handleQuietToggle: function() {
-        if (this.state.notify_level === "quiet") {
-            this.setState({ notify_level: "none" });
-            this.refs.modal.getDOMNode().focus();
-        } else {
-            this.setState({ notify_level: "quiet" });
-            this.refs.modal.getDOMNode().focus();
-        }
+    handleQuietToggle: function(quietMode) {
+        this.setState({ notify_level: "none", quiet_mode: quietMode });
+        this.refs.modal.getDOMNode().focus();
     },
     render: function() {
         var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
 
-        var allActive = "";
-        var mentionActive = "";
-        var noneActive = "";
-        var quietActive = "";
-        var desktopHidden = "";
-
-        if (this.state.notify_level === "quiet") {
-            desktopHidden = "hidden";
-            quietActive = "active";
-        } else if (this.state.notify_level === "mention") {
-            mentionActive = "active";
-        } else if (this.state.notify_level === "none") {
-            noneActive = "active";
+        var self = this;
+
+        var desktopSection;
+        if (this.state.activeSection === 'desktop') {
+            var notifyActive = [false, false, false];
+            if (this.state.notify_level === "mention") {
+                notifyActive[1] = true;
+            } else if (this.state.notify_level === "all") {
+                notifyActive[0] = true;
+            } else {
+                notifyActive[2] = true;
+            }
+
+            var inputs = [];
+
+            inputs.push(
+                <div className="col-sm-12">
+                    <div className="radio">
+                        <label>
+                            <input type="radio" checked={notifyActive[0]} onClick={function(){self.handleRadioClick("all")}}>For all activity</input>
+                        </label>
+                        <br/>
+                    </div>
+                    <div className="radio">
+                        <label>
+                            <input type="radio" checked={notifyActive[1]} onClick={function(){self.handleRadioClick("mention")}}>Only for mentions</input>
+                        </label>
+                        <br/>
+                    </div>
+                    <div className="radio">
+                        <label>
+                            <input type="radio" checked={notifyActive[2]} onClick={function(){self.handleRadioClick("none")}}>Never</input>
+                        </label>
+                    </div>
+                </div>
+            );
+
+            desktopSection = (
+                <SettingItemMax
+                    title="Send desktop notifications"
+                    inputs={inputs}
+                    submit={this.handleUpdate}
+                    server_error={server_error}
+                    updateSection={function(e){self.updateSection("");self._onChange();e.preventDefault();}}
+                />
+            );
+        } else {
+            var describe = "";
+            if (this.state.notify_level === "mention") {
+                describe = "Only for mentions";
+            } else if (this.state.notify_level === "all") {
+                describe = "For all activity";
+            } else {
+                describe = "Never";
+            }
+
+            desktopSection = (
+                <SettingItemMin
+                    title="Send desktop notifications"
+                    describe={describe}
+                    updateSection={function(e){self.updateSection("desktop");e.preventDefault();}}
+                />
+            );
+        }
+
+        var quietSection;
+        if (this.state.activeSection === 'quiet') {
+            var quietActive = ["",""];
+            if (this.state.quiet_mode) {
+                quietActive[0] = "active";
+            } else {
+                quietActive[1] = "active";
+            }
+
+            var inputs = [];
+
+            inputs.push(
+                <div className="col-sm-12">
+                    <div className="btn-group" data-toggle="buttons-radio">
+                        <button className={"btn btn-default "+quietActive[0]} onClick={function(){self.handleQuietToggle(true)}}>On</button>
+                        <button className={"btn btn-default "+quietActive[1]} onClick={function(){self.handleQuietToggle(false)}}>Off</button>
+                    </div>
+                </div>
+            );
+
+            inputs.push(
+                <div className="col-sm-12">
+                    <br/>
+                    Enabling quiet mode will turn off desktop notifications and only mark the channel as unread if you have been mentioned.
+                </div>
+            );
+
+            quietSection = (
+                <SettingItemMax
+                    title="Quiet mode"
+                    inputs={inputs}
+                    submit={this.handleUpdate}
+                    server_error={server_error}
+                    updateSection={function(e){self.updateSection("");self._onChange();e.preventDefault();}}
+                />
+            );
         } else {
-            allActive = "active";
+            var describe = "";
+            if (this.state.quiet_mode) {
+                describe = "On";
+            } else {
+                describe = "Off";
+            }
+
+            quietSection = (
+                <SettingItemMin
+                    title="Quiet mode"
+                    describe={describe}
+                    updateSection={function(e){self.updateSection("quiet");e.preventDefault();}}
+                />
+            );
         }
 
         var self = this;
         return (
             <div className="modal fade" id="channel_notifications" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true">
-                <div className="modal-dialog">
+                <div className="modal-dialog settings-modal">
                     <div className="modal-content">
                         <div className="modal-header">
                             <button type="button" className="close" data-dismiss="modal">
@@ -90,31 +212,23 @@ module.exports = React.createClass({
                             <h4 className="modal-title">{"Notification Preferences for " + this.state.title}</h4>
                         </div>
                         <div className="modal-body">
-                            <div className={desktopHidden}>
-                                <span>Desktop Notifications</span>
-                                <br/>
-                                <div className="btn-group" data-toggle="buttons-radio">
-                                    <button className={"btn btn-default "+allActive} onClick={function(){self.handleRadioClick("all")}}>Any activity (default)</button>
-                                    <button className={"btn btn-default "+mentionActive} onClick={function(){self.handleRadioClick("mention")}}>Mentions of my name</button>
-                                    <button className={"btn btn-default "+noneActive} onClick={function(){self.handleRadioClick("none")}}>Nothing</button>
+                            <div className="settings-table">
+                            <div className="settings-content">
+                                <div ref="wrapper" className="user-settings">
+                                    <br/>
+                                    <div className="divider-dark first"/>
+                                    {desktopSection}
+                                    <div className="divider-light"/>
+                                    {quietSection}
+                                    <div className="divider-dark"/>
                                 </div>
-                                <br/>
-                                <br/>
                             </div>
-                            <span>Quiet Mode</span>
-                            <br/>
-                            <div className="btn-group" data-toggle="buttons-checkbox">
-                                <button className={"btn btn-default "+quietActive} onClick={this.handleQuietToggle}>Quiet Mode</button>
                             </div>
                             { server_error }
                         </div>
-                        <div className="modal-footer">
-                            <button type="button" className="btn btn-primary" onClick={this.handleUpdate}>Done</button>
-                        </div>
                     </div>
                 </div>
             </div>
-
         );
     }
 });
diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx
index 99327c22f..17a1e2bc2 100644
--- a/web/react/components/file_preview.jsx
+++ b/web/react/components/file_preview.jsx
@@ -10,7 +10,7 @@ var Constants = require('../utils/constants.jsx');
 module.exports = React.createClass({
     handleRemove: function(e) {
         var previewDiv = e.target.parentNode.parentNode;
-        this.props.onRemove(previewDiv.dataset.filename);
+        this.props.onRemove(previewDiv.getAttribute('data-filename'));
     },
     render: function() {
         var previews = [];
diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx
index 85df5f797..3b6f96c2d 100644
--- a/web/react/components/login.jsx
+++ b/web/react/components/login.jsx
@@ -37,7 +37,7 @@ var FindTeamDomain = React.createClass({
                     window.location.href = window.location.protocol + "//" + domain + "." + utils.getDomainWithOutSub();
                 }
                 else {
-                    this.state.server_error = "We couldn't find your " + strings.TeamPlural + ".";
+                    this.state.server_error = "We couldn't find your " + strings.Team + ".";
                     this.setState(this.state);
                 }
             }.bind(this),
diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 86a423138..3c33ddf49 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -6,10 +6,16 @@ module.exports = React.createClass({
         this.props.handleClick(this.props.username);
     },
     render: function() {
+        var icon;
+        if (this.props.id != null) {
+            icon = <span><img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/></span>;
+        } else {
+            icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
+        }
         return (
             <div className="mentions-name" onClick={this.handleClick}>
-                <img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/>
-                <span>@{this.props.username}</span><span className="mention-fullname">{this.props.name}</span>
+                <div className="pull-left">{icon}</div>
+                <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
             </div>
         );
     }
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 8b7e25b04..eb21e0efe 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -74,6 +74,18 @@ module.exports = React.createClass({
             users.push(profiles[id]);
         }
 
+        var all = {};
+        all.username = "all";
+        all.full_name = "";
+        all.secondary_text = "Notifies everyone in the team";
+        users.push(all);
+
+        var channel = {};
+        channel.username = "channel";
+        channel.full_name = "";
+        channel.secondary_text = "Notifies everyone in the channel";
+        users.push(channel);
+
         users.sort(function(a,b) {
             if (a.username < b.username) return -1;
             if (a.username > b.username) return 1;
@@ -91,6 +103,7 @@ module.exports = React.createClass({
                 var splitName = users[i].full_name.split(' ');
                 firstName = splitName[0].toLowerCase();
                 lastName = splitName.length > 1 ? splitName[splitName.length-1].toLowerCase() : "";
+                users[i].secondary_text = users[i].full_name;
             }
 
             if (firstName.lastIndexOf(mentionText,0) === 0
@@ -99,7 +112,7 @@ module.exports = React.createClass({
                     <Mention
                         ref={'mention' + index}
                         username={users[i].username}
-                        name={users[i].full_name}
+                        secondary_text={users[i].secondary_text}
                         id={users[i].id}
                         handleClick={this.handleClick} />
                 );
diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx
index 3079917ec..7d5ef4d33 100644
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -102,7 +102,7 @@ module.exports = React.createClass({
                     images.push(filenames[i]);
                 } else if (i < Constants.MAX_DISPLAY_FILES) {
                     postFiles.push(
-                        <div className="post-image__column custom-file" key={fileInfo.name}>
+                        <div className="post-image__column custom-file" key={fileInfo.name+i}>
                             <a href={fileInfo.path+"."+fileInfo.ext} download={fileInfo.name+"."+fileInfo.ext}>
                                 <div className={"file-icon "+utils.getIconClassName(type)}/>
                             </a>
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 37e3faef2..e37de8d88 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -356,6 +356,7 @@ module.exports = React.createClass({
                 var ui_name = channel.display_name
                 var members = ChannelStore.getCurrentExtraInfo().members;
                 var creator_name = "";
+                var userStyle = { color: UserStore.getCurrentUser().props.theme }
 
                 for (var i = 0; i < members.length; i++) {
                     if (members[i].roles.indexOf('admin') > -1) {
@@ -382,8 +383,18 @@ module.exports = React.createClass({
                             </p>
                         </div>
                     );
+                } else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
+                    more_messages = (
+                        <div className="channel-intro">
+                            <h4 className="channel-intro-title">Welcome</h4>
+                            <p>
+                                {"This is the start of " + ui_name + ", a channel for conversations you’d prefer out of more focused channels."}
+                                <br/>
+                                <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
+                            </p>
+                        </div>
+                    );
                 } else {
-                    var userStyle = { color: UserStore.getCurrentUser().props.theme }
                     var ui_type = channel.type === 'P' ? "private group" : "channel";
                     more_messages = (
                         <div className="channel-intro">
diff --git a/web/react/components/setting_item_max.jsx b/web/react/components/setting_item_max.jsx
index 03f05b0cf..b8b667e1a 100644
--- a/web/react/components/setting_item_max.jsx
+++ b/web/react/components/setting_item_max.jsx
@@ -13,7 +13,7 @@ module.exports = React.createClass({
                 <li className="col-sm-12 section-title">{this.props.title}</li>
                 <li className="col-sm-9 col-sm-offset-3">
                     <ul className="setting-list">
-                        <li className="row setting-list-item form-group">
+                        <li className="setting-list-item">
                             {inputs}
                         </li>
                         <li className="setting-list-item">
diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx
index c523ce554..22d1d9ad2 100644
--- a/web/react/components/sidebar_right_menu.jsx
+++ b/web/react/components/sidebar_right_menu.jsx
@@ -60,6 +60,7 @@ module.exports = React.createClass({
                 <div className="nav-pills__container">
                     <ul className="nav nav-pills nav-stacked">
                         <li><a href="#" data-toggle="modal" data-target="#user_settings1"><i className="glyphicon glyphicon-cog"></i>Account Settings</a></li>
+                        { isAdmin ? <li><a href="#" data-toggle="modal" data-target="#team_settings"><i className="glyphicon glyphicon-globe"></i>Team Settings</a></li> : "" }
                         { invite_link }
                         { team_link }
                         { manage_link }
diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx
index 30fe92af5..587d8cb82 100644
--- a/web/react/components/signup_team_complete.jsx
+++ b/web/react/components/signup_team_complete.jsx
@@ -164,7 +164,9 @@ TeamUrlPage = React.createClass({
         }
 
         var cleaned_name = utils.cleanUpUrlable(name);
-        if (cleaned_name != name) {
+
+        var urlRegex = /^[a-z0-9]+([a-z\-0-9]+|(__)?)[a-z0-9]+$/g;
+        if (cleaned_name != name || !urlRegex.test(name)) {
             this.setState({name_error: "Must be lowercase alphanumeric characters"});
             return;
         }
@@ -337,7 +339,7 @@ EmailItem = React.createClass({
             return false;
         }
         else if (email === teamEmail) {
-            this.state.email_error = "Please use an a different email than the one used at signup";
+            this.state.email_error = "Please use a different email than the one used at signup";
             this.setState(this.state);
             return false;
         }
diff --git a/web/react/components/team_settings.jsx b/web/react/components/team_settings.jsx
index 0cec30f3e..a43e5d2f0 100644
--- a/web/react/components/team_settings.jsx
+++ b/web/react/components/team_settings.jsx
@@ -113,7 +113,7 @@ var FeatureTab = React.createClass({
             <div>
                 <div className="modal-header">
                     <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                    <h4 className="modal-title" ref="title"><i className="modal-back"></i>General Settings</h4>
+                    <h4 className="modal-title" ref="title"><i className="modal-back"></i>Feature Settings</h4>
                 </div>
                 <div ref="wrapper" className="user-settings">
                     <h3 className="tab-header">Feature Settings</h3>
diff --git a/web/react/components/team_settings_modal.jsx b/web/react/components/team_settings_modal.jsx
index 08a952d2e..e50378b7f 100644
--- a/web/react/components/team_settings_modal.jsx
+++ b/web/react/components/team_settings_modal.jsx
@@ -45,7 +45,7 @@ module.exports = React.createClass({
                                 updateTab={this.updateTab}
                             />
                         </div>
-                        <div className="settings-content">
+                        <div className="settings-content minimize-settings">
                             <TeamSettings
                                 activeTab={this.state.active_tab}
                                 activeSection={this.state.active_section}
diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx
index 7a4762e07..934e863a2 100644
--- a/web/react/components/textbox.jsx
+++ b/web/react/components/textbox.jsx
@@ -153,7 +153,7 @@ module.exports = React.createClass({
         var mentions = [];
         for (var i = 0; i < matches.length; i++) {
             var m = matches[i].substring(1,matches[i].length).trim();
-            if (m in profileMap && mentions.indexOf(m) === -1) {
+            if ((m in profileMap && mentions.indexOf(m) === -1) || Constants.SPECIAL_MENTIONS.indexOf(m) !== -1) {
                 mentions.push(m);
             }
         }
diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index 7d542a8b7..f97a06db3 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -20,11 +20,10 @@ function getNotificationsStateFromStores() {
     var mention_key = false;
     var custom_keys = "";
     var first_name_key = false;
+    var all_key = false;
+    var channel_key = false;
 
-    if (!user.notify_props) {
-        mention_keys = user.username;
-        if (user.full_name.length > 0) mention_keys += ","+ user.full_name.split(" ")[0];
-    } else {
+    if (user.notify_props) {
         if (user.notify_props.mention_keys !== undefined) {
             var keys = user.notify_props.mention_keys.split(',');
 
@@ -48,9 +47,17 @@ function getNotificationsStateFromStores() {
         if (user.notify_props.first_name !== undefined) {
             first_name_key = user.notify_props.first_name === "true";
         }
+
+        if (user.notify_props.all !== undefined) {
+            all_key = user.notify_props.all === "true";
+        }
+
+        if (user.notify_props.channel !== undefined) {
+            channel_key = user.notify_props.channel === "true";
+        }
     }
 
-    return { notify_level: desktop, enable_email: email, enable_sound: sound, username_key: username_key, mention_key: mention_key, custom_keys: custom_keys, custom_keys_checked: custom_keys.length > 0, first_name_key: first_name_key };
+    return { notify_level: desktop, enable_email: email, enable_sound: sound, username_key: username_key, mention_key: mention_key, custom_keys: custom_keys, custom_keys_checked: custom_keys.length > 0, first_name_key: first_name_key, all_key: all_key, channel_key: channel_key };
 }
 
 
@@ -73,6 +80,8 @@ var NotificationsTab = React.createClass({
 
         data["mention_keys"] = string_keys;
         data["first_name"] = this.state.first_name_key ? "true" : "false";
+        data["all"] = this.state.all_key ? "true" : "false";
+        data["channel"] = this.state.channel_key ? "true" : "false";
 
         client.updateUserNotifyProps(data,
             function(data) {
@@ -120,6 +129,12 @@ var NotificationsTab = React.createClass({
     updateFirstNameKey: function(val) {
         this.setState({ first_name_key: val });
     },
+    updateAllKey: function(val) {
+        this.setState({ all_key: val });
+    },
+    updateChannelKey: function(val) {
+        this.setState({ channel_key: val });
+    },
     updateCustomMentionKeys: function() {
         var checked = this.refs.customcheck.getDOMNode().checked;
 
@@ -155,7 +170,7 @@ var NotificationsTab = React.createClass({
             var inputs = [];
 
             inputs.push(
-                <div className="col-sm-12">
+                <div>
                     <div className="radio">
                         <label>
                             <input type="radio" checked={notifyActive[0]} onClick={function(){self.handleNotifyRadio("all")}}>For all activity</input>
@@ -216,7 +231,7 @@ var NotificationsTab = React.createClass({
             var inputs = [];
 
             inputs.push(
-                <div className="col-sm-12">
+                <div>
                     <div className="btn-group" data-toggle="buttons-radio">
                         <button className={"btn btn-default "+soundActive[0]} onClick={function(){self.handleSoundRadio("true")}}>On</button>
                         <button className={"btn btn-default "+soundActive[1]} onClick={function(){self.handleSoundRadio("false")}}>Off</button>
@@ -262,7 +277,7 @@ var NotificationsTab = React.createClass({
             var inputs = [];
 
             inputs.push(
-                <div className="col-sm-12">
+                <div>
                     <div className="btn-group" data-toggle="buttons-radio">
                         <button className={"btn btn-default "+emailActive[0]} onClick={function(){self.handleEmailRadio("true")}}>On</button>
                         <button className={"btn btn-default "+emailActive[1]} onClick={function(){self.handleEmailRadio("false")}}>Off</button>
@@ -309,7 +324,7 @@ var NotificationsTab = React.createClass({
 
             if (first_name != "") {
                 inputs.push(
-                    <div className="col-sm-12">
+                    <div>
                         <div className="checkbox">
                             <label>
                                 <input type="checkbox" checked={this.state.first_name_key} onChange={function(e){self.updateFirstNameKey(e.target.checked);}}>{'Your case sensitive first name "' + first_name + '"'}</input>
@@ -320,7 +335,7 @@ var NotificationsTab = React.createClass({
             }
 
             inputs.push(
-                <div className="col-sm-12">
+                <div>
                     <div className="checkbox">
                         <label>
                             <input type="checkbox" checked={this.state.username_key} onChange={function(e){self.updateUsernameKey(e.target.checked);}}>{'Your non-case sensitive username "' + user.username + '"'}</input>
@@ -330,7 +345,7 @@ var NotificationsTab = React.createClass({
             );
 
             inputs.push(
-                <div className="col-sm-12">
+                <div>
                     <div className="checkbox">
                         <label>
                             <input type="checkbox" checked={this.state.mention_key} onChange={function(e){self.updateMentionKey(e.target.checked);}}>{'Your username mentioned "@' + user.username + '"'}</input>
@@ -340,7 +355,27 @@ var NotificationsTab = React.createClass({
             );
 
             inputs.push(
-                <div className="col-sm-12">
+                <div>
+                    <div className="checkbox">
+                        <label>
+                            <input type="checkbox" checked={this.state.all_key} onChange={function(e){self.updateAllKey(e.target.checked);}}>{'Team-wide mentions "@all"'}</input>
+                        </label>
+                    </div>
+                </div>
+            );
+
+            inputs.push(
+                <div>
+                    <div className="checkbox">
+                        <label>
+                            <input type="checkbox" checked={this.state.channel_key} onChange={function(e){self.updateChannelKey(e.target.checked);}}>{'Channel-wide mentions "@channel"'}</input>
+                        </label>
+                    </div>
+                </div>
+            );
+
+            inputs.push(
+                <div>
                     <div className="checkbox">
                         <label>
                             <input ref="customcheck" type="checkbox" checked={this.state.custom_keys_checked} onChange={this.updateCustomMentionKeys}>{'Other non-case sensitive words, separated by commas:'}</input>
@@ -369,6 +404,8 @@ var NotificationsTab = React.createClass({
             }
             if (this.state.username_key) keys.push(this.props.user.username);
             if (this.state.mention_key) keys.push('@'+this.props.user.username);
+            if (this.state.all_key) keys.push('@all');
+            if (this.state.channel_key) keys.push('@channel');
             if (this.state.custom_keys.length > 0) keys = keys.concat(this.state.custom_keys.split(','));
 
             var describe = "";
@@ -622,7 +659,7 @@ var SecurityTab = React.createClass({
             var inputs = [];
 
             inputs.push(
-                <div>
+                <div className="form-group">
                     <label className="col-sm-5 control-label">Current Password</label>
                     <div className="col-sm-7">
                         <input className="form-control" type="password" onChange={this.updateCurrentPassword} value={this.state.current_password}/>
@@ -630,7 +667,7 @@ var SecurityTab = React.createClass({
                 </div>
             );
             inputs.push(
-                <div>
+                <div className="form-group">
                     <label className="col-sm-5 control-label">New Password</label>
                     <div className="col-sm-7">
                         <input className="form-control" type="password" onChange={this.updateNewPassword} value={this.state.new_password}/>
@@ -638,7 +675,7 @@ var SecurityTab = React.createClass({
                 </div>
             );
             inputs.push(
-                <div>
+                <div className="form-group">
                     <label className="col-sm-5 control-label">Retype New Password</label>
                     <div className="col-sm-7">
                         <input className="form-control" type="password" onChange={this.updateConfirmPassword} value={this.state.confirm_password}/>
@@ -837,7 +874,7 @@ var GeneralTab = React.createClass({
             var inputs = [];
 
             inputs.push(
-                <div>
+                <div className="form-group">
                     <label className="col-sm-5 control-label">First Name</label>
                     <div className="col-sm-7">
                         <input className="form-control" type="text" onChange={this.updateFirstName} value={this.state.first_name}/>
@@ -846,7 +883,7 @@ var GeneralTab = React.createClass({
             );
 
             inputs.push(
-                <div>
+                <div className="form-group">
                     <label className="col-sm-5 control-label">Last Name</label>
                     <div className="col-sm-7">
                         <input className="form-control" type="text" onChange={this.updateLastName} value={this.state.last_name}/>
@@ -879,7 +916,7 @@ var GeneralTab = React.createClass({
             var inputs = [];
 
             inputs.push(
-                <div>
+                <div className="form-group">
                     <label className="col-sm-5 control-label">{utils.isMobile() ? "": "Username"}</label>
                     <div className="col-sm-7">
                         <input className="form-control" type="text" onChange={this.updateUsername} value={this.state.username}/>
@@ -911,7 +948,7 @@ var GeneralTab = React.createClass({
             var inputs = [];
 
             inputs.push(
-                <div>
+                <div className="form-group">
                     <label className="col-sm-5 control-label">Primary Email</label>
                     <div className="col-sm-7">
                         <input className="form-control" type="text" onChange={this.updateEmail} value={this.state.email}/>
@@ -1048,7 +1085,7 @@ var AppearanceTab = React.createClass({
                 var inputs = [];
 
                 inputs.push(
-                    <li className="row setting-list-item form-group">
+                    <li className="setting-list-item">
                         <div className="btn-group" data-toggle="buttons-radio">
                             { theme_buttons }
                         </div>
diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx
index ff001611d..1761e575a 100644
--- a/web/react/components/user_settings_modal.jsx
+++ b/web/react/components/user_settings_modal.jsx
@@ -50,7 +50,7 @@ module.exports = React.createClass({
                                 updateTab={this.updateTab}
                             />
                         </div>
-                        <div className="settings-content">
+                        <div className="settings-content minimize-settings">
                             <UserSettings
                                 activeTab={this.state.active_tab}
                                 activeSection={this.state.active_section}