adjust selectors for .form-group.has-error

src/client/js/components/HeaderSearchBox.jsx

@@ -69,9 +69,10 @@ class HeaderSearchBox extends React.Component {
       : 'All pages';
 
     const config = appContainer.getConfig();
+    const isReachable = config.isSearchServiceReachable;
 
     return (
-      <FormGroup className={config.isSearchServiceReachable ? '' : 'has-error'}>
+      <FormGroup className={isReachable ? '' : 'has-error'}>
         <InputGroup>
           <InputGroup.Button className="btn-group-dropdown-scope">
             <DropdownButton id="dbScope" title={scopeLabel}>

src/client/styles/scss/_override-rbt.scss

@@ -1,13 +1,15 @@
-// override react-bootstrap-typeahead styles
-// see: https://github.com/ericgio/react-bootstrap-typeahead
-.rbt-input.form-control {
-  // focus
-  &.focus {
-    border-color: inherit;
-    box-shadow: none;
-  }
-}
-// hide loading icon
-.rbt-aux {
-  display: none;
-}
+// override react-bootstrap-typeahead styles
+// see: https://github.com/ericgio/react-bootstrap-typeahead
+.form-group:not(.has-error) {
+  .rbt-input.form-control {
+    // focus
+    &.focus {
+      border-color: inherit;
+      box-shadow: none;
+    }
+  }
+}
+// hide loading icon
+.rbt-aux {
+  display: none;
+}

src/client/styles/scss/_search.scss

@@ -76,7 +76,6 @@
   // see: https://github.com/ericgio/react-bootstrap-typeahead
   .rbt-input.form-control {
     height: 30px;
-    border: none;
     border-top-right-radius: 40px;
     border-bottom-right-radius: 40px;
 
@@ -84,6 +83,11 @@
       margin-left: 8px;
     }
   }
+  .form-group:not(.has-error) {
+    .rbt-input.form-control {
+      border: none;
+    }
+  }
 
   .btn-group-submit-search {
     position: absolute;