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

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'}

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'>

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'}

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'}

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'}

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>
         );
     }

webapp/components/user_settings/user_settings_theme.jsx

@@ -257,8 +257,26 @@ 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}

webapp/sass/layout/_post-right.scss

@@ -1,7 +1,6 @@
 @charset 'UTF-8';
 
-.app__body {
+.post-right__container {
-    .post-right__container {
     @include display-flex;
     @include flex-direction(column);
     height: 100%;
@@ -93,9 +92,9 @@
             padding: 6px 0;
         }
     }
-    }
+}
 
-    .post-right-header {
+.post-right-header {
     border-bottom: $border-gray;
     color: #999;
     font-size: 1em;
@@ -103,9 +102,9 @@
     height: 39px;
     padding: 10px 10px 0 15px;
     text-transform: uppercase;
-    }
+}
 
-    .post-right-root-container {
+.post-right-root-container {
     border-bottom: $border-gray;
     padding: 5px 10px;
 
@@ -113,44 +112,43 @@
         margin-bottom: 2px;
         padding-left: 0;
     }
-    }
+}
 
-    .post-right-channel__name {
+.post-right-channel__name {
     font-weight: 600;
     margin: 0 0 15px;
-    }
+}
 
-    .post-right-root-container li {
+.post-right-root-container li {
     display: inline;
     list-style-type: none;
     padding-right: 3px;
-    }
+}
 
-    .post-right-root-time {
+.post-right-root-time {
     color: #a8adb7;
-    }
+}
 
-    .post-right-create-comment-container {
+.post-right-create-comment-container {
     bottom: 0;
     left: 0;
     margin-bottom: 18px;
     padding: 5px;
     position: absolute;
     width: 100%;
-    }
+}
 
-    .post-right__scroll {
+.post-right__scroll {
-        @include flex(1 1 auto);
     -webkit-overflow-scrolling: touch;
+    @include flex(1 1 auto);
     overflow: auto;
     position: relative;
 
     .file-preview__container {
         margin-top: 5px;
     }
-    }
+}
-
+
-    .post-right-comment-time {
+.post-right-comment-time {
-        color: #a8adb7;
+    color: #a8adb7;
-    }
 }

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;

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;
                 }
             }
         }