Fix interaction styles for the navigation bar and the footer links #642
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for idrc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
greatislander
requested changes
Jun 27, 2023
There was a problem hiding this comment.
There are a few issues with this— let's discuss when you have time, @chosww.
greatislander
requested changes
Jun 29, 2023
There was a problem hiding this comment.
One change that I can see— thanks for all your work on this, @chosww!
greatislander
requested changes
Jul 4, 2023
greatislander
approved these changes
Jul 4, 2023
jhung
approved these changes
Jul 4, 2023
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
npm run testwithout errorsnpm run buildwithout errorsDescription
I noticed that focus and hover styles for the items on navigation bar is broken in different themes. I did some investigation and found out that UIO applies different border colours for different themes and we didn't set any border on the navigation bar items, and that caused no focus and hover styles on them.
An approach I took for the nav bar items are to set transparent border on them all the time by overriding UIO styles, and on focus and hover states, apply correct UIO styles. This way, we can utilize UIO. A potential approach would be not to use UIO, and use outline for the focus and hover styles, but that would be a lot of custom css styles we may maintain in the future as UIO evolves.
I also noticed that focus and hover styles for items on the footer are off, so I made some adjustment to them.
Steps to test
Expected behavior:
Nav bar items should have proper interaction styles in different themes changed by UIO.