refactor: home card accessibility & design #323
Conversation
| canUnlockNuxterBadge ? 'primary-button' : 'bg-neutral-900', | ||
| { 'cursor-auto hover:bg-neutral-950': !canUnlockNuxterBadge }, | ||
| { 'primary-button-discord': !linked.discord && canUnlockNuxterBadge }, | ||
| { 'cursor-auto hover:bg-neutral-950 text-primary-400': linked.discord && canUnlockNuxterBadge }, | ||
| ]" |
There was a problem hiding this comment.
don't we want to have a different colour if it's possible to unlock the discord badge?
There was a problem hiding this comment.
something like that?
|
@vachmara I fixed some display issues but maybe not the existing accessibilities issues and not reviewed the design so feel free to suggest changes if you want! |
|
Great, I'll look into it, thanks! |
|
@vachmara is attempting to deploy a commit to the Nuxt Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
I've just launched the project locally and I've got quite a few visual bugs Logged with Github: Logged with Github and Discord: |
|
Looking into it |
|
This should now be fixed @HugoRCD I also fixed |
|
Much better, the only thing missing is the button's hover state, which I find a little odd (you can see the line behind it). 
|
|
Nice catch! I’ve updated the hover background color |
|
Ok I'm not a big fan of this green but it also lacks CleanShot.2026-01-02.at.15.51.36.mp4 |
Maybe we should use the same button variant and color. I’m not a fan of the current one either, and I couldn’t find a variation that feels satisfying Alternatively, we could improve the outline primary variant, which comes from the old design? |
It doesn't really matter to me, just make it a bit more good looking! |
|
Okay! Should be better now |
|
Ok sorry to be a bit of a pain, first it looks better without the button but the user should still be shown a button to share his profile, then I don't have the impression that you can click on the card to open your profile 🤔 And once the badges are retrieved there should be no more link to click on the button then we are redirected to discord again |
|
All good, I missed quite a few details on my side 😅 We should probably add test cases to avoid rollbacks later |
|
Ok I think it's perfect now except for the responsive which could be handled a little better, but then it really would be perfect! 
|
|
Perfect, it's fixed! |
|
lgtm, thank you very much 🙌 |
3 participants
🔗 Linked issue
❓ Type of change
📚 Description
This pull request refactors several UI components in
HomeCard.vueand[username].vueto improve accessibility, streamline navigation, and enhance the user experience. The most significant changes include replacing anchor tags with direct button navigation, updating button variants and labels for clarity, and applying minor style adjustments for consistency.Navigation and Accessibility Improvements:
:toprop and added appropriate labels for better accessibility inUButtoncomponents.:toprop for navigation instead of relying on click events, making the code cleaner and more maintainable.Button and Badge UI Enhancements:
solidoroutlinevariant based on unlock status, and added navigation and label props for improved clarity.@click.stopmodifier for event handling, simplifying the code.Style Consistency:
[username].vuefor consistency and readability (bg-size-[300%]andsm:p-11).