Skip to content

chore: Polish MainActionButton to match designs#27342

Merged
brianacnguyen merged 2 commits into
mainfrom
main-buttons/dqa
Mar 16, 2026
Merged

chore: Polish MainActionButton to match designs#27342
brianacnguyen merged 2 commits into
mainfrom
main-buttons/dqa

Conversation

@amandaye0h

@amandaye0h amandaye0h commented Mar 11, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Contributor

Description

This PR refines the main action buttons to match the design specs. Update the vertical padding from 16px > 12px to improve the spacing.

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

Screenshot 2026-03-11 at 7 43 58 PM

Pre-merge author checklist

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.

Note

Low Risk
Low risk visual-only spacing change that updates styles and corresponding Jest snapshots without altering behavior or data flow.

Overview
Polishes MainActionButton spacing by reducing paddingVertical from 16 to 12 in MainActionButton.styles.ts to better match design specs.

Updates Jest snapshots for MainActionButton and screens that render it (e.g., AccountsMenu scan button and AssetDetailsActions buttons) to reflect the new padding.

Written by Cursor Bugbot for commit 0950cef. This will update automatically on new commits. Configure here.

@github-actions

github-actions Bot commented Mar 11, 2026

Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@github-actions

github-actions Bot commented Mar 11, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: None (no tests recommended)
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 90%
click to see 🤖 AI reasoning details

E2E Test Selection:
The only functional change is a small UI style adjustment in MainActionButton (paddingVertical reduced from 16 to 12). All other modified files are snapshot updates reflecting this visual change. There are no changes to controllers, Engine, navigation, business logic, state management, or critical user flows. While MainActionButton is widely reused across flows (send, swap, confirmations, etc.), this change only affects vertical padding and does not modify behavior, props, handlers, or layout structure in a way that would impact E2E flow execution. The risk is limited to minor visual spacing differences, which are adequately covered by component snapshot tests already updated in this PR.

Performance Test Selection:
The change only adjusts static padding in a style definition. There is no impact on rendering complexity, list virtualization, state updates, network calls, or startup logic. Therefore, no measurable performance impact is expected.

View GitHub Actions results

@sonarqubecloud

sonarqubecloud Bot commented Mar 11, 2026

Copy link
Copy Markdown

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@amandaye0h amandaye0h marked this pull request as ready for review March 11, 2026 19:14
@amandaye0h amandaye0h requested a review from a team as a code owner March 11, 2026 19:14
cursor[bot]
cursor Bot reviewed Mar 11, 2026
View reviewed changes

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Comment thread app/component-library/components-temp/MainActionButton/MainActionButton.styles.ts
borderRadius: 12,
paddingHorizontal: 4,
paddingVertical: 16,
paddingVertical: 12,

@cursor cursor Bot Mar 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Skeleton height not updated after padding change

Medium Severity

The SKELETON_BUTTON_HEIGHT in TokenDetailsActions.tsx is still 74, derived from the old paddingVertical of 16 (comment on line 15: 16 * 2 + 24 + 2 + ~16 = 74). With paddingVertical now changed to 12, the correct height is approximately 12 * 2 + 24 + 2 + 16 = 66. The stale skeleton height causes a visible layout shift when the loading skeleton is replaced by the actual buttons.

Fix in Cursor Fix in Web

@brianacnguyen brianacnguyen added this pull request to the merge queue Mar 16, 2026
Merged via the queue into main with commit df1eeeb Mar 16, 2026
70 checks passed
@brianacnguyen brianacnguyen deleted the main-buttons/dqa branch March 16, 2026 15:04
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 16, 2026
@metamaskbot metamaskbot added the release-7.71.0 Issue or pull request that will be included in release 7.71.0 label Mar 16, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@brianacnguyen brianacnguyen brianacnguyen approved these changes

Assignees

No one assigned

Labels

release-7.71.0 Issue or pull request that will be included in release 7.71.0 size-XS team-assets

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@amandaye0h @brianacnguyen @metamaskbot