[Design Quality]: Update styling of Ramps Card - Githubissues

MetaMask / metamask-extension

:globe_with_meridians: :electric_plug: The MetaMask browser extension enables browsing Ethereum blockchain enabled websites

https://metamask.io

Other

11.83k stars 4.83k forks source link

[Design Quality]: Update styling of Ramps Card #26321

Open amandaye0h opened 1 month ago

amandaye0h commented 1 month ago

Describe the bug

The spacing of the card is inconsistent, which makes the alignment on the page inconsistent. Adjusting this will improve the polish of the home page.

Expected behavior

Acceptance Criteria

Padding between “Fund your wallet” and “get started” = 0px
Padding between “Get started...” and “Buy ETH” = 0px
“Getting started” margin bottom = 8px
Card margin = 16px
Card top/bottom padding = 12px and left/right = 16px
“Get started” text width reduced to 60%
close icon added on the top right
Changes are applied to NFT and Activity variations

Screenshots/Recordings

Screenshot 2024-08-02 at 8 10 25 AM

Steps to reproduce

Onboard to MM
Create new wallet (Do not select import wallet)

Error messages or log output

No response

Detection stage

In production (default)

Version

11.16.15

Build type

None

Browser

Chrome

Operating system

MacOS

Hardware wallet

No response

Additional context

Ping @amandaye0h (Assets Designer) for additional context

Severity

No response

anaamolnar commented 1 month ago

Hey @amandaye0h Thanks for reporting! I will pass this on to the team.