nuxters icon indicating copy to clipboard operation
nuxters copied to clipboard

refactor: home card accessibility & design

Open vachmara opened this issue 2 months ago โ€ข 0 comments

๐Ÿ”— 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 UButton props such as to, label, and external for navigation actions (GitHub/Discord connect, profile sharing), improving accessibility and maintainability.
  • Updated event handling for logout and profile sharing buttons to use Vueโ€™s .stop modifier 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 from HomeCard.vue, eliminating unused and redundant CSS classes related to card, button, and checkbox styling.
  • Minor adjustment in app.config.ts to simplify the button border class definition by removing a redundant border width specification.

Minor UI Consistency Fixes:

  • Updated avatar image sources to use contributor.username directly, ensuring consistent avatar rendering.
  • Fixed utility class usage in profile card backgrounds for consistent styling across breakpoints and hover states in [username].vue.

vachmara avatar Oct 23 '25 11:10 vachmara