From 9384fdd42be6f4435dbd8df12447249009a14e7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 30 Aug 2018 23:19:44 +0100
Subject: [PATCH] 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 |  6 ------
 ui/src/Components/NavBar/FilterInput/index.js  | 10 +++++++++-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/index.css b/ui/src/Components/NavBar/FilterInput/index.css
index 988b724a4..69c13cbbd 100644
--- a/ui/src/Components/NavBar/FilterInput/index.css
+++ b/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;
-}
diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index 430c8ab98..6f2dda1c2 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/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 => {