Feat:Add hover feedback when selecting avatar in onboarding screen #861
Description
Describe the feature
Problem
On the onboarding screen (Step 2), users choose an avatar.
Right now, the avatars do not provide any hover feedback.
Because of this, it isn’t visually clear that they are clickable — especially for new users.
Improving the hover state will make selection more intuitive and interactive.
Proposed Enhancement
Add hover feedback on avatar cards:
- Slight scale-up animation on hover
- Soft glow / ring highlight
- Smooth transition (150–200ms)
- Cursor changes to pointer
This should only affect hover behavior (click selection styling should remain as-is).
Why this is useful
- Improves UX clarity
- Makes onboarding feel polished and responsive
- Matches modern UI interaction patterns
- Helps users immediately understand avatars are selectable
Implementation Notes (optional)
Component likely involved:
frontend/src/components/onboarding/AvatarPicker.tsx (or nearby UI code)
Can be implemented with simple Tailwind or CSS animations — no functional changes required.
Add ScreenShots
Before: No hover effect — looks static
After: Hover glow + scale makes interaction clear
Record
- I agree to follow this project's Code of Conduct
- I want to work on this issue
Checklist before Submitting.
- Have you updated docs for it?.
- Have you added unit tests?.
- Have you made sure unit tests pass?
- Have you made sure code formatting is correct?
- Does it contain any style related issues?