Multiple UI Improvements

* Multiple UI Improvements

* Adding app_body behind missing classes

7 files changed, 78 insertions, 81 deletions

diff --git a/webapp/components/backstage/add_command.jsx b/webapp/components/backstage/add_command.jsx
index 93ff66271..b6f01b4d8 100644
--- a/webapp/components/backstage/add_command.jsx
+++ b/webapp/components/backstage/add_command.jsx
@@ -185,7 +185,7 @@ export default class AddCommand extends React.Component {
                     className='form-group'
                 >
                     <label
-                        className='control-label col-sm-3'
+                        className='control-label col-sm-4'
                         htmlFor='autocompleteHint'
                     >
                         <FormattedMessage
@@ -193,7 +193,7 @@ export default class AddCommand extends React.Component {
                             defaultMessage='Autocomplete Hint'
                         />
                     </label>
-                    <div className='col-md-5 col-sm-9'>
+                    <div className='col-md-5 col-sm-8'>
                         <input
                             id='autocompleteHint'
                             type='text'
@@ -203,7 +203,7 @@ export default class AddCommand extends React.Component {
                             onChange={this.updateAutocompleteHint}
                             placeholder={Utils.localizeMessage('add_command.autocompleteHint.placeholder', 'Example: [Patient Name]')}
                         />
-                        <div className='add-integration__help'>
+                        <div className='form__help'>
                             <FormattedMessage
                                 id='add_command.autocompleteDescription.help'
                                 defaultMessage='Optional hint in the autocomplete list about command parameters'
@@ -218,7 +218,7 @@ export default class AddCommand extends React.Component {
                     className='form-group'
                 >
                     <label
-                        className='control-label col-sm-3'
+                        className='control-label col-sm-4'
                         htmlFor='autocompleteDescription'
                     >
                         <FormattedMessage
@@ -226,7 +226,7 @@ export default class AddCommand extends React.Component {
                             defaultMessage='Autocomplete Description'
                         />
                     </label>
-                    <div className='col-md-5 col-sm-9'>
+                    <div className='col-md-5 col-sm-8'>
                         <input
                             id='description'
                             type='text'
@@ -236,7 +236,7 @@ export default class AddCommand extends React.Component {
                             onChange={this.updateAutocompleteDescription}
                             placeholder={Utils.localizeMessage('add_command.autocompleteDescription.placeholder', 'Example: "Returns search results for patient records"')}
                         />
-                        <div className='add-integration__help'>
+                        <div className='form__help'>
                             <FormattedMessage
                                 id='add_command.autocompleteDescription.help'
                                 defaultMessage='Optional short description of slash command for the autocomplete list.'
@@ -263,7 +263,7 @@ export default class AddCommand extends React.Component {
                     <form className='form-horizontal'>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='displayName'
                             >
                                 <FormattedMessage
@@ -271,7 +271,7 @@ export default class AddCommand extends React.Component {
                                     defaultMessage='Display Name'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <input
                                     id='displayName'
                                     type='text'
@@ -284,7 +284,7 @@ export default class AddCommand extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='description'
                             >
                                 <FormattedMessage
@@ -292,7 +292,7 @@ export default class AddCommand extends React.Component {
                                     defaultMessage='Description'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <input
                                     id='description'
                                     type='text'
@@ -305,7 +305,7 @@ export default class AddCommand extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='trigger'
                             >
                                 <FormattedMessage
@@ -313,7 +313,7 @@ export default class AddCommand extends React.Component {
                                     defaultMessage='Command Trigger Word'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <input
                                     id='trigger'
                                     type='text'
@@ -323,13 +323,13 @@ export default class AddCommand extends React.Component {
                                     onChange={this.updateTrigger}
                                     placeholder={Utils.localizeMessage('add_command.trigger.placeholder', 'Command trigger e.g. "hello" not including the slash')}
                                 />
-                                <div className='add-integration__help'>
+                                <div className='form__help'>
                                     <FormattedMessage
                                         id='add_command.trigger.help1'
                                         defaultMessage='Examples: /patient, /client /employee'
                                     />
                                 </div>
-                                <div className='add-integration__help'>
+                                <div className='form__help'>
                                     <FormattedMessage
                                         id='add_command.trigger.help2'
                                         defaultMessage='Reserved: /echo, /join, /logout, /me, /shrug'
@@ -339,7 +339,7 @@ export default class AddCommand extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='url'
                             >
                                 <FormattedMessage
@@ -347,7 +347,7 @@ export default class AddCommand extends React.Component {
                                     defaultMessage='Request URL'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <input
                                     id='url'
                                     type='text'
@@ -357,7 +357,7 @@ export default class AddCommand extends React.Component {
                                     onChange={this.updateUrl}
                                     placeholder={Utils.localizeMessage('add_command.url.placeholder', 'Must start with http:// or https://')}
                                 />
-                                <div className='add-integration__help'>
+                                <div className='form__help'>
                                     <FormattedMessage
                                         id='add_command.url.help'
                                         defaultMessage='The callback URL to receive the HTTP POST or GET event request when the slash command is run.'
@@ -367,7 +367,7 @@ export default class AddCommand extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='method'
                             >
                                 <FormattedMessage
@@ -375,7 +375,7 @@ export default class AddCommand extends React.Component {
                                     defaultMessage='Request Method'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <select
                                     id='method'
                                     className='form-control'
@@ -389,7 +389,7 @@ export default class AddCommand extends React.Component {
                                         {Utils.localizeMessage('add_command.method.get', 'GET')}
                                     </option>
                                 </select>
-                                <div className='add-integration__help'>
+                                <div className='form__help'>
                                     <FormattedMessage
                                         id='add_command.method.help'
                                         defaultMessage='The type of command request issued to the Request URL.'
@@ -399,7 +399,7 @@ export default class AddCommand extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-lavel col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='username'
                             >
                                 <FormattedMessage
@@ -407,7 +407,7 @@ export default class AddCommand extends React.Component {
                                     defaultMessage='Response Username'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <input
                                     id='username'
                                     type='text'
@@ -417,7 +417,7 @@ export default class AddCommand extends React.Component {
                                     onChange={this.updateUsername}
                                     placholder={Utils.localizeMessage('add_command.username.placeholder', 'Username')}
                                 />
-                                <div className='add-integration__help'>
+                                <div className='form__help'>
                                     <FormattedMessage
                                         id='add_command.username.help'
                                         defaultMessage='Choose a username override for responses for this slash command. Usernames can consist of up to 22 characters consisting of lowercase letters, numbers and the symbols "-", "_", and ".".'
@@ -427,7 +427,7 @@ export default class AddCommand extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='iconUrl'
                             >
                                 <FormattedMessage
@@ -435,7 +435,7 @@ export default class AddCommand extends React.Component {
                                     defaultMessage='Response Icon'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <input
                                     id='iconUrl'
                                     type='text'
@@ -445,7 +445,7 @@ export default class AddCommand extends React.Component {
                                     onChange={this.updateIconUrl}
                                     placeholder={Utils.localizeMessage('add_command.iconUrl.placeholder', 'https://www.example.com/myicon.png')}
                                 />
-                                <div className='add-integration__help'>
+                                <div className='form__help'>
                                     <FormattedMessage
                                         id='add_command.iconUrl.help'
                                         defaultMessage='Choose a profile picture override for the post responses to this slash command. Enter the URL of a .png or .jpg file at least 128 pixels by 128 pixels.'
@@ -453,23 +453,20 @@ export default class AddCommand extends React.Component {
                                 </div>
                             </div>
                         </div>
-                        <div className='form-group'>
-                            <label
-                                className='control-label col-sm-3'
-                                htmlFor='autocomplete'
-                            >
-                                <FormattedMessage
-                                    id='add_command.autocomplete'
-                                    defaultMessage='Autocomplete'
-                                />
-                            </label>
-                            <div className='col-md-5 col-sm-9'>
-                                <input
-                                    type='checkbox'
-                                    checked={this.state.autocomplete}
-                                    onChange={this.updateAutocomplete}
-                                />
-                                <div className='add-integration__help'>
+                        <div className='form-group padding-bottom'>
+                            <div className='col-sm-12'>
+                                <div className='checkbox'>
+                                    <input
+                                        type='checkbox'
+                                        checked={this.state.autocomplete}
+                                        onChange={this.updateAutocomplete}
+                                    />
+                                    <FormattedMessage
+                                        id='add_command.autocomplete'
+                                        defaultMessage='Autocomplete'
+                                    />
+                                </div>
+                                <div className='form__help'>
                                     <FormattedMessage
                                         id='add_command.autocomplete.help'
                                         defaultMessage='Show this command in the autocomplete list'
diff --git a/webapp/components/backstage/add_incoming_webhook.jsx b/webapp/components/backstage/add_incoming_webhook.jsx
index f3601cb07..b0c16b9ff 100644
--- a/webapp/components/backstage/add_incoming_webhook.jsx
+++ b/webapp/components/backstage/add_incoming_webhook.jsx
@@ -114,7 +114,7 @@ export default class AddIncomingWebhook extends React.Component {
                     <form className='form-horizontal'>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='displayName'
                             >
                                 <FormattedMessage
@@ -122,7 +122,7 @@ export default class AddIncomingWebhook extends React.Component {
                                     defaultMessage='Display Name'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <input
                                     id='displayName'
                                     type='text'
@@ -135,7 +135,7 @@ export default class AddIncomingWebhook extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='description'
                             >
                                 <FormattedMessage
@@ -143,7 +143,7 @@ export default class AddIncomingWebhook extends React.Component {
                                     defaultMessage='Description'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <input
                                     id='description'
                                     type='text'
@@ -156,7 +156,7 @@ export default class AddIncomingWebhook extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='channelId'
                             >
                                 <FormattedMessage
@@ -164,7 +164,7 @@ export default class AddIncomingWebhook extends React.Component {
                                     defaultMessage='Channel'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <ChannelSelect
                                     id='channelId'
                                     value={this.state.channelId}
diff --git a/webapp/components/backstage/add_outgoing_webhook.jsx b/webapp/components/backstage/add_outgoing_webhook.jsx
index ef57c6d05..9d1f79e5d 100644
--- a/webapp/components/backstage/add_outgoing_webhook.jsx
+++ b/webapp/components/backstage/add_outgoing_webhook.jsx
@@ -146,7 +146,7 @@ export default class AddOutgoingWebhook extends React.Component {
                     <form className='form-horizontal'>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='displayName'
                             >
                                 <FormattedMessage
@@ -154,7 +154,7 @@ export default class AddOutgoingWebhook extends React.Component {
                                     defaultMessage='Display Name'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <input
                                     id='displayName'
                                     type='text'
@@ -167,7 +167,7 @@ export default class AddOutgoingWebhook extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='description'
                             >
                                 <FormattedMessage
@@ -175,7 +175,7 @@ export default class AddOutgoingWebhook extends React.Component {
                                     defaultMessage='Description'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <input
                                     id='description'
                                     type='text'
@@ -188,7 +188,7 @@ export default class AddOutgoingWebhook extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='channelId'
                             >
                                 <FormattedMessage
@@ -196,7 +196,7 @@ export default class AddOutgoingWebhook extends React.Component {
                                     defaultMessage='Channel'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <ChannelSelect
                                     id='channelId'
                                     value={this.state.channelId}
@@ -206,7 +206,7 @@ export default class AddOutgoingWebhook extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='triggerWords'
                             >
                                 <FormattedMessage
@@ -214,7 +214,7 @@ export default class AddOutgoingWebhook extends React.Component {
                                     defaultMessage='Trigger Words (One Per Line)'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <textarea
                                     id='triggerWords'
                                     rows='3'
@@ -227,7 +227,7 @@ export default class AddOutgoingWebhook extends React.Component {
                         </div>
                         <div className='form-group'>
                             <label
-                                className='control-label col-sm-3'
+                                className='control-label col-sm-4'
                                 htmlFor='callbackUrls'
                             >
                                 <FormattedMessage
@@ -235,7 +235,7 @@ export default class AddOutgoingWebhook extends React.Component {
                                     defaultMessage='Callback URLs (One Per Line)'
                                 />
                             </label>
-                            <div className='col-md-5 col-sm-9'>
+                            <div className='col-md-5 col-sm-8'>
                                 <textarea
                                     id='callbackUrls'
                                     rows='3'
diff --git a/webapp/components/logged_in.jsx b/webapp/components/logged_in.jsx
index 0c4571083..1dcb6b0aa 100644
--- a/webapp/components/logged_in.jsx
+++ b/webapp/components/logged_in.jsx
@@ -203,8 +203,6 @@ export default class LoggedIn extends React.Component {
         Websockets.close();
         UserStore.removeChangeListener(this.onUserChanged);
 
-        Utils.resetTheme();
-
         $('body').off('click.userpopover');
         $('body').off('mouseenter mouseleave', '.post');
         $('body').off('mouseenter mouseleave', '.post.post--comment.same--root');
diff --git a/webapp/components/navbar.jsx b/webapp/components/navbar.jsx
index 5afd7e683..e4e64c12e 100644
--- a/webapp/components/navbar.jsx
+++ b/webapp/components/navbar.jsx
@@ -105,20 +105,20 @@ export default class Navbar extends React.Component {
             });
 
             if (e.target.className !== 'navbar-toggle' && e.target.className !== 'icon-bar') {
-                $('.inner-wrap').removeClass('move--right move--left move--left-small');
-                $('.sidebar--left').removeClass('move--right');
-                $('.sidebar--right').removeClass('move--left');
-                $('.sidebar--menu').removeClass('move--left');
+                $('.app__body .inner-wrap').removeClass('move--right move--left move--left-small');
+                $('.app__body .sidebar--left').removeClass('move--right');
+                $('.app__body .sidebar--right').removeClass('move--left');
+                $('.app__body .sidebar--menu').removeClass('move--left');
             }
         }
     }
     toggleLeftSidebar() {
-        $('.inner-wrap').toggleClass('move--right');
-        $('.sidebar--left').toggleClass('move--right');
+        $('.app__body .inner-wrap').toggleClass('move--right');
+        $('.app__body .sidebar--left').toggleClass('move--right');
     }
     toggleRightSidebar() {
-        $('.inner-wrap').toggleClass('move--left-small');
-        $('.sidebar--menu').toggleClass('move--left');
+        $('.app__body .inner-wrap').toggleClass('move--left-small');
+        $('.app__body .sidebar--menu').toggleClass('move--left');
     }
     showSearch() {
         AppDispatcher.handleServerAction({
diff --git a/webapp/components/posts_view.jsx b/webapp/components/posts_view.jsx
index aa7f445ce..cac08aa34 100644
--- a/webapp/components/posts_view.jsx
+++ b/webapp/components/posts_view.jsx
@@ -372,11 +372,13 @@ export default class PostsView extends React.Component {
             this.updateScrolling();
         }
         window.addEventListener('resize', this.handleResize);
+        $('body').addClass('app__body');
     }
     componentWillUnmount() {
         window.removeEventListener('resize', this.handleResize);
         this.scrollStopAction.cancel();
         PreferenceStore.removeChangeListener(this.updateState);
+        $('body').removeClass('app__body');
     }
     componentDidUpdate() {
         if (this.props.postList != null) {
diff --git a/webapp/components/sidebar_right.jsx b/webapp/components/sidebar_right.jsx
index 594674929..43b4a34bb 100644
--- a/webapp/components/sidebar_right.jsx
+++ b/webapp/components/sidebar_right.jsx
@@ -66,28 +66,28 @@ export default class SidebarRight extends React.Component {
         var windowWidth = $(window).outerWidth();
         var sidebarRightWidth = $('.sidebar--right').outerWidth();
 
-        $('.inner-wrap').removeClass('.move--right');
-        $('.inner-wrap').addClass('move--left');
-        $('.sidebar--left').removeClass('move--right');
-        $('.sidebar--right').addClass('move--left');
+        $('.app__body .inner-wrap').removeClass('.move--right');
+        $('.app__body .inner-wrap').addClass('move--left');
+        $('.app__body .sidebar--left').removeClass('move--right');
+        $('.app__body .sidebar--right').addClass('move--left');
 
         //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
         if (this.state.searchVisible || this.state.postRightVisible) {
             if (windowWidth > 960) {
-                velocity($('.inner-wrap'), {marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
-                velocity($('.sidebar--right'), {translateX: 0}, {duration: 500, easing: 'easeOutSine'});
+                velocity($('.app__body .inner-wrap'), {marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
+                velocity($('.app__body .sidebar--right'), {translateX: 0}, {duration: 500, easing: 'easeOutSine'});
             } else {
-                $('.inner-wrap, .sidebar--right').attr('style', '');
+                $('.app__body .inner-wrap, .sidebar--right').attr('style', '');
             }
         } else {
             if (windowWidth > 960) {
-                velocity($('.inner-wrap'), {marginRight: 0}, {duration: 500, easing: 'easeOutSine'});
-                velocity($('.sidebar--right'), {translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
+                velocity($('.app__body .inner-wrap'), {marginRight: 0}, {duration: 500, easing: 'easeOutSine'});
+                velocity($('.app__body .sidebar--right'), {translateX: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
             } else {
-                $('.inner-wrap, .sidebar--right').attr('style', '');
+                $('.app__body .inner-wrap, .sidebar--right').attr('style', '');
             }
-            $('.inner-wrap').removeClass('move--left').removeClass('move--right');
-            $('.sidebar--right').removeClass('move--left');
+            $('.app__body .inner-wrap').removeClass('move--left').removeClass('move--right');
+            $('.app__body .sidebar--right').removeClass('move--left');
             return (
                 <div></div>
             );