Update Search results to look less like a link

[daniellekirkwood]

Problem

When a user searches for a term its not clear that they've found what they're looking for as the "highlight" looks like a hyperlink

Solution

Instead of the green highlight, change the results to show bold and black text when there's a matching search term. Similar to Android results.

From	To

[aringenbach]

Hello @daniellekirkwood
How should we handle when a word is both a search result and a mention/link, like in the following example.
Should the black color from search result always override other colors ?

[daniellekirkwood]

Great question @aringenbach

@amshakal can you advise here?

[amshakal]

Great callout. I think we need an additional element to highlight searched item. On doing some competitive analysis, seems like having a yellow highlight might be the most familiar and efficient solution. Here is an example:

The highlight colour used is: FCC639 with 20% opacity for light mode and FCC639 with 30% opacity for dark mode.

Let me know if you have any questions! TY :)

[daniellekirkwood]

@amshakal Should the result be in bold or highlighted, or both?

[amshakal]

I think we can do without bold.

[daniellekirkwood]

Great! I've added the screenshots you provided to the issue info above and will edit the labels as needed :D