New dark form styles & cleaned up layouts for alert configs

ui/src/kapacitor/components/AlertOutputs.js

@@ -101,12 +101,12 @@ const AlertOutputs = React.createClass({
     }
 
     return (
-      <div className="panel-body">
-        <h4 className="text-center">Alert Endpoints</h4>
-        <br/>
-        <div>
+      <div className="panel panel-minimal">
+        <div className="panel-body">
+          <h4 className="text-center">Configure Alert Endpoints</h4>
+          <br/>
           <div className="row">
-            <div className="form-group col-xs-7 col-sm-5 col-sm-offset-2">
+            <div className="form-group col-xs-12 col-sm-8 col-sm-offset-2">
               <label htmlFor="alert-endpoint" className="sr-only">Alert Enpoint</label>
               <select value={this.state.selectedEndpoint} className="form-control" id="source" onChange={this.changeSelectedEndpoint}>
                 <option value="hipchat">HipChat</option>
@@ -120,7 +120,12 @@ const AlertOutputs = React.createClass({
             </div>
           </div>
           <div className="row">
-            {this.renderAlertConfig(selectedEndpoint)}
+            <div className="col-xs-12 col-sm-8 col-sm-offset-2">
+              <hr/>
+            </div>
+            <div className="col-xs-12 col-sm-8 col-sm-offset-2">
+              {this.renderAlertConfig(selectedEndpoint)}
+            </div>
           </div>
         </div>
       </div>

ui/src/kapacitor/components/AlertaConfig.js

@@ -30,7 +30,7 @@ const AlertaConfig = React.createClass({
     const {environment, origin, token, url} = this.props.config.options;
 
     return (
-      <div className="panel-body">
+      <div className="col-xs-12 col-sm-8 col-sm-offset-2">
         <h4 className="text-center">Alerta Alert</h4>
         <br/>
         <form onSubmit={this.handleSaveAlert}>

ui/src/kapacitor/components/HipChatConfig.js

@@ -34,58 +34,44 @@ const HipchatConfig = React.createClass({
     const {url, global, room, token} = options;
 
     return (
-      <div className="panel-body">
+      <div>
         <h4 className="text-center">HipChat Alert</h4>
         <br/>
+        <p>Have alerts sent to HipChat.</p>
         <form onSubmit={this.handleSaveAlert}>
-          <div className="row">
-            <div className="col-xs-7 col-sm-8 col-sm-offset-2">
-              <p>
-                Have alerts sent to HipChat
-              </p>
+          <div className="form-group col-xs-12">
+            <label htmlFor="url">HipChat URL</label>
+            <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
+          </div>
 
-              <div className="form-group">
-                <label htmlFor="url">HipChat URL</label>
-                <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
-              </div>
+          <div className="form-group col-xs-12">
+            <label htmlFor="room">Room</label>
+            <input className="form-control" id="room" type="text" ref={(r) => this.room = r} defaultValue={room || ''}></input>
+          </div>
 
-              <div className="form-group">
-                <label htmlFor="room">Room</label>
-                <input className="form-control" id="room" type="text" ref={(r) => this.room = r} defaultValue={room || ''}></input>
-              </div>
+          <div className="form-group col-xs-12">
+            <label htmlFor="token">Token</label>
+            <input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
+            <label className="form-helper">Note: a value of <code>true</code> indicates the HipChat token has been set</label>
+          </div>
 
-              <div className="form-group">
-                <label htmlFor="token">Token</label>
-                <input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
-                <span>Note: a value of <code>true</code> indicates the HipChat token has been set</span>
-              </div>
-
-              <div className="form-group col-xs-12">
-                <div className="checkbox">
-                  <label>
-                    <input type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
-                    Send all alerts without marking them explicitly in TICKscript
-                  </label>
-                </div>
-              </div>
-
-              <div className="form-group col-xs-12">
-                <div className="checkbox">
-                  <label>
-                    <input type="checkbox" defaultChecked={stateChangesOnly} ref={(r) => this.stateChangesOnly = r} />
-                    Send alerts on state change only
-                  </label>
-                </div>
-              </div>
+          <div className="form-group col-xs-12">
+            <div className="form-control-static">
+                <input id="sendAllAlertsWithoutMarking" type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
+                <label htmlFor="sendAllAlertsWithoutMarking">Send all alerts without marking them explicitly in TICKscript</label>
             </div>
           </div>
 
-          <hr />
-          <div className="row">
-            <div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
-              <button className="btn btn-block btn-primary" type="submit">Save</button>
+          <div className="form-group col-xs-12">
+            <div className="form-control-static">
+              <input id="stateChangesOnly" type="checkbox" defaultChecked={stateChangesOnly} ref={(r) => this.stateChangesOnly = r} />
+              <label htmlFor="stateChangesOnly">Send alerts on state change only</label>
             </div>
           </div>
+
+          <div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
+            <button className="btn btn-block btn-primary" type="submit">Save</button>
+          </div>
         </form>
       </div>
     );

ui/src/kapacitor/components/PagerDutyConfig.js

@@ -30,44 +30,31 @@ const PagerDutyConfig = React.createClass({
     const serviceKey = options['service-key'];
 
     return (
-      <div className="panel-body">
+      <div>
         <h4 className="text-center">PagerDuty Alert</h4>
         <br/>
+        <p>You can have alerts sent to PagerDuty by entering info below.</p>
         <form onSubmit={this.handleSaveAlert}>
-          <div className="row">
-            <div className="col-xs-7 col-sm-8 col-sm-offset-2">
-              <p>
-                You can have alerts sent to PagerDuty by entering info below.
-              </p>
+          <div className="form-group col-xs-12">
+            <label htmlFor="service-key">Service Key</label>
+            <input className="form-control" id="service-key" type="text" ref={(r) => this.serviceKey = r} defaultValue={serviceKey || ''}></input>
+            <label className="form-helper">Note: a value of <code>true</code> indicates the PagerDuty service key has been set</label>
+          </div>
 
-              <div className="form-group">
-                <label htmlFor="service-key">Service Key</label>
-                <input className="form-control" id="service-key" type="text" ref={(r) => this.serviceKey = r} defaultValue={serviceKey || ''}></input>
-                <span>Note: a value of <code>true</code> indicates the PagerDuty service key has been set</span>
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="url">PagerDuty URL</label>
-                <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
-              </div>
-
-              <div className="form-group col-xs-12">
-                <div className="checkbox">
-                  <label>
-                    <input type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
-                    Send all alerts without marking them explicitly in TICKscript
-                  </label>
-                </div>
-              </div>
+          <div className="form-group col-xs-12">
+            <label htmlFor="url">PagerDuty URL</label>
+            <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
+          </div>
 
+          <div className="form-group col-xs-12">
+            <div className="form-control-static">
+              <input id="sendAllAlertsWithoutMarking" type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
+              <label htmlFor="sendAllAlertsWithoutMarking">Send all alerts without marking them explicitly in TICKscript</label>
             </div>
           </div>
 
-          <hr />
-          <div className="row">
-            <div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
-              <button className="btn btn-block btn-primary" type="submit">Save</button>
-            </div>
+          <div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
+            <button className="btn btn-block btn-primary" type="submit">Save</button>
           </div>
         </form>
       </div>

ui/src/kapacitor/components/SMTPConfig.js

@@ -32,48 +32,38 @@ const SMTPConfig = React.createClass({
     const {host, port, from, username, password} = this.props.config.options;
 
     return (
-      <div className="panel-body">
+      <div>
         <h4 className="text-center">SMTP Alert</h4>
         <br/>
+        <p>You can have alerts sent to an email address by setting up an SMTP endpoint.</p>
         <form onSubmit={this.handleSaveAlert}>
-          <div className="row">
-            <div className="col-xs-7 col-sm-8 col-sm-offset-2">
-              <p>
-                You can have alerts sent to an email address by setting up an SMTP endpoint.
-              </p>
-
-              <div className="form-group">
-                <label htmlFor="smtp-host">SMTP Host</label>
-                <input className="form-control" id="smtp-host" type="text" ref={(r) => this.host = r} defaultValue={host || ''}></input>
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="smtp-port">SMTP Port</label>
-                <input className="form-control" id="smtp-port" type="text" ref={(r) => this.port = r} defaultValue={port || ''}></input>
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="smtp-from">From email</label>
-                <input className="form-control" id="smtp-from" type="text" ref={(r) => this.from = r} defaultValue={from || ''}></input>
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="smtp-user">User</label>
-                <input className="form-control" id="smtp-user" type="text" ref={(r) => this.username = r} defaultValue={username || ''}></input>
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="smtp-password">Password</label>
-                <input className="form-control" id="smtp-password" type="password" ref={(r) => this.password = r} defaultValue={`${password}`}></input>
-              </div>
-            </div>
+          <div className="form-group col-xs-12 col-md-6">
+            <label htmlFor="smtp-host">SMTP Host</label>
+            <input className="form-control" id="smtp-host" type="text" ref={(r) => this.host = r} defaultValue={host || ''}></input>
           </div>
 
-          <hr />
-          <div className="row">
-            <div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
-              <button className="btn btn-block btn-primary" type="submit">Save</button>
-            </div>
+          <div className="form-group col-xs-12 col-md-6">
+            <label htmlFor="smtp-port">SMTP Port</label>
+            <input className="form-control" id="smtp-port" type="text" ref={(r) => this.port = r} defaultValue={port || ''}></input>
+          </div>
+
+          <div className="form-group col-xs-12">
+            <label htmlFor="smtp-from">From Email</label>
+            <input className="form-control" id="smtp-from" placeholder="email@domain.com" type="text" ref={(r) => this.from = r} defaultValue={from || ''}></input>
+          </div>
+
+          <div className="form-group col-xs-12 col-md-6">
+            <label htmlFor="smtp-user">User</label>
+            <input className="form-control" id="smtp-user" type="text" ref={(r) => this.username = r} defaultValue={username || ''}></input>
+          </div>
+
+          <div className="form-group col-xs-12 col-md-6">
+            <label htmlFor="smtp-password">Password</label>
+            <input className="form-control" id="smtp-password" type="password" ref={(r) => this.password = r} defaultValue={`${password}`}></input>
+          </div>
+
+          <div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
+            <button className="btn btn-block btn-primary" type="submit">Save</button>
           </div>
         </form>
       </div>

ui/src/kapacitor/components/SensuConfig.js

@@ -26,33 +26,23 @@ const SensuConfig = React.createClass({
     const {source, addr} = this.props.config.options;
 
     return (
-      <div className="panel-body">
+      <div>
         <h4 className="text-center">Sensu Alert</h4>
         <br/>
+        <p>Have alerts sent to Sensu.</p>
         <form onSubmit={this.handleSaveAlert}>
-          <div className="row">
-            <div className="col-xs-7 col-sm-8 col-sm-offset-2">
-              <p>
-                Have alerts sent to Sensu
-              </p>
-
-              <div className="form-group">
-                <label htmlFor="source">Source</label>
-                <input className="form-control" id="source" type="text" ref={(r) => this.source = r} defaultValue={source || ''}></input>
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="address">Address</label>
-                <input className="form-control" id="address" type="text" ref={(r) => this.addr = r} defaultValue={addr || ''}></input>
-              </div>
-            </div>
+          <div className="form-group col-xs-12 col-md-6">
+            <label htmlFor="source">Source</label>
+            <input className="form-control" id="source" type="text" ref={(r) => this.source = r} defaultValue={source || ''}></input>
           </div>
 
-          <hr />
-          <div className="row">
-            <div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
-              <button className="btn btn-block btn-primary" type="submit">Save</button>
-            </div>
+          <div className="form-group col-xs-12 col-md-6">
+            <label htmlFor="address">Address</label>
+            <input className="form-control" id="address" type="text" ref={(r) => this.addr = r} defaultValue={addr || ''}></input>
+          </div>
+
+          <div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
+            <button className="btn btn-block btn-primary" type="submit">Save</button>
           </div>
         </form>
       </div>

ui/src/kapacitor/components/SlackConfig.js

@@ -47,39 +47,25 @@ const SlackConfig = React.createClass({
     const {url, channel} = this.props.config.options;
 
     return (
-      <div className="panel-body">
+      <div>
         <h4 className="text-center">Slack Alert</h4>
         <br/>
+        <p>Post alerts to a Slack channel.</p>
         <form onSubmit={this.handleSaveAlert}>
-          <div className="row">
-            <div className="col-xs-7 col-sm-8 col-sm-offset-2">
-              <p>
-                Post alerts to a Slack channel.
-              </p>
-
-              <div className="form-group">
-                <label htmlFor="slack-url">Slack Webhook URL (<a href="https://api.slack.com/incoming-webhooks" target="_">see more on Slack webhooks</a>)</label>
-                <input className="form-control" id="slack-url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
-                <span>Note: a value of <code>true</code> indicates that the Slack channel has been set</span>
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="slack-channel">Slack Channel (optional)</label>
-                <input className="form-control" id="slack-channel" type="text" placeholder="#alerts" ref={(r) => this.channel = r} defaultValue={channel || ''}></input>
-              </div>
-            </div>
-
-            <div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
-              <button className="btn btn-block btn-primary" type="submit">Save</button>
-            </div>
+          <div className="form-group col-xs-12">
+            <label htmlFor="slack-url">Slack Webhook URL (<a href="https://api.slack.com/incoming-webhooks" target="_">see more on Slack webhooks</a>)</label>
+            <input className="form-control" id="slack-url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
+            <label className="form-helper">Note: a value of <code>true</code> indicates that the Slack channel has been set</label>
           </div>
 
-          <hr />
+          <div className="form-group col-xs-12">
+            <label htmlFor="slack-channel">Slack Channel (optional)</label>
+            <input className="form-control" id="slack-channel" type="text" placeholder="#alerts" ref={(r) => this.channel = r} defaultValue={channel || ''}></input>
+          </div>
 
-          <div className="row">
-            <div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
-              <a className="btn btn-warning" onClick={this.handleTest} disabled={!this.state.testEnabled}>Send Test Message</a>
-            </div>
+          <div className="form-group form-group-submit col-xs-12 text-center">
+            <a className="btn btn-warning" onClick={this.handleTest} disabled={!this.state.testEnabled}>Send Test Message</a>
+            <button className="btn btn-primary" type="submit">Save</button>
           </div>
         </form>
       </div>

ui/src/kapacitor/components/TelegramConfig.js

@@ -44,86 +44,65 @@ const TelegramConfig = React.createClass({
     const stateChangesOnly = options['state-changes-only'];
 
     return (
-      <div className="panel-body">
+      <div>
         <h4 className="text-center">Telegram Alert</h4>
         <br/>
+        <p>You can have alerts sent to Telegram by entering info below.</p>
         <form onSubmit={this.handleSaveAlert}>
-          <div className="row">
-            <div className="col-xs-7 col-sm-8 col-sm-offset-2">
-              <p>
-                You can have alerts sent to Telegram by entering info below.
-              </p>
+          <div className="form-group col-xs-12">
+            <label htmlFor="url">Telegram URL</label>
+            <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
+          </div>
 
-              <div className="form-group">
-                <label htmlFor="url">Telegram URL</label>
-                <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
-              </div>
+          <div className="form-group col-xs-12">
+            <label htmlFor="token">Token</label>
+            <input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
+            <label className="form-helper">Note: a value of <code>true</code> indicates the Telegram token has been set</label>
+          </div>
 
-              <div className="form-group">
-                <label htmlFor="token">Token</label>
-                <input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
-                <span>Note: a value of <code>true</code> indicates the Telegram token has been set</span>
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="chat-id">Chat ID</label>
-                <input className="form-control" id="chat-id" type="text" ref={(r) => this.chatID = r} defaultValue={chatID || ''}></input>
-              </div>
-
-              <div className="form-group col-xs-12">
-                <div className="checkbox">
-                  <label>
-                    <input type="checkbox" defaultChecked={parseMode} ref={(r) => this.parseMode = r} />
-                    Enable Parse Mode
-                  </label>
-                </div>
-              </div>
-
-              <div className="form-group col-xs-12">
-                <div className="checkbox">
-                  <label>
-                    <input type="checkbox" defaultChecked={disableWebPagePreview} ref={(r) => this.disableWebPagePreview = r} />
-                    Disable Web Page Preview
-                  </label>
-                </div>
-              </div>
-
-              <div className="form-group col-xs-12">
-                <div className="checkbox">
-                  <label>
-                    <input type="checkbox" defaultChecked={disableNotification} ref={(r) => this.disableNotification = r} />
-                    Disable Notification
-                  </label>
-                </div>
-              </div>
-
-              <div className="form-group col-xs-12">
-                <div className="checkbox">
-                  <label>
-                    <input type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
-                    Send all alerts without marking them explicitly in TICKscript
-                  </label>
-                </div>
-              </div>
-
-              <div className="form-group col-xs-12">
-                <div className="checkbox">
-                  <label>
-                    <input type="checkbox" defaultChecked={stateChangesOnly} ref={(r) => this.stateChangesOnly = r} />
-                    Send alerts on state change only
-                  </label>
-                </div>
-              </div>
+          <div className="form-group col-xs-12">
+            <label htmlFor="chat-id">Chat ID</label>
+            <input className="form-control" id="chat-id" type="text" ref={(r) => this.chatID = r} defaultValue={chatID || ''}></input>
+          </div>
 
+          <div className="form-group col-xs-12">
+            <div className="form-control-static">
+              <input id="enableParseMode" type="checkbox" defaultChecked={parseMode} ref={(r) => this.parseMode = r} />
+              <label htmlFor="enableParseMode">Enable Parse Mode</label>
             </div>
           </div>
 
-          <hr />
-          <div className="row">
-            <div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
-              <button className="btn btn-block btn-primary" type="submit">Save</button>
+          <div className="form-group col-xs-12">
+            <div className="form-control-static">
+              <input id="disableWebPagePreview" type="checkbox" defaultChecked={disableWebPagePreview} ref={(r) => this.disableWebPagePreview = r} />
+              <label htmlFor="disableWebPagePreview">Disable Web Page Preview</label>
             </div>
           </div>
+
+          <div className="form-group col-xs-12">
+            <div className="form-control-static">
+              <input id="disableNotification" type="checkbox" defaultChecked={disableNotification} ref={(r) => this.disableNotification = r} />
+              <label htmlFor="disableNotification">Disable Notification</label>
+            </div>
+          </div>
+
+          <div className="form-group col-xs-12">
+            <div className="form-control-static">
+              <input id="sendAllAlertsWithoutMarking" type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
+              <label htmlFor="sendAllAlertsWithoutMarking">Send all alerts without marking them explicitly in TICKscript</label>
+            </div>
+          </div>
+
+          <div className="form-group col-xs-12">
+            <div className="form-control-static">
+              <input id="stateChangesOnly" type="checkbox" defaultChecked={stateChangesOnly} ref={(r) => this.stateChangesOnly = r} />
+              <label htmlFor="stateChangesOnly">Send alerts on state change only</label>
+            </div>
+          </div>
+
+          <div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
+            <button className="btn btn-block btn-primary" type="submit">Save</button>
+          </div>
         </form>
       </div>
     );

ui/src/kapacitor/components/VictorOpsConfig.js

@@ -31,39 +31,29 @@ const VictorOpsConfig = React.createClass({
     const {url} = options;
 
     return (
-      <div className="panel-body">
+      <div>
         <h4 className="text-center">VictorOps Alert</h4>
         <br/>
+        <p>Have alerts sent to VictorOps.</p>
         <form onSubmit={this.handleSaveAlert}>
-          <div className="row">
-            <div className="col-xs-7 col-sm-8 col-sm-offset-2">
-              <p>
-                Have alerts sent to VictorOps
-              </p>
-
-              <div className="form-group">
-                <label htmlFor="api-key">API Key</label>
-                <input className="form-control" id="api-key" type="text" ref={(r) => this.apiKey = r} defaultValue={apiKey || ''}></input>
-                <span>Note: a value of <code>true</code> indicates the VictorOps API key has been set</span>
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="routing-key">Routing Key</label>
-                <input className="form-control" id="routing-key" type="text" ref={(r) => this.routingKey = r} defaultValue={routingKey || ''}></input>
-              </div>
-
-              <div className="form-group">
-                <label htmlFor="url">VictorOps URL</label>
-                <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
-              </div>
-            </div>
+          <div className="form-group col-xs-12">
+            <label htmlFor="api-key">API Key</label>
+            <input className="form-control" id="api-key" type="text" ref={(r) => this.apiKey = r} defaultValue={apiKey || ''}></input>
+            <label className="form-helper">Note: a value of <code>true</code> indicates the VictorOps API key has been set</label>
           </div>
 
-          <hr />
-          <div className="row">
-            <div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
-              <button className="btn btn-block btn-primary" type="submit">Save</button>
-            </div>
+          <div className="form-group col-xs-12">
+            <label htmlFor="routing-key">Routing Key</label>
+            <input className="form-control" id="routing-key" type="text" ref={(r) => this.routingKey = r} defaultValue={routingKey || ''}></input>
+          </div>
+
+          <div className="form-group col-xs-12">
+            <label htmlFor="url">VictorOps URL</label>
+            <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
+          </div>
+
+          <div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
+            <button className="btn btn-block btn-primary" type="submit">Save</button>
           </div>
         </form>
       </div>

ui/src/kapacitor/containers/KapacitorPage.js

@@ -187,8 +187,10 @@ export const KapacitorPage = React.createClass({
     }
 
     return (
-      <div className="panel-body">
-        Set your Kapacitor connection info to configure alerting endpoints.
+      <div className="panel panel-minimal">
+        <div className="panel-body">
+          <p>Set your Kapacitor connection info to configure alerting endpoints.</p>
+        </div>
       </div>
     );
   },

ui/src/sources/containers/SourceForm.js

@@ -96,7 +96,7 @@ export const SourceForm = React.createClass({
           <div className="container-fluid">
             <div className="row">
               <div className="col-md-8 col-md-offset-2">
-                <div className="panel panel-summer">
+                <div className="panel panel-minimal">
                   <div className="panel-body">
                     <h4 className="text-center">Connection Details</h4>
                     <br/>

ui/src/style/enterprise_style/_enterprise-custom.scss

@@ -129,10 +129,13 @@ body {
     Dark Panel Styles
     ----------------------------------------------
 */
-.panel:only-child,
-.panel:last-child {
+.row:only-child .panel,
+.row:last-child .panel {
   margin-bottom: 0;
 }
+.panel hr {
+  background-color: $g5-pepper;
+}
 .panel-minimal {
   border: 0;
 
@@ -144,7 +147,7 @@ body {
     padding: 30px;
     background-color: $g3-castle;
     border: 0;
-    color: $g17-whisper;
+    color: $g13-mist;
 
     > *:first-child {
       margin-top: 0;
@@ -245,6 +248,9 @@ body {
 .text-right .btn {
   margin: 0 0 0 4px;
 }
+.text-center .btn {
+  margin: 0 2px;
+}
 .progress-label {
   margin-bottom: 4px;
   color: $g11-sidewalk;
@@ -394,12 +400,12 @@ table.table.error-table {
     Static Form Controls
     ----------------------------------------------
 */
+$form-static-checkbox-size: 16px;
 .form-control-static {
-  border: 2px solid $g17-whisper;
-  height: 40px;
+  border: 2px solid $g5-pepper;
+  height: auto;
   border-radius: 4px;
-  padding: 0 18px;
-  line-height: 36px;
+  padding: 7px 12px;
   position: relative;
 
   input[type="checkbox"] {
@@ -412,8 +418,13 @@ table.table.error-table {
 
     // Faux Checkbox
     & + label {
+      font-size: 14px !important;
+      line-height: 16px;
+      color: $g11-sidewalk;
+      font-weight: 500;
       transition: color 0.25s ease;
-      margin-left: 24px;
+      margin: 0;
+      padding: 0 0 0 (12px + $form-static-checkbox-size + 6px);
       user-select: none;
       -ms-user-select: none;
       -moz-user-selct: none;
@@ -423,22 +434,22 @@ table.table.error-table {
         content: '';
         position: absolute;
         top: 50%;
-        left: 18px;
+        left: 12px;
         transform: translateY(-50%);
-        width: 16px;
-        height: 16px;
-        background-color: $g18-cloud;
-        border: 2px solid $g17-whisper;
+        width: $form-static-checkbox-size;
+        height: $form-static-checkbox-size;
+        background-color: $g2-kevlar;
+        border: 2px solid $g5-pepper;
         border-radius: 3px;
         z-index: 2;
         transition:
-          background-color 0.25s ease;
+          border-color 0.25s ease;
       }
       &:after {
         content: '';
         position: absolute;
         top: 50%;
-        left: (18px + (16px / 2));
+        left: (12px + ($form-static-checkbox-size / 2));
         transform: translate(-50%,-50%) scale(2,2);
         opacity: 0;
         width: 6px;
@@ -452,15 +463,16 @@ table.table.error-table {
       }
       &:hover {
         cursor: pointer;
+        color: $g20-white;
 
         &:before {
-          background-color: $g20-white;
+          border-color: $g6-smoke;
         }
       }
     }
     // Faux Checkbox (Checked)
     &:checked + label {
-      color: $c-pool;
+      color: $g20-white;
 
       &:after {
         opacity: 1;
@@ -527,3 +539,45 @@ table .monotype {
     }
   }
 }
+
+/*
+    Dark Inputs
+    ----------------------------------------------
+    Using a ton of !important to override styles from
+    the bootstrap theme. #designdebt
+*/
+.form-group {
+  margin-bottom: 9px;
+}
+.form-group label {
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  padding: 0 13px;
+}
+.form-control {
+  padding: 0 13px;
+  background-color: $g2-kevlar !important;
+  border-color: $g5-pepper !important;
+  color: $g15-platinum !important;
+
+  &:hover {
+    border-color: $g6-smoke !important;
+  }
+
+  &:focus {
+    border-color: $c-pool !important;
+    box-shadow: 0 0 6px 0px $c-pool !important;
+    color: $g20-white !important;
+  }
+}
+.form-helper {
+  margin: 4px 0 !important;
+  font-weight: 400 !important;
+  font-style: italic;
+  line-height: 16px !important;
+}
+.form-group-submit {
+  margin-top: 30px;
+}