Oauth UI Improvements and settings improvement

web/react/components/register_app_modal.jsx

@@ -96,75 +96,74 @@ export default class RegisterAppModal extends React.Component {
         var body = '';
         if (this.state.clientId === '') {
             body = (
-                <div className='form-group user-settings'>
+                <div className='settings-modal'>
-                    <h3>{'Register a New Application'}</h3>
+                    <div className='form-horizontal user-settings'>
-                    <br/>
+                        <h4 className='padding-bottom x3'>{'Register a New Application'}</h4>
-                    <label className='col-sm-4 control-label'>{'Application Name'}</label>
+                        <div className='row'>
-                    <div className='col-sm-7'>
+                            <label className='col-sm-4 control-label'>{'Application Name'}</label>
-                        <input
+                            <div className='col-sm-7'>
-                            ref='name'
+                                <input
-                            className='form-control'
+                                    ref='name'
-                            type='text'
+                                    className='form-control'
-                            placeholder='Required'
+                                    type='text'
-                        />
+                                    placeholder='Required'
-                        {nameError}
+                                />
+                                {nameError}
+                            </div>
+                        </div>
+                        <div className='row padding-top x2'>
+                            <label className='col-sm-4 control-label'>{'Homepage URL'}</label>
+                            <div className='col-sm-7'>
+                                <input
+                                    ref='homepage'
+                                    className='form-control'
+                                    type='text'
+                                    placeholder='Required'
+                                />
+                                {homepageError}
+                            </div>
+                        </div>
+                        <div className='row padding-top x2'>
+                            <label className='col-sm-4 control-label'>{'Description'}</label>
+                            <div className='col-sm-7'>
+                                <input
+                                    ref='desc'
+                                    className='form-control'
+                                    type='text'
+                                    placeholder='Optional'
+                                />
+                            </div>
+                        </div>
+                        <div className='row padding-top padding-bottom x2'>
+                            <label className='col-sm-4 control-label'>{'Callback URL'}</label>
+                            <div className='col-sm-7'>
+                                <textarea
+                                    ref='callback'
+                                    className='form-control'
+                                    type='text'
+                                    placeholder='Required'
+                                    rows='5'
+                                />
+                                {callbackError}
+                            </div>
+                        </div>
+                        {serverError}
+                        <hr />
+                        <a
+                            className='btn btn-sm theme pull-right'
+                            href='#'
+                            data-dismiss='modal'
+                            aria-label='Close'
+                        >
+                            {'Cancel'}
+                        </a>
+                        <a
+                            className='btn btn-sm btn-primary pull-right'
+                            onClick={this.register}
+                        >
+                            {'Register'}
+                        </a>
                     </div>
-                    <br/>
-                    <br/>
-                    <label className='col-sm-4 control-label'>{'Homepage URL'}</label>
-                    <div className='col-sm-7'>
-                        <input
-                            ref='homepage'
-                            className='form-control'
-                            type='text'
-                            placeholder='Required'
-                        />
-                        {homepageError}
-                    </div>
-                    <br/>
-                    <br/>
-                    <label className='col-sm-4 control-label'>{'Description'}</label>
-                    <div className='col-sm-7'>
-                        <input
-                            ref='desc'
-                            className='form-control'
-                            type='text'
-                            placeholder='Optional'
-                        />
-                    </div>
-                    <br/>
-                    <br/>
-                    <label className='col-sm-4 control-label'>{'Callback URL'}</label>
-                    <div className='col-sm-7'>
-                        <textarea
-                            ref='callback'
-                            className='form-control'
-                            type='text'
-                            placeholder='Required'
-                            rows='5'
-                        />
-                        {callbackError}
-                    </div>
-                    <br/>
-                    <br/>
-                    <br/>
-                    <br/>
-                    <br/>
-                    {serverError}
-                    <a
-                        className='btn btn-sm theme pull-right'
-                        href='#'
-                        data-dismiss='modal'
-                        aria-label='Close'
-                    >
-                        {'Cancel'}
-                    </a>
-                    <a
-                        className='btn btn-sm btn-primary pull-right'
-                        onClick={this.register}
-                    >
-                        {'Register'}
-                    </a>
                 </div>
             );
         } else {

web/react/components/setting_item_max.jsx

@@ -35,8 +35,10 @@ export default class SettingItemMax extends React.Component {
         var widthClass;
         if (this.props.width === 'full') {
             widthClass = 'col-sm-12';
-        } else {
+        } else if (this.props.width === 'medium') {
             widthClass = 'col-sm-10 col-sm-offset-2';
+        } else {
+            widthClass = 'col-sm-9 col-sm-offset-3';
         }
 
         return (

web/react/components/user_settings/manage_outgoing_hooks.jsx

@@ -236,6 +236,7 @@ export default class ManageOutgoingHooks extends React.Component {
         return (
             <div key='addOutgoingHook'>
                 <label className='control-label'>{'Add a new outgoing webhook'}</label>
+                <div className='padding-top divider-light'></div>
                 <div className='padding-top'>
                     <div>
                         <label className='control-label'>{'Channel'}</label>

web/react/components/user_settings/user_settings_integrations.jsx

@@ -43,6 +43,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                 incomingHooksSection = (
                     <SettingItemMax
                         title='Incoming Webhooks'
+                        width='medium'
                         inputs={inputs}
                         updateSection={(e) => {
                             this.updateSection('');
@@ -54,6 +55,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                 incomingHooksSection = (
                     <SettingItemMin
                         title='Incoming Webhooks'
+                        width='medium'
                         describe='Manage your incoming webhooks (Developer feature)'
                         updateSection={() => {
                             this.updateSection('incoming-hooks');
@@ -72,6 +74,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                 outgoingHooksSection = (
                     <SettingItemMax
                         title='Outgoing Webhooks'
+                        width='medium'
                         inputs={inputs}
                         updateSection={(e) => {
                             this.updateSection('');
@@ -83,6 +86,7 @@ export default class UserSettingsIntegrationsTab extends React.Component {
                 outgoingHooksSection = (
                     <SettingItemMin
                         title='Outgoing Webhooks'
+                        width='medium'
                         describe='Manage your outgoing webhooks'
                         updateSection={() => {
                             this.updateSection('outgoing-hooks');

web/sass-files/sass/partials/_settings.scss

@@ -33,6 +33,33 @@
     label {
         font-weight: 600;
     }
+    .no-padding--left {
+        padding-left: 0;
+    }
+    .padding-top {
+        padding-top: 7px;
+        &.x2 {
+            padding-top: 14px;
+        }
+        &.x3 {
+            padding-top: 21px;
+        }
+    }
+    .padding-bottom {
+        padding-bottom: 7px;
+        &.x2 {
+            padding-bottom: 14px;
+        }
+        &.x3 {
+            padding-bottom: 21px;
+        }
+        .control-label {
+            font-weight: 600;
+            &.text-left {
+                text-align: left;
+            }
+        }
+    }
     .settings-table {
         display: table;
         table-layout: fixed;
@@ -170,33 +197,6 @@
             .has-error {
                 color: #a94442;
             }
-            .no-padding--left {
-                padding-left: 0;
-            }
-            .padding-top {
-                padding-top: 7px;
-                &.x2 {
-                    padding-top: 14px;
-                }
-                &.x3 {
-                    padding-top: 21px;
-                }
-            }
-            .padding-bottom {
-                padding-bottom: 7px;
-                &.x2 {
-                    padding-bottom: 14px;
-                }
-                &.x3 {
-                    padding-bottom: 21px;
-                }
-                .control-label {
-                    font-weight: 600;
-                    &.text-left {
-                        text-align: left;
-                    }
-                }
-            }
 
             .file-status {
                 font-size: 13px;