Commit 9e3fb78
Fabio Bozzo
style: add hover effects to account menu button in multichain account cell (#37576)
## Description
Fixes the kebab button hover highlighting issue where the button would
become highlighted when hovering anywhere on the account cell.
## **Changelog**
- Removed kebab button styling from account cell hover state
- Added direct hover state to kebab button component
- Kebab button now only highlights when directly hovered
CHANGELOG entry: null
## **Related issues**
Fixes: #35985
## **Manual testing steps**
1. Open the account list
2. Hover an account row -> the kebab menu keeps its default style
3. Hover the kebab menu -> it gets highlighted
## **Screenshots/Recordings**
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
### **Before**
<img width="394" height="117" alt="image"
src="https://github.com/user-attachments/assets/1c2450fe-0fd1-4abc-b28a-c069dcf32f7e"
/>
### **After**
https://github.com/user-attachments/assets/34e6dc54-32c7-44ee-87e1-685589e053e4
## **Pre-merge author checklist**
- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> Shift kebab/menu button highlight from cell hover to direct button
hover, keeping only name color change on cell hover.
>
> - **UI (SCSS)**
> -
`ui/components/multichain-accounts/multichain-account-cell/index.scss`
> - Remove hover styling targeting
`multichain-account-cell-popover-menu-button` and its icon from the cell
hover state; retain account name color change on cell hover.
> -
`ui/components/multichain-accounts/multichain-account-menu/index.scss`
> - Add direct `:hover` styles to
`multichain-account-cell-popover-menu-button` and its icon to control
highlight behavior.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
3202e6a. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->1 parent 08b8492 commit 9e3fb78
File tree
2 files changed
+8
-8
lines changed- ui/components/multichain-accounts
- multichain-account-cell
2 files changed
+8
-8
lines changedLines changed: 0 additions & 8 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
23 | 23 | | |
24 | 24 | | |
25 | 25 | | |
26 | | - | |
27 | | - | |
28 | | - | |
29 | | - | |
30 | | - | |
31 | | - | |
32 | | - | |
33 | | - | |
34 | 26 | | |
35 | 27 | | |
Lines changed: 8 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
2 | 2 | | |
3 | 3 | | |
4 | 4 | | |
| 5 | + | |
| 6 | + | |
| 7 | + | |
| 8 | + | |
| 9 | + | |
| 10 | + | |
| 11 | + | |
| 12 | + | |
5 | 13 | | |
6 | 14 | | |
7 | 15 | | |
| |||
0 commit comments