Changes highlight from <strong> to <mark> (#5647)

* Changes highlight from strong to mark

* Removes yellow background from mark

Author: Łukasz Sobek

src/components/QuickOpenModal.css

@@ -1,10 +1,12 @@
 .result-item .title .highlight {
   font-weight: bold;
+  background-color: transparent;
 }
 
 .result-item .subtitle .highlight {
   color: var(--grey-90);
   font-weight: 500;
+  background-color: transparent;
 }
 
 .theme-dark .result-item .title .highlight,

src/components/QuickOpenModal.js

@@ -320,8 +320,13 @@ export class QuickOpenModal extends Component<Props, State> {
 
   /* eslint-disable react/no-danger */
   renderHighlight = (candidateString: string, query: string, name: string) => {
-    const html = fuzzyAldrin.wrap(candidateString, query);
-
+    const options = {
+      wrap: {
+        tagOpen: '<mark class="highlight">',
+        tagClose: "</mark>"
+      }
+    };
+    const html = fuzzyAldrin.wrap(candidateString, query, options);
     return <div dangerouslySetInnerHTML={{ __html: html }} />;
   };