avo-hq / avo-hq/marksmith

Improve clickability feedback for resource cards

Open
#116 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
556
Forks
30
PR merge metrics
No merged PRs in 30d

Description

### Problem:
Currently, the resource cards on the main dashboard (e.g., "Fantastic CRUD UI," "Advanced Search") provide minimal visual feedback to indicate they are interactive and clickable. The only current indicator is a cursor change to a pointer on hover. This lacks sufficient affordance, which can lead to a poor user experience and make the navigation feel less intuitive.

### Solution:
Enhanced the visual feedback for these interactive cards to make their tappable/clickable state more obvious. This was achieved by implementing a subtle but clear visual transformation on hover/focus.

### Changes Made:

- Added a slight scale transform (e.g., scale(1.02)) on hover to give a "lifting" effect.
- Applied a subtle background color or shadow change on hover to further distinguish the card from the static background.
- Ensured focus states are styled for accessibility when navigating via keyboard.

### Result:
The cards now provide a clear and modern visual cue that they are interactive elements, significantly improving the perceived usability and user confidence.

### Screenshot:
Image

Contributor guide

No contributing guide indexed for this repository

Research direction

No file or test is named in the issue. Start by locating the main dashboard resource-card markup and its existing hover styles, then verify the scale, background or shadow, and keyboard-focus feedback in the dashboard; done means the cards visibly communicate interactivity without reducing accessible focus visibility.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.