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

10 files changed, 211 insertions, 155 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}
                     >
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index f1fe0cac3..3ee4fe025 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -1,156 +1,154 @@
 @charset 'UTF-8';
 
-.app__body {
-    .post-right__container {
-        @include display-flex;
-        @include flex-direction(column);
-        height: 100%;
-
-        .post-right-root-message {
-            padding: 1em 1em 0;
-        }
-
-        .post-right-comments-container {
-            position: relative;
+.post-right__container {
+    @include display-flex;
+    @include flex-direction(column);
+    height: 100%;
 
-            .post {
-                &:first-child {
-                    padding-top: 15px;
-                }
-            }
-        }
+    .post-right-root-message {
+        padding: 1em 1em 0;
+    }
 
+    .post-right-comments-container {
+        position: relative;
 
-        .help_format_text {
-            bottom: -63px;
-            right: auto;
+        .post {
+            &:first-child {
+                padding-top: 15px;
+            }
         }
+    }
 
-        .post {
-            &.post--root {
-                border-bottom: 1px solid #ddd;
-                padding-bottom: 1em;
 
-                .post__body {
-                    background: transparent !important;
-                }
-            }
+    .help_format_text {
+        bottom: -63px;
+        right: auto;
+    }
 
-            .post__header {
-                .col__reply {
-                    background: transparent !important;
-                    border: none !important;
-                    text-align: right;
-                    top: 0;
-                }
-            }
+    .post {
+        &.post--root {
+            border-bottom: 1px solid #ddd;
+            padding-bottom: 1em;
 
             .post__body {
-                width: 100%;
+                background: transparent !important;
             }
         }
 
-        hr {
-            border: none;
-            margin-bottom: 0;
+        .post__header {
+            .col__reply {
+                background: transparent !important;
+                border: none !important;
+                text-align: right;
+                top: 0;
+            }
         }
 
-        .post-create__container {
+        .post__body {
             width: 100%;
+        }
+    }
 
-            .textarea-wrapper {
-                min-height: 100px;
-            }
-
-            .btn {
-                margin-bottom: 10px;
-            }
+    hr {
+        border: none;
+        margin-bottom: 0;
+    }
 
-            .custom-textarea {
-                min-height: 100px;
-            }
+    .post-create__container {
+        width: 100%;
 
-            .msg-typing {
-                @include opacity(.7);
-                display: block;
-                float: left;
-                font-size: 13px;
-                height: 20px;
-                line-height: 20px;
-                margin-top: 3px;
-                max-width: 230px;
-                min-width: 1px;
-            }
+        .textarea-wrapper {
+            min-height: 100px;
+        }
 
-            .post-create-footer {
-                padding: 5px 0 10px;
-                width: 100%;
-            }
+        .btn {
+            margin-bottom: 10px;
+        }
 
-            .post-right-comments-upload-in-progress {
-                color: #a8adb7;
-                margin-right: 10px;
-                padding: 6px 0;
-            }
+        .custom-textarea {
+            min-height: 100px;
         }
-    }
 
-    .post-right-header {
-        border-bottom: $border-gray;
-        color: #999;
-        font-size: 1em;
-        font-weight: 400;
-        height: 39px;
-        padding: 10px 10px 0 15px;
-        text-transform: uppercase;
-    }
+        .msg-typing {
+            @include opacity(.7);
+            display: block;
+            float: left;
+            font-size: 13px;
+            height: 20px;
+            line-height: 20px;
+            margin-top: 3px;
+            max-width: 230px;
+            min-width: 1px;
+        }
 
-    .post-right-root-container {
-        border-bottom: $border-gray;
-        padding: 5px 10px;
+        .post-create-footer {
+            padding: 5px 0 10px;
+            width: 100%;
+        }
 
-        ul {
-            margin-bottom: 2px;
-            padding-left: 0;
+        .post-right-comments-upload-in-progress {
+            color: #a8adb7;
+            margin-right: 10px;
+            padding: 6px 0;
         }
     }
+}
 
-    .post-right-channel__name {
-        font-weight: 600;
-        margin: 0 0 15px;
-    }
+.post-right-header {
+    border-bottom: $border-gray;
+    color: #999;
+    font-size: 1em;
+    font-weight: 400;
+    height: 39px;
+    padding: 10px 10px 0 15px;
+    text-transform: uppercase;
+}
 
-    .post-right-root-container li {
-        display: inline;
-        list-style-type: none;
-        padding-right: 3px;
-    }
+.post-right-root-container {
+    border-bottom: $border-gray;
+    padding: 5px 10px;
 
-    .post-right-root-time {
-        color: #a8adb7;
+    ul {
+        margin-bottom: 2px;
+        padding-left: 0;
     }
+}
 
-    .post-right-create-comment-container {
-        bottom: 0;
-        left: 0;
-        margin-bottom: 18px;
-        padding: 5px;
-        position: absolute;
-        width: 100%;
-    }
+.post-right-channel__name {
+    font-weight: 600;
+    margin: 0 0 15px;
+}
 
-    .post-right__scroll {
-        @include flex(1 1 auto);
-        -webkit-overflow-scrolling: touch;
-        overflow: auto;
-        position: relative;
+.post-right-root-container li {
+    display: inline;
+    list-style-type: none;
+    padding-right: 3px;
+}
 
-        .file-preview__container {
-            margin-top: 5px;
-        }
-    }
+.post-right-root-time {
+    color: #a8adb7;
+}
+
+.post-right-create-comment-container {
+    bottom: 0;
+    left: 0;
+    margin-bottom: 18px;
+    padding: 5px;
+    position: absolute;
+    width: 100%;
+}
 
-    .post-right-comment-time {
-        color: #a8adb7;
+.post-right__scroll {
+    -webkit-overflow-scrolling: touch;
+    @include flex(1 1 auto);
+    overflow: auto;
+    position: relative;
+
+    .file-preview__container {
+        margin-top: 5px;
     }
 }
+
+.post-right-comment-time {
+    color: #a8adb7;
+}
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 9db962ec1..fcbf23b1c 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -493,14 +493,6 @@
     }
 
     .post-create__container {
-        .post-right__container & {
-            padding: 0 1em;
-
-            .msg-typing {
-                display: none;
-            }
-        }
-
         form {
             padding: .5em 0;
         }
@@ -524,6 +516,7 @@
             .post-body__cell {
                 display: table-cell;
                 padding-left: 45px;
+
                 .sidebar--right & {
                     padding-left: 0;
                 }
@@ -531,12 +524,12 @@
 
             .app__content & {
                 .btn-file {
-                    width: 45px;
-                    padding: 0;
-                    line-height: 36px;
                     bottom: -2px;
                     left: 0;
+                    line-height: 36px;
+                    padding: 0;
                     top: auto;
+                    width: 45px;
                 }
             }
 
@@ -576,6 +569,24 @@
         }
     }
 
+    // Since system console is not responsive we're overriding bootstrap styles for it
+    .admin-sidebar {
+        .navbar-nav {
+            margin-top: 0;
+
+            > li {
+                float: left;
+            }
+
+            .dropdown-menu {
+                background: $white;
+                left: auto;
+                position: absolute;
+                right: 0;
+            }
+        }
+    }
+
     #navbar {
         .navbar-default {
             .navbar-header {
@@ -802,6 +813,25 @@
         right: 0;
         width: 100%;
 
+        .post-create__container {
+            form {
+                padding: .5em 1em;
+            }
+
+            .msg-typing:empty {
+                display: none;
+            }
+
+            .post-create-footer {
+                padding: 1em 0;
+
+                .control-label {
+                    margin: .5em 0;
+                    top: 0;
+                }
+            }
+        }
+
         .sidebar__collapse,
         .sidebar__search-icon {
             display: block;
@@ -871,8 +901,8 @@
     }
 
     .app__content {
-        padding-top: 45px;
         margin: 0;
+        padding-top: 45px;
 
         .channel__wrap & {
             padding-top: 45px;
diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss
index 501c20e20..36a1acf76 100644
--- a/webapp/sass/routes/_settings.scss
+++ b/webapp/sass/routes/_settings.scss
@@ -171,6 +171,9 @@
                         .theme-label {
                             font-weight: 400;
                             margin-top: 5px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
                         }
 
                         img {
@@ -343,7 +346,10 @@
             a {
                 border-radius: 0;
                 color: $gray;
-                padding: 8px 5px 8px 15px;
+                overflow: hidden;
+                padding: 8px 15px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
             }
 
             .icon {
@@ -382,10 +388,7 @@
                     @include alpha-property(background-color, $black, .1);
                     border-radius: 0;
                     font-weight: 400;
-                    overflow: hidden;
                     position: relative;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
                 }
             }
         }