nuxters
nuxters copied to clipboard
refactor: home card accessibility & design
๐ Linked issue
โ Type of change
- [ ] ๐ Documentation (updates to the documentation or readme)
- [ ] ๐ Bug fix (a non-breaking change that fixes an issue)
- [x] ๐ Enhancement (improving an existing functionality)
- [ ] โจ New feature (a non-breaking change that adds functionality)
- [ ] ๐งน Chore (updates to the build process or auxiliary tools and libraries)
- [ ] โ ๏ธ Breaking change (fix or feature that would cause existing functionality to change)
๐ Description
This pull request refactors several UI components for improved code clarity, accessibility, and consistency, especially around HomeCard component.
UI Refactoring and Button Improvements:
- Replaced custom anchor tags with standardized
UButtonprops such asto,label, andexternalfor navigation actions (GitHub/Discord connect, profile sharing), improving accessibility and maintainability. - Updated event handling for logout and profile sharing buttons to use Vueโs
.stopmodifier for click events, ensuring proper event propagation control. - Standardized button color and variant usage for Discord badge unlocking and profile sharing actions, removing conditional class logic and using consistent props.
Code and Style Cleanup:
- Removed the entire
<style>block fromHomeCard.vue, eliminating unused and redundant CSS classes related to card, button, and checkbox styling. - Minor adjustment in
app.config.tsto simplify the button border class definition by removing a redundant border width specification.
Minor UI Consistency Fixes:
- Updated avatar image sources to use
contributor.usernamedirectly, ensuring consistent avatar rendering. - Fixed utility class usage in profile card backgrounds for consistent styling across breakpoints and hover states in
[username].vue.