Enhance search results display

[brymut]

Description

closes #2042

Add visual enhancement to search results to improve readability w. Using existing brand colours with appropriate contrast:

• Grey background for each item with margin
• Left border line, colour coded to differentiate between posts and comments.
• Legend guide for colours to guide users on the difference between the results.

Screenshots

Desktop (light mode)

Desktop (dark mode)

Mobile (light mode)

Mobile (dark mode)

Additional Context

Was anything unclear during your work on this PR? Anything we should definitely take a closer look at?

Checklist

Are your changes backward compatible? Please answer below:
Y
For example, a change is not backward compatible if you removed a GraphQL field or dropped a database column.

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
10

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
Y

Did you introduce any new environment variables? If so, call them out explicitly here:
N

[brymut]

Also just noticed an interesting rounding error for the sats balance.

[huumn]

tbh I was expecting something more subtle and/or familiar. but tbf I don't know what that looks like.

this gets the job done though. I just need more time to think about this before deciding to merge it

[brymut]

ok, was just following the spec. My rationale was just grabbing the background grey from how its handled in comments to separate the results. And to differentiate between comments & posts I grabbed colors used elsewhere in the UI so as to not veer off from existing brand identity, otherwise was just following spec.

[brymut]

tbh I was expecting something more subtle and/or familiar. but tbf I don't know what that looks like.

Reduced the thickness of the border line to help with subtlety, otherwise my rationale is on the comment above. Updated screenshots in the PR desc