3 files changed, 62 insertions, 9 deletions

diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index 282fb7681..2a607b3e0 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -40,6 +40,7 @@ export default class UserSettings extends React.Component {
                         user={this.state.user}
                         activeSection={this.props.activeSection}
                         updateSection={this.props.updateSection}
+                        updateTab={this.props.updateTab}
                     />
                 </div>
             );
@@ -86,4 +87,4 @@ UserSettings.propTypes = {
     activeSection: React.PropTypes.string,
     updateSection: React.PropTypes.func,
     updateTab: React.PropTypes.func
-};
\ No newline at end of file
+};
diff --git a/web/react/components/user_settings_general.jsx b/web/react/components/user_settings_general.jsx
index ead7ac1d5..f2127ce0c 100644
--- a/web/react/components/user_settings_general.jsx
+++ b/web/react/components/user_settings_general.jsx
@@ -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 {
@@ -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
 };
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 682809f02..c56625b88 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -243,6 +243,23 @@
     }
 }
 @media screen and (max-width: 768px) {
+    .file-details__container {
+        display: block;
+        .file-details__preview {
+            display: block;
+            width: 100%;
+            height: 150px;
+            border-right: none;
+            border-bottom: 1px solid #ddd;
+            img {
+                width: 64px;
+                height: 64px;
+            }
+        }
+        .file-details {
+            height: auto;
+        }
+    }
     .center-file-overlay {
         font-size: 1.3em;
     }
@@ -405,23 +422,23 @@
             margin-top: 0;
         }
         .remove-preview {
-            width: 50px;
-            height: 50px;
-            left: 50%;
-            top: 50%;
+            width: 28px;
+            height: 28px;
+            left: auto;
+            right: 0;
+            top: 0;
             background: #444;
-            margin: -25px 0 0 -25px;
-            @include border-radius(50px);
+            background: rgba(#000, 0.5);
             text-align: center;
             &:after {
                 display: none;
             }
             i {
-                line-height: 50px;
+                line-height: 29px;
                 top: auto;
                 right: auto;
                 position: relative;
-                font-size: 28px;
+                font-size: 16px;
             }
         }
     }