Skip to content

Commit 9e3fb78

Browse files
author
Fabio Bozzo
authored
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

2 files changed

+8
-8
lines changed

ui/components/multichain-accounts/multichain-account-cell/index.scss

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,5 @@
2323
.multichain-account-cell__account-name {
2424
color: var(--color-primary-default);
2525
}
26-
27-
.multichain-account-cell__end_accessory .multichain-account-cell-popover-menu-button {
28-
background: var(--color-primary-muted);
29-
}
30-
31-
.multichain-account-cell__end_accessory .multichain-account-cell-popover-menu-button-icon {
32-
background-color: var(--color-primary-default);
33-
}
3426
}
3527
}

ui/components/multichain-accounts/multichain-account-menu/index.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22
cursor: pointer;
33
width: 28px;
44
height: 28px;
5+
6+
&:hover {
7+
background: var(--color-primary-muted);
8+
9+
.multichain-account-cell-popover-menu-button-icon {
10+
background-color: var(--color-primary-default);
11+
}
12+
}
513
}
614

715
.multichain-account-cell-popover-menu {

0 commit comments

Comments
 (0)