1 files changed, 42 insertions, 7 deletions

diff --git a/web/react/components/user_settings_general.jsx b/web/react/components/user_settings_general.jsx
index ead7ac1d5..184534a9a 100644
--- a/web/react/components/user_settings_general.jsx
+++ b/web/react/components/user_settings_general.jsx
@@ -238,7 +238,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                     key='firstNameSetting'
                     className='form-group'
                 >
-                    <label className='col-sm-5 control-label'>First Name</label>
+                    <label className='col-sm-5 control-label'>{'First Name'}</label>
                     <div className='col-sm-7'>
                         <input
                             className='form-control'
@@ -255,7 +255,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                     key='lastNameSetting'
                     className='form-group'
                 >
-                    <label className='col-sm-5 control-label'>Last Name</label>
+                    <label className='col-sm-5 control-label'>{'Last Name'}</label>
                     <div className='col-sm-7'>
                         <input
                             className='form-control'
@@ -267,6 +267,28 @@ export default class UserSettingsGeneralTab extends React.Component {
                 </div>
             );
 
+            function notifClick(e) {
+                e.preventDefault();
+                this.updateSection('');
+                this.props.updateTab('notifications');
+            }
+
+            const notifLink = (
+                <a
+                    href='#'
+                    onClick={notifClick.bind(this)}
+                >
+                    {'Notifications'}
+                </a>
+            );
+
+            const extraInfo = (
+                <span>
+                    {'By default, you will receive mention notifications when someone types your first name. '}
+                    {'Go to '} {notifLink} {'settings to change this default.'}
+                </span>
+            );
+
             nameSection = (
                 <SettingItemMax
                     title='Full Name'
@@ -278,6 +300,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                         this.updateSection('');
                         e.preventDefault();
                     }.bind(this)}
+                    extraInfo={extraInfo}
                 />
             );
         } else {
@@ -326,6 +349,13 @@ export default class UserSettingsGeneralTab extends React.Component {
                 </div>
             );
 
+            const extraInfo = (
+                <span>
+                    {'Use Nickname for a name you might be called that is different from your first name and user name.'}
+                    {'This is most often used when two or more people have similar sounding names and usernames.'}
+                </span>
+            );
+
             nicknameSection = (
                 <SettingItemMax
                     title='Nickname'
@@ -337,6 +367,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                         this.updateSection('');
                         e.preventDefault();
                     }.bind(this)}
+                    extraInfo={extraInfo}
                 />
             );
         } else {
@@ -375,6 +406,8 @@ export default class UserSettingsGeneralTab extends React.Component {
                 </div>
             );
 
+            const extraInfo = (<span>{'Pick something easy for teammates to recognize and recall.'}</span>);
+
             usernameSection = (
                 <SettingItemMax
                     title='Username'
@@ -386,6 +419,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                         this.updateSection('');
                         e.preventDefault();
                     }.bind(this)}
+                    extraInfo={extraInfo}
                 />
             );
         } else {
@@ -404,13 +438,13 @@ export default class UserSettingsGeneralTab extends React.Component {
             let helpText = <div>Email is used for notifications, and requires verification if changed.</div>;
 
             if (!this.state.emailEnabled) {
-                helpText = <div className='text-danger'><br />Email has been disabled by your system administrator. No notification emails will be sent until it is enabled.</div>;
+                helpText = <div className='setting-list__hint text-danger'>{'Email has been disabled by your system administrator. No notification emails will be sent until it is enabled.'}</div>;
             }
 
             inputs.push(
                 <div key='emailSetting'>
                     <div className='form-group'>
-                        <label className='col-sm-5 control-label'>Primary Email</label>
+                        <label className='col-sm-5 control-label'>{'Primary Email'}</label>
                         <div className='col-sm-7'>
                             <input
                                 className='form-control'
@@ -492,18 +526,18 @@ export default class UserSettingsGeneralTab extends React.Component {
                         data-dismiss='modal'
                         aria-label='Close'
                     >
-                        <span aria-hidden='true'>&times;</span>
+                        <span aria-hidden='true'>{'×'}</span>
                     </button>
                     <h4
                         className='modal-title'
                         ref='title'
                     >
                         <i className='modal-back'></i>
-                        General Settings
+                        {'General Settings'}
                     </h4>
                 </div>
                 <div className='user-settings'>
-                    <h3 className='tab-header'>General Settings</h3>
+                    <h3 className='tab-header'>{'General Settings'}</h3>
                     <div className='divider-dark first'/>
                     {nameSection}
                     <div className='divider-light'/>
@@ -524,5 +558,6 @@ export default class UserSettingsGeneralTab extends React.Component {
 UserSettingsGeneralTab.propTypes = {
     user: React.PropTypes.object,
     updateSection: React.PropTypes.func,
+    updateTab: React.PropTypes.func,
     activeSection: React.PropTypes.string
 };