[MPT-44] Change search result highlighting

[jeffzy15]

I have changed the search result highlighting from italics to bold.

[netlify]

✅ Deploy Preview for tender-meitner-99286b ready!

Name	Link
🔨 Latest commit	65dc9de
🔍 Latest deploy log	https://app.netlify.com/sites/tender-meitner-99286b/deploys/6550863ede39b600089dd9c6
😎 Deploy Preview	https://deploy-preview-653--tender-meitner-99286b.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[wei2912]

Think the highlighting should be of similar style to this:

#644 (comment)

Rather than simply applying bold or italics, which doesn't really stand out.

[wei2912]

See above comment. Note that your solution should avoid replacing the em tags with strong since em is meant to semantically represent emphasis (which can be styled in different ways, e.g. bold/italics/underline/highlighting) rather than styling the text specifically to be bold.

[jeffzy15]

I have changed the highlighting of the search result to be of similar style to the image provided in #644.

[jeffzy15]

I used dangerouslySetInnerHTML= {{ __html: displayName.replace( /<em[^>]*>/g, '<em style="background-color: transparent;">'), }} to remove the background colour styling for the search result in the expanded card view as there were 2 overlapping background colours in the expanded card view.

[wei2912]

Have a few more questions about the code, otherwise LGTM.