feat: add hover effect to skill and plugin cards#1356
feat: add hover effect to skill and plugin cards#1356kevinw-openai wants to merge 1 commit intoopenclaw:mainfrom
Conversation
|
@kevinw-openai is attempting to deploy a commit to the 0xBuns Team on Vercel. A member of the Team first needs to authorize it. |
Greptile SummaryThis PR adds button-consistent hover and keyboard-focus feedback to
Confidence Score: 5/5Safe to merge — change is purely additive CSS with no functional regressions. All findings are P2 style/cleanup suggestions (an unused transition property and a redundant CSS declaration). No logic errors, no accessibility regressions, and no cross-browser concerns. The hover behavior works correctly for both link-style cards and div-container cards. No files require special attention.
|
| Filename | Overview |
|---|---|
| src/styles.css | Adds hover/focus-within/focus-visible transitions to .skill-card, plus a dark-theme box-shadow override. Two minor style nits: an unused background transition property and a redundant border-color in the dark-mode block. |
Prompt To Fix All With AI
This is a comment left during a code review.
Path: src/styles.css
Line: 1648-1650
Comment:
**Unused `background` transition property**
`background 0.2s ease` is listed in the transition shorthand, but none of the hover or focus-within rules actually change the background color. This means the property is transitioning nothing and can be removed to keep the declaration clean.
```suggestion
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
```
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: src/styles.css
Line: 1664-1668
Comment:
**Redundant `border-color` declaration in dark-theme override**
`border-color: var(--border-ui-hover)` is already set by the base `.skill-card:hover, .skill-card:focus-within` rule above. Because CSS custom properties are resolved at computed time, the variable will automatically pick up whatever value `[data-theme="dark"]` defines for `--border-ui-hover`. Repeating the same declaration here is a no-op — only the `box-shadow` override is needed.
```suggestion
[data-theme="dark"] .skill-card:hover,
[data-theme="dark"] .skill-card:focus-within {
box-shadow: 0 14px 28px rgba(7, 15, 20, 0.36);
}
```
How can I resolve this? If you propose a fix, please make it concise.Reviews (1): Last reviewed commit: "feat: add hover feedback to skill cards" | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| border-color 0.2s ease, | ||
| background 0.2s ease; | ||
| } |
There was a problem hiding this comment.
background transition property
background 0.2s ease is listed in the transition shorthand, but none of the hover or focus-within rules actually change the background color. This means the property is transitioning nothing and can be removed to keep the declaration clean.
| border-color 0.2s ease, | |
| background 0.2s ease; | |
| } | |
| transition: | |
| transform 0.2s ease, | |
| box-shadow 0.2s ease, | |
| border-color 0.2s ease; |
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/styles.css
Line: 1648-1650
Comment:
**Unused `background` transition property**
`background 0.2s ease` is listed in the transition shorthand, but none of the hover or focus-within rules actually change the background color. This means the property is transitioning nothing and can be removed to keep the declaration clean.
```suggestion
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
```
How can I resolve this? If you propose a fix, please make it concise.| [data-theme="dark"] .skill-card:hover, | ||
| [data-theme="dark"] .skill-card:focus-within { | ||
| border-color: var(--border-ui-hover); | ||
| box-shadow: 0 14px 28px rgba(7, 15, 20, 0.36); | ||
| } |
There was a problem hiding this comment.
border-color declaration in dark-theme override
border-color: var(--border-ui-hover) is already set by the base .skill-card:hover, .skill-card:focus-within rule above. Because CSS custom properties are resolved at computed time, the variable will automatically pick up whatever value [data-theme="dark"] defines for --border-ui-hover. Repeating the same declaration here is a no-op — only the box-shadow override is needed.
| [data-theme="dark"] .skill-card:hover, | |
| [data-theme="dark"] .skill-card:focus-within { | |
| border-color: var(--border-ui-hover); | |
| box-shadow: 0 14px 28px rgba(7, 15, 20, 0.36); | |
| } | |
| [data-theme="dark"] .skill-card:hover, | |
| [data-theme="dark"] .skill-card:focus-within { | |
| box-shadow: 0 14px 28px rgba(7, 15, 20, 0.36); | |
| } |
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/styles.css
Line: 1664-1668
Comment:
**Redundant `border-color` declaration in dark-theme override**
`border-color: var(--border-ui-hover)` is already set by the base `.skill-card:hover, .skill-card:focus-within` rule above. Because CSS custom properties are resolved at computed time, the variable will automatically pick up whatever value `[data-theme="dark"]` defines for `--border-ui-hover`. Repeating the same declaration here is a no-op — only the `box-shadow` override is needed.
```suggestion
[data-theme="dark"] .skill-card:hover,
[data-theme="dark"] .skill-card:focus-within {
box-shadow: 0 14px 28px rgba(7, 15, 20, 0.36);
}
```
How can I resolve this? If you propose a fix, please make it concise.1 participant
Summary
This PR adds button-style hover feedback to all cards that use the shared
.skill-cardstyling, including skill and plugin cards across the site.Why
Interactive buttons on ClawHub already provide clear hover feedback, but skill/plugin cards remained visually static. That made the UI feel a bit inconsistent and reduced the sense that these cards are interactive.
This change makes card interactions feel more intentional and aligned with the rest of the product.
What Changed
Before
After
Verification
bun run lintbun run build