feat: add hover animation to conversation context menu button #2168
Conversation
Adds visual feedback when hovering over the three-dot menu button in conversation tiles. This makes it clear that the submenu is being targeted rather than the parent item. Changes: - Added rounded hover background with smooth transition - Increased clickable area for better UX - Supports both light and dark themes Closes arc53#2097 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
| @JustACodeA is attempting to deploy a commit to the Arc53 Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
This PR adds hover animation feedback to the three-dot menu button in conversation tiles, improving the user experience by visually indicating when the button is being targeted for interaction. The implementation uses Tailwind CSS utility classes to create a rounded background with smooth transitions that supports both light and dark themes.
Key Changes:
- Enhanced the menu button styling with rounded hover background and centered layout
- Added transition animation for smooth visual feedback
- Expanded the button's clickable area from width-only (w-4) to both height and width (h-6 w-6)
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| setOpen(!isOpen); | ||
| }} | ||
| className="mr-2 flex w-4 justify-center" | ||
| className="mr-2 flex h-6 w-6 items-center justify-center rounded-full transition-colors duration-200 hover:bg-gray-300 dark:hover:bg-gray-600" |
There was a problem hiding this comment.
The transition property should be transition-all instead of transition-colors duration-200 for consistency with similar icon buttons in the codebase. For example, SettingsBar.tsx uses transition-all for similar h-6 w-6 rounded-full icon buttons with hover states.
| className="mr-2 flex h-6 w-6 items-center justify-center rounded-full transition-colors duration-200 hover:bg-gray-300 dark:hover:bg-gray-600" | |
| className="mr-2 flex h-6 w-6 items-center justify-center rounded-full transition-all hover:bg-gray-300 dark:hover:bg-gray-600" |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 participant
Adds visual feedback when hovering over the three-dot menu button in conversation tiles. This makes it clear that the submenu is being targeted rather than the parent item.
Changes:
Closes #2097