Chnaged the footer file to now underline the words when hovering the …#105
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the footer UI by implementing a coordinated hover effect where hovering over either the icon or text underlines the associated text label. The implementation uses CSS group classes to create a unified hover state across the entire link element.
Key Changes:
- Added CSS group classes to enable coordinated hover effects between icons and text
- Modified hover behavior to underline text when hovering anywhere on the link (icon or text)
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| > | ||
| <Search className="h-4 w-4" /> | ||
| <span className="hover:underline">Browse Items</span> | ||
| <Search className="h-4 w-4 no-underline" /> |
There was a problem hiding this comment.
The no-underline class is unnecessary here. Icons don't have text-decoration by default, so this class has no effect and should be removed.
| <Search className="h-4 w-4 no-underline" /> | |
| <Search className="h-4 w-4" /> |
| > | ||
| <User className="h-4 w-4" /> | ||
| <span className="hover:underline">My Account</span> | ||
| <User className="h-4 w-4 no-underline" /> |
There was a problem hiding this comment.
The no-underline class is unnecessary here. Icons don't have text-decoration by default, so this class has no effect and should be removed.
| <User className="h-4 w-4 no-underline" /> | |
| <User className="h-4 w-4" /> |
|
Embers2512
left a comment
Embers2512
left a comment
There was a problem hiding this comment.
good job on the change, everything works well and all tests still pass
…icon.
📌 Description
This PR improves the UI by now underlining the text when hovering over the icons in the footer. This makes it more intuitive for users that will be using the footer, to know that it is related to that text.
🔗 Related Issue(s)
Fixes #98
✅ Changes
Text is underlined when hovering over icons in the footer.
(Icon is hovered over in this image)
🧪 How to Test
Run either just the frontend or the front and backend, and hover over the icons in the footer.