plt-298 - Improving UI for webhooks

config/config.json

@@ -5,7 +5,7 @@
         "SegmentDeveloperKey": "",
         "GoogleDeveloperKey": "",
         "EnableOAuthServiceProvider": false,
-        "EnableIncomingWebhooks": false,
+        "EnableIncomingWebhooks": true,
         "EnableTesting": false
     },
     "TeamSettings": {

web/react/components/user_settings/manage_incoming_hooks.jsx

@@ -107,23 +107,23 @@ export default class ManageIncomingHooks extends React.Component {
         this.state.hooks.forEach((hook) => {
             const c = ChannelStore.get(hook.channel_id);
             hooks.push(
-                <div>
+                <div className='font--small'>
-                    <div className='divider-light'></div>
+                    <div className='padding-top x2 divider-light'></div>
-                    <span>
+                    <div className='padding-top x2'>
-                        <strong>{'URL: '}</strong>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}
+                        <strong>{'URL: '}</strong><span className='word-break--all'>{Utils.getWindowLocationOrigin() + '/hooks/' + hook.id}</span>
-                    </span>
+                    </div>
-                    <br/>
+                    <div className='padding-top'>
-                    <span>
                         <strong>{'Channel: '}</strong>{c.name}
-                    </span>
+                    </div>
-                    <br/>
+                    <div className='padding-top'>
-                    <a
+                        <a
-                        className={'btn btn-sm btn-primary'}
+                            className={'text-danger'}
-                        href='#'
+                            href='#'
-                        onClick={this.removeHook.bind(this, hook.id)}
+                            onClick={this.removeHook.bind(this, hook.id)}
-                    >
+                        >
-                        {'Remove'}
+                            {'Remove'}
-                    </a>
+                        </a>
+                    </div>
                 </div>
             );
         });
@@ -134,41 +134,38 @@ export default class ManageIncomingHooks extends React.Component {
         } else if (hooks.length > 0) {
             displayHooks = hooks;
         } else {
-            displayHooks = <label>{'None'}</label>;
+            displayHooks = <label>{' None'}</label>;
         }
 
         const existingHooks = (
-            <div>
+            <div className='padding-top x2'>
-                <label className='control-label'>{'Existing incoming webhooks'}</label>
+                <label className='control-label padding-top x2'>{'Existing incoming webhooks'}</label>
-                <br/>
                 {displayHooks}
             </div>
         );
 
         return (
-            <div
+            <div key='addIncomingHook'>
-                key='addIncomingHook'
-                className='form-group'
-            >
                 <label className='control-label'>{'Add a new incoming webhook'}</label>
-                <br/>
+                <div className='padding-top'>
-                <div>
                     <select
                         ref='channelName'
+                        className='form-control'
                         value={this.state.channelId}
                         onChange={this.updateChannelId}
                     >
                         {options}
                     </select>
-                    <br/>
                     {serverError}
-                    <a
+                    <div className='padding-top'>
-                        className={'btn btn-sm btn-primary' + disableButton}
+                        <a
-                        href='#'
+                            className={'btn btn-sm btn-primary' + disableButton}
-                        onClick={this.addNewHook}
+                            href='#'
-                    >
+                            onClick={this.addNewHook}
-                        {'Add'}
+                        >
-                    </a>
+                            {'Add'}
+                        </a>
+                    </div>
                 </div>
                 {existingHooks}
             </div>

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

@@ -44,6 +44,10 @@ body {
   }
 }
 
+.word-break--all {
+    word-break: break-all;
+}
+
 a {
   word-break: break-word;
   color: $primary-color;

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

@@ -11,6 +11,9 @@
 	}
 	a, a:focus, a:hover {
 		color: #2389D7;
+		&.text-danger {
+			color: #a94442;
+		}
 	}
 	.custom-textarea {
 		color: inherit;
@@ -20,11 +23,14 @@
 			box-shadow: none;
 		}
 	}
-	.btn.btn-primary {
+	.btn {
-		background: #4285f4;
+		font-size: 13px;
-		&:hover, &:focus, &:active {
+		&.btn-primary {
-			background: $primary-color--hover;
+			background: #4285f4;
-			color: #fff;
+			&:hover, &:focus, &:active {
+				background: $primary-color--hover;
+				color: #fff;
+			}
 		}
 	}
 	.info__label {

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

@@ -32,6 +32,7 @@
     }
     .settings-table {
         display: table;
+        table-layout: fixed;
         width: 100%;
         > div {
             display: table-cell;
@@ -125,6 +126,10 @@
                 }
             }
 
+            .font--small {
+                font-size: 13px;
+            }
+
             .section-describe {
                 color:grey;
             }
@@ -155,8 +160,18 @@
                 .has-error {
                     color: #a94442;
                 }
+                .padding-top {
+                    padding-top: 7px;
+                    &.x2 {
+                        padding-top: 14px;
+                    }
+                }
                 .control-label {
                     color: #555;
+                    font-weight: 600;
+                    &.text-left {
+                        text-align: left;
+                    }
                 }
                 hr {
                     border-color: #ccc;