Polish Search Widgets

ui/src/admin/components/FilterBar.js

@@ -27,7 +27,7 @@ class FilterBar extends Component {
     })
     return (
       <div className="panel-heading">
-        <div className="users__search-widget input-group admin__search-widget">
+        <div className="search-widget" style={{width: '300px'}}>
           <input
             type="text"
             className="form-control input-sm"
@@ -35,9 +35,7 @@ class FilterBar extends Component {
             value={this.state.filterText}
             onChange={this.handleText}
           />
-          <div className="input-group-addon">
+          <span className="icon search" />
-            <span className="icon search" aria-hidden="true" />
-          </div>
         </div>
         <button
           className="btn btn-sm btn-primary"

ui/src/alerts/components/AlertsTable.js

@@ -263,17 +263,15 @@ class SearchBar extends Component {
 
   render() {
     return (
-      <div className="users__search-widget input-group">
+      <div className="search-widget" style={{width: '260px'}}>
         <input
           type="text"
-          className="form-control"
+          className="form-control input-sm"
           placeholder="Filter Alerts..."
           onChange={this.handleChange}
           value={this.state.searchTerm}
         />
-        <div className="input-group-addon">
+        <span className="icon search" />
-          <span className="icon search" />
-        </div>
       </div>
     )
   }

ui/src/dashboards/components/DashboardsPageContents.js

@@ -50,7 +50,7 @@ class DashboardsPageContents extends Component {
                   <h2 className="panel-title">
                     {tableHeader}
                   </h2>
-                  <div className="u-flex u-ai-center dashboards-page--actions">
+                  <div className="dashboards-page--actions">
                     <SearchBar
                       placeholder="Filter by Name..."
                       onSearch={this.filterDashboards}

ui/src/hosts/components/SearchBar.js

@@ -22,27 +22,30 @@ class SearchBar extends Component {
   }
 
   render() {
-    const {placeholder} = this.props
+    const {placeholder, width} = this.props
     return (
-      <div className="users__search-widget input-group">
+      <div className="search-widget" style={{width: `${width}px`}}>
         <input
           type="text"
-          className="form-control"
+          className="form-control input-sm"
           placeholder={placeholder}
           ref="searchInput"
           onChange={this.handleChange}
         />
-        <div className="input-group-addon">
+        <span className="icon search" />
-          <span className="icon search" aria-hidden="true" />
-        </div>
       </div>
     )
   }
 }
 
-const {func, string} = PropTypes
+const {func, number, string} = PropTypes
+
+SearchBar.defaultProps = {
+  width: 260,
+}
 
 SearchBar.propTypes = {
+  width: number,
   onSearch: func.isRequired,
   placeholder: string.isRequired,
 }

ui/src/style/components/query-builder.scss

@@ -105,8 +105,8 @@
   display: flex;
 
   & > span {
-    font-size: 11px;
+    font-size: 12px;
-    line-height: 28px;
+    line-height: 30px;
     order: 1;
     width: 20px;
     margin-right: -20px;

ui/src/style/components/search-widget.scss

@@ -1,41 +1,37 @@
 /*
-    Custom Search Widget
+    Search Widget
-    ----------------------------------------------
+    ----------------------------------------------------------------------------
 */
-$search-widget-height: 36px;
 
-.users__search-widget {
+.search-widget {
   position: relative;
 
+  &:first-child {
+    margin-right: 8px;
+  }
+
+  &:only-child {
+    margin-right: none;
+  }
+
   input.form-control {
-    height: $search-widget-height;
     position: relative;
-    width: 100%;
     z-index: 1;
     padding-left: 34px;
-    border-radius: 4px !important;
 
-    &:focus + .input-group-addon {
+    &:focus + .icon {
       color: $c-pool;
     }
   }
-  .input-group-addon {
+
-    padding: 0;
+  .icon {
-    text-align: center;
-    line-height: calc(#{$search-widget-height} - 2px);
     position: absolute;
     color: $g10-wolf;
-    top: 0;
+    top: 50%;
-    left: 0;
+    left: 20px;
-    height: 100%;
+    transform: translate(-50%,-50%);
     z-index: 4;
-    border: 0;
-    width: 40px;
-    background-color: transparent;
     transition:
       color 0.25s ease;
   }
 }
-.admin__search-widget {
-  width: 300px;
-}

ui/src/style/pages/dashboards.scss

@@ -60,8 +60,9 @@ $dash-graph-options-arrow: 8px;
   Dashboard Index Page
   ------------------------------------------------------
 */
-.dashboards-page--actions .users__search-widget {
+.dashboards-page--actions {
-  margin-right: 8px;
+  display: flex;
+  align-items: center;
 }
 
 /*

ui/src/style/theme/_form-elements.scss

@@ -9,7 +9,7 @@
   border-radius: $radius;
   color: $g15-platinum;
   background-color: $g2-kevlar;
-  font-weight: 500;
+  font-weight: 600;
   box-shadow: none;
   outline: none;
   transition: