PLT-3508/PLT-3516/PLT-3558/PLT-3570/PLT-3497 Multiple UI Improvements (#3553)

* PLT-3627 - Fixing spacing in RHS

* PLT-3516 - Fixing errors in backstage

* PLT-3558 - Fixing system console menu on small screens

* PLT-3570 - Fixing account settings sidebar truncating issue

* PLT-3497 - Moving see other themes link

* Removing formatted message import from premade theme chooser

7 files changed, 46 insertions, 21 deletions

diff --git a/webapp/components/emoji/components/add_emoji.jsx b/webapp/components/emoji/components/add_emoji.jsx
index 46f345476..c3d61d32c 100644
--- a/webapp/components/emoji/components/add_emoji.jsx
+++ b/webapp/components/emoji/components/add_emoji.jsx
@@ -277,7 +277,10 @@ export default class AddEmoji extends React.Component {
                         </div>
                         {preview}
                         <div className='backstage-form__footer'>
-                            <FormError error={this.state.error}/>
+                            <FormError
+                                type='backstage'
+                                error={this.state.error}
+                            />
                             <Link
                                 className='btn btn-sm'
                                 to={'/' + this.props.team.name + '/emoji'}
diff --git a/webapp/components/form_error.jsx b/webapp/components/form_error.jsx
index 047595ef2..df6fa3ab0 100644
--- a/webapp/components/form_error.jsx
+++ b/webapp/components/form_error.jsx
@@ -7,6 +7,7 @@ export default class FormError extends React.Component {
     static get propTypes() {
         // accepts either a single error or an array of errors
         return {
+            type: React.PropTypes.node,
             error: React.PropTypes.node,
             margin: React.PropTypes.node,
             errors: React.PropTypes.arrayOf(React.PropTypes.node)
@@ -40,6 +41,16 @@ export default class FormError extends React.Component {
             return null;
         }
 
+        if (this.props.type === 'backstage') {
+            return (
+                <div className='pull-left has-error'>
+                    <label className='control-label'>
+                        {message}
+                    </label>
+                </div>
+            );
+        }
+
         if (this.props.margin) {
             return (
                 <div className='form-group has-error'>
diff --git a/webapp/components/integrations/components/add_command.jsx b/webapp/components/integrations/components/add_command.jsx
index cf563875b..d24acd70d 100644
--- a/webapp/components/integrations/components/add_command.jsx
+++ b/webapp/components/integrations/components/add_command.jsx
@@ -537,7 +537,10 @@ export default class AddCommand extends React.Component {
                         </div>
                         {autocompleteFields}
                         <div className='backstage-form__footer'>
-                            <FormError errors={[this.state.serverError, this.state.clientError]}/>
+                            <FormError
+                                type='backstage'
+                                errors={[this.state.serverError, this.state.clientError]}
+                            />
                             <Link
                                 className='btn btn-sm'
                                 to={'/' + this.props.team.name + '/integrations/commands'}
diff --git a/webapp/components/integrations/components/add_incoming_webhook.jsx b/webapp/components/integrations/components/add_incoming_webhook.jsx
index 122600c90..a213a805f 100644
--- a/webapp/components/integrations/components/add_incoming_webhook.jsx
+++ b/webapp/components/integrations/components/add_incoming_webhook.jsx
@@ -186,7 +186,10 @@ export default class AddIncomingWebhook extends React.Component {
                             </div>
                         </div>
                         <div className='backstage-form__footer'>
-                            <FormError errors={[this.state.serverError, this.state.clientError]}/>
+                            <FormError
+                                type='backstage'
+                                errors={[this.state.serverError, this.state.clientError]}
+                            />
                             <Link
                                 className='btn btn-sm'
                                 to={'/' + this.props.team.name + '/integrations/incoming_webhooks'}
diff --git a/webapp/components/integrations/components/add_outgoing_webhook.jsx b/webapp/components/integrations/components/add_outgoing_webhook.jsx
index bd49fedc9..d6c0242a5 100644
--- a/webapp/components/integrations/components/add_outgoing_webhook.jsx
+++ b/webapp/components/integrations/components/add_outgoing_webhook.jsx
@@ -319,7 +319,10 @@ export default class AddOutgoingWebhook extends React.Component {
                             </div>
                         </div>
                         <div className='backstage-form__footer'>
-                            <FormError errors={[this.state.serverError, this.state.clientError]}/>
+                            <FormError
+                                type='backstage'
+                                errors={[this.state.serverError, this.state.clientError]}
+                            />
                             <Link
                                 className='btn btn-sm'
                                 to={'/' + this.props.team.name + '/integrations/outgoing_webhooks'}
diff --git a/webapp/components/user_settings/premade_theme_chooser.jsx b/webapp/components/user_settings/premade_theme_chooser.jsx
index 9552c686d..03ea56449 100644
--- a/webapp/components/user_settings/premade_theme_chooser.jsx
+++ b/webapp/components/user_settings/premade_theme_chooser.jsx
@@ -7,8 +7,6 @@ import Constants from 'utils/constants.jsx';
 
 import React from 'react';
 
-import {FormattedMessage} from 'react-intl';
-
 export default class PremadeThemeChooser extends React.Component {
     constructor(props) {
         super(props);
@@ -54,20 +52,6 @@ export default class PremadeThemeChooser extends React.Component {
                 <div className='clearfix'>
                     {premadeThemes}
                 </div>
-                <div className='clearfix'>
-                    <div className='col-sm-12 padding-bottom x2'>
-                        <a
-                            href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples'
-                            target='_blank'
-                            rel='noopener noreferrer'
-                        >
-                            <FormattedMessage
-                                id='user.settings.display.theme.otherThemes'
-                                defaultMessage='See other themes'
-                            />
-                        </a>
-                    </div>
-                </div>
             </div>
         );
     }
diff --git a/webapp/components/user_settings/user_settings_theme.jsx b/webapp/components/user_settings/user_settings_theme.jsx
index 4ff08402a..d12a7689a 100644
--- a/webapp/components/user_settings/user_settings_theme.jsx
+++ b/webapp/components/user_settings/user_settings_theme.jsx
@@ -257,9 +257,27 @@ export default class ThemeSetting extends React.Component {
             inputs.push(custom);
 
             inputs.push(
-                <div key='importSlackThemeButton'>
+                <div>
                     <br/>
                     <a
+                        href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples'
+                        target='_blank'
+                        rel='noopener noreferrer'
+                    >
+                        <FormattedMessage
+                            id='user.settings.display.theme.otherThemes'
+                            defaultMessage='See other themes'
+                        />
+                    </a>
+                </div>
+            );
+
+            inputs.push(
+                <div
+                    key='importSlackThemeButton'
+                    className='padding-top'
+                >
+                    <a
                         className='theme'
                         onClick={this.handleImportModal}
                     >