stackernews
Enhance search results display
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
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
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.
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
No prob, I understand. I though about it too for other issues too that may need design consideration, like https://github.com/stackernews/stacker.news/issues/795. What do you think would work for mocking up the designs? Maybe recreating the pages on Figma?
I'm not sure how it should work exactly, but I'll continue to think about it while I try to get through the PR backlog.
My first thought is we can create sub-issues on issues that require design work, then those sub-issues can have their own bounties.
Maybe I'll ask designers on SN how they think it should work.