Merge pull request #763 from influxdata/misc-ui-polish

Misc UI Polish

ui/src/kapacitor/components/RuleGraph.js

@@ -34,7 +34,7 @@ export const RuleGraph = React.createClass({
     if (!queryText) {
       return (
         <div className="rule-preview--graph-empty">
-          <p>Select a <strong>Metric</strong> to preview on a graph</p>
+          <p>Select a <strong>Time-Series</strong> to preview on a graph</p>
         </div>
       );
     }

ui/src/kapacitor/components/ValuesSection.js

@@ -98,7 +98,7 @@ const Threshold = React.createClass({
     return (
       <div className="value-selector">
         <p>Send Alert where</p>
-        <span>{query.fields.length ? query.fields[0].field : 'Select a Metric'}</span>
+        <span>{query.fields.length ? query.fields[0].field : 'Select a Time-Series'}</span>
         <p>is</p>
         <Dropdown className="size-176 dropdown-kapacitor" items={operators} selected={operator} onChoose={this.handleDropdownChange} />
         <input className="form-control input-sm size-166 form-control--green" type="text" ref={(r) => this.valueInput = r} defaultValue={value} onKeyUp={this.handleInputChange} />

ui/src/style/theme/bootstrap-theme.scss

@@ -454,17 +454,17 @@ a:active.link-warning {
 }
 ::-moz-selection {
   color: #fff;
-  background-color: #757888;
+  background-color: #22ADF6;
   /* WebKit/Blink Browsers */
 }
 ::selection {
   color: #fff;
-  background-color: #757888;
+  background-color: #22ADF6;
   /* WebKit/Blink Browsers */
 }
 ::-moz-selection {
   color: #fff;
-  background-color: #757888;
+  background-color: #22ADF6;
   /* Gecko Browsers */
 }
 .btn {

ui/src/style/theme/theme-dark.scss

@@ -105,20 +105,6 @@
   border-color: $g5-pepper !important;
   color: $g15-platinum !important;
 
-  &::-webkit-input-placeholder { color: $g10-wolf; }
-  &::-moz-placeholder { color: $g10-wolf; }
-  &:-ms-input-placeholder { color: $g10-wolf; }
-  &:-moz-placeholder { color: $g10-wolf; }
-
-  &::selection {
-    background-color: $c-laser;
-    color: $g20-white;
-  }
-  &::-moz-selection {
-    background-color: $c-laser;
-    color: $g20-white;
-  }
-
   &:hover {
     border-color: $g6-smoke !important;
   }
@@ -143,20 +129,25 @@
 .form-group-submit {
   margin-top: 30px;
 }
-textarea {
+
+/* Placeholder Text */
+.form-control,
+textarea,
+input {
   &::-webkit-input-placeholder { color: $g10-wolf; }
   &::-moz-placeholder { color: $g10-wolf; }
   &:-ms-input-placeholder { color: $g10-wolf; }
   &:-moz-placeholder { color: $g10-wolf; }
+}
 
-  &::selection {
-    background-color: $c-laser;
-    color: $g20-white;
-  }
-  &::-moz-selection {
-    background-color: $c-laser;
-    color: $g20-white;
+/* Text Selection Styling */
+::selection {
+  background-color: $c-pool !important;
+  color: $g20-white !important;
 }
+::-moz-selection {
+  background-color: $c-pool !important;
+  color: $g20-white !important;
 }
 
 

ui/webpack/devConfig.js

@@ -72,7 +72,7 @@ module.exports = {
       $: "jquery",
       jQuery: "jquery",
     }),
-    new ExtractTextPlugin("style.css"),
+    new ExtractTextPlugin("chronograf.css"),
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, '..', 'src', 'index.template.html'),
       inject: 'body',

ui/webpack/prodConfig.js

@@ -77,7 +77,7 @@ var config = {
       $: "jquery",
       jQuery: "jquery",
     }),
-    new ExtractTextPlugin("style.css"),
+    new ExtractTextPlugin("chronograf.css"),
     new HtmlWebpackPlugin({
       template: path.resolve(__dirname, '..', 'src', 'index.template.html'),
       inject: 'body',