User Search Widget polish

Had some UI bugs, looks better now

ui/src/hosts/components/HostsTable.js

@@ -157,7 +157,7 @@ const SearchBar = React.createClass({
         <input
           type="text"
           className="form-control"
-          placeholder="Filter Hosts"
+          placeholder="Filter by Hostname..."
           ref="searchInput"
           onChange={this.handleChange}
         />

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

@@ -142,44 +142,11 @@ body {
     position: relative;
     width: 100%;
     z-index: 1;
-    background-color: $g2-kevlar;
-    border-color: $g5-pepper;
-    color: $g17-whisper;
-    border-radius: 4px;
     padding-left: 34px;
+    border-radius: 4px !important;
 
-    &:focus {
+    &:focus + .input-group-addon {
-      border-color: $c-pool !important;
       color: $c-pool;
-
-      &::-webkit-input-placeholder {
-      color: $c-pool;
-      }
-      &::-moz-placeholder {
-        color: $c-pool;
-      }
-      &:-ms-input-placeholder {
-        color: $c-pool;
-      }
-      &:-moz-placeholder {
-        color: $c-pool;
-      }
-
-      & + .input-group-addon {
-        color: $c-pool;
-      }
-    }
-    &::-webkit-input-placeholder {
-      color: $g11-sidewalk;
-    }
-    &::-moz-placeholder {
-      color: $g11-sidewalk;
-    }
-    &:-ms-input-placeholder {
-      color: $g11-sidewalk;
-    }
-    &:-moz-placeholder {
-      color: $g11-sidewalk;
     }
   }
   .input-group-addon {
@@ -187,10 +154,11 @@ body {
     text-align: center;
     line-height: 38px;
     position: absolute;
+    color: $g10-wolf;
     top: 0;
     left: 0;
     height: 100%;
-    z-index: 2;
+    z-index: 4;
     border: 0;
     width: 40px;
     background-color: transparent;

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

@@ -100,6 +100,11 @@
   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; }
+
   &:hover {
     border-color: $g6-smoke !important;
   }