Skip to content
This repository was archived by the owner on Jan 22, 2026. It is now read-only.

Update Styling to SearchResults component#126

Merged
anjapatel merged 1 commit intomasterfrom
anjali/update-results-list-style
Oct 16, 2020
Merged

Update Styling to SearchResults component#126
anjapatel merged 1 commit intomasterfrom
anjali/update-results-list-style

Conversation

@anjapatel
Copy link
Copy Markdown

@anjapatel anjapatel commented Oct 16, 2020

I updated some of the styling for the SearchResults component to match the Figma for the new private project overlay: https://www.figma.com/file/LLBMwcB37R4fQrn7kgZKUi/061820_PrivateProjects_MI%2BKAC?node-id=585%3A643

Some things to note/outstanding questions:

  • In the Figma, the text on hover and focus is white. I chatted with @iuloshi and she suggested making it black for accessibility reasons, and that's what's reflected in this PR.
  • Will we run into issues with the padding when we put user avatars next to the result item names and description?
  • The result item description text looks like it's a little bigger than the result item name, but I copied over the font-size and line height from the Figma. Let me know if I should adjust accordingly or leave as is.

Original search results list
original search results list

New search results list. The blue results in the screenshots are the ones being hovered on!

new results list light mode

It also looks like that white text on yellow isn't very accessible either — I can change that, or leave it since we don't use it anywhere and we'll be changing the shared component library anyway.

new results list dark mode

@anjapatel anjapatel requested review from a team and pheebcodes and removed request for a team and pheebcodes October 16, 2020 19:50
color: black;

${ResultDescription} {
color: var(--colors-selected-secondary);
Copy link
Copy Markdown
Contributor

@keithk keithk Oct 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After removing this variable does this look right on both light/dark mode?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohhh good catch. The background color #5a78ff is the same in both in both light and dark mode so it should be fine, and I didn't see anything strange when I checked @keithk

@anjapatel anjapatel merged commit 48cd916 into master Oct 16, 2020
@anjapatel anjapatel deleted the anjali/update-results-list-style branch October 16, 2020 20:41
@keithk
Copy link
Copy Markdown
Contributor

keithk commented Nov 10, 2020

🚀 PR was released in v0.19.0 🚀

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants