This change makes the entire Collection card clickable.
We do this by using the <Link> tag as the top-level node for the Card. Using a Link tag allows us to take advantage of its builtin benefits:
Ability to tab to the card
Ability to click into the link by pressing Enter on the keyboard
Use react-router's browser history management without needing to force a refresh
I also added some CSS changes here to add some hover effects when the card or card title is moused over.
Screenshots or Videos (if applicable)
Related Issues
Closes #259
Test Plan
Create a new collection
Go to "My Collections"
Click anywhere on the card to access the collection. It should work.
Go back. Now click on the title. The title should still work as a link.
Go back. Click on the trash can icon. This should not trigger the Collection link, instead the confirmation modal should pop up asking if we're sure if we want to delete.
Checklist Before Requesting a Review
[x] I have performed a self-review of my code
[x] My code follows the Style Guidelines and Best Practices outlined in the project wiki
[x] I have commented my code, particularly in hard-to-understand areas
[x] I have made changes to the documentation, if applicable
[x] My change generates no new warnings or failed tests
[ ] If it is a core feature, I have added thorough tests
Summary
This change makes the entire Collection card clickable. We do this by using the
<Link>tag as the top-level node for the Card. Using a Link tag allows us to take advantage of its builtin benefits:I also added some CSS changes here to add some hover effects when the card or card title is moused over.
Screenshots or Videos (if applicable)
Related Issues
Closes #259
Test Plan
Checklist Before Requesting a Review