fix(ui): pass custom elements and classes instead of overriding default styles

Highlight component now takes extra props for wrapping matched part of suggestion, pass span with bold text class to mark it as bold instead of overwriting default mark element with highlight class in css

ui/src/Components/NavBar/FilterInput/index.css

@@ -19,9 +19,3 @@ input.components-filterinput-wrapper {
 input.components-filterinput-wrapper:focus {
   width: auto;
 }
-
-/* highlighted part of the suggestion - phrase in the input that matches it */
-mark.highlight {
-  padding: 0;
-  background-color: inherit;
-}

ui/src/Components/NavBar/FilterInput/index.js

@@ -102,7 +102,15 @@ const FilterInput = observer(
     };
 
     renderSuggestion = (suggestion, { query, isHighlighted }) => {
-      return <Highlight search={query}>{suggestion}</Highlight>;
+      return (
+        <Highlight
+          matchElement="span"
+          matchClass="font-weight-bold"
+          search={query}
+        >
+          {suggestion}
+        </Highlight>
+      );
     };
 
     renderInputComponent = inputProps => {