Skip to content

style: Update Send network avatar styling and search spacing #31955

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 23, 2025

Conversation

amandaye0h
Copy link
Contributor

@amandaye0h amandaye0h commented Apr 15, 2025

Description

This updates the network badge styling so that it looks consistent on the home page and in the Send flow.

Open in GitHub Codespaces

Related issues

Fixes:

Manual testing steps

  1. Open MetaMask
  2. Send
  3. Click on the NFT tab
  4. Send an NFT

Screenshots/Recordings

Before

Screen.Recording.2025-04-15.at.9.02.01.AM.mov

After

Screen.Recording.2025-04-15.at.8.58.43.AM.mov

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.

Copy link
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.

@metamaskbot
Copy link
Collaborator

✨ Files requiring CODEOWNER review ✨

🖥️ @MetaMask/wallet-ux

  • ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal-search.tsx
  • ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
  • ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx

@metamaskbot
Copy link
Collaborator

Builds ready [220b2d9]
UI Startup Metrics (1189 ± 62 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1189109114316212231308
load103094712395310551118
domContentLoaded102594212355310491108
domInteractive17136181631
firstPaint73680120840210421109
backgroundConnect7423279
firstReactRender22155872237
getState1253571825
initialActions001001
loadScripts79070498551815868
setupStore75172812
WebpackHomeuiStartup21241737261417222352350
load16321346203012617341799
domContentLoaded16251343201212517281791
domInteractive161163101347
firstPaint1766239264211315
backgroundConnect251075142660
firstReactRender22854454121339365
getState144325321325
initialActions316135
loadScripts16211341198912417241788
setupStore196254252032
FirefoxBrowserifyHomeuiStartup13311150182112913901661
load1189993167513312681514
domContentLoaded1188992167513312671514
domInteractive993930433112151
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect2012106112033
firstReactRender21193022227
getState74233812
initialActions001001
loadScripts1170979157313112481499
setupStore6425268
WebpackHomeuiStartup15191349208013615751769
load12981158182612413461526
domContentLoaded12981158182512413461526
domInteractive83352392790140
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect22147192231
firstReactRender35294733741
getState11432232914
initialActions001011
loadScripts12781139180612413231506
setupStore95517829
cc: @HowardBraham
Benchmark value 1661 exceeds gate value 1660 for firefox browserify home p95 uiStartup
Benchmark value 1514 exceeds gate value 1495 for firefox browserify home p95 load
Benchmark value 1514 exceeds gate value 1495 for firefox browserify home p95 domContentLoaded
Benchmark value 1499 exceeds gate value 1475 for firefox browserify home p95 loadScripts
Benchmark value 29 exceeds gate value 28 for firefox webpack home p95 setupStore
Sum of mean exceeds: 0ms | Sum of p95 exceeds: 64ms
Sum of all benchmark exceeds: 64ms

Bundle size diffs
  • background: 0 Bytes (0%)
  • ui: 63 Bytes (0%)
  • common: 0 Bytes (0%)

@amandaye0h amandaye0h requested a review from micaelae April 21, 2025 17:15
@amandaye0h amandaye0h marked this pull request as ready for review April 21, 2025 17:15
@amandaye0h amandaye0h requested a review from a team as a code owner April 21, 2025 17:15
@micaelae micaelae enabled auto-merge April 23, 2025 16:22
@micaelae micaelae added this pull request to the merge queue Apr 23, 2025
github-merge-queue bot pushed a commit that referenced this pull request Apr 23, 2025
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This updates the network badge styling so that it looks consistent on
the home page and in the Send flow.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/31955?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Open MetaMask
2. Send
3. Click on the NFT tab
4. Send an NFT

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**



https://github.com/user-attachments/assets/1e76c03e-360c-4b09-9f55-74f9d4faa841



### **After**



https://github.com/user-attachments/assets/eefba921-f4c1-4920-966b-1072ef1777b5



## **Pre-merge author checklist**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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.
@metamaskbot
Copy link
Collaborator

Builds ready [9259616]
UI Startup Metrics (1222 ± 63 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyHomeuiStartup1222111414546312571337
load105895612786110881155
domContentLoaded105294812726010831147
domInteractive18146691730
firstPaint659132132343210661149
backgroundConnect74182811
firstReactRender20164752131
getState1354281928
initialActions001001
loadScripts814711101957846908
setupStore84192811
WebpackHomeuiStartup21571762258116522552395
load16661365204412317701854
domContentLoaded16581362202312117631844
domInteractive161160101447
firstPaint1957455477242350
backgroundConnect2810342342858
firstReactRender21955392118335364
getState154276281532
initialActions612722746
loadScripts16541360199912117591832
setupStore227293362141
FirefoxBrowserifyHomeuiStartup13141135173012313611601
load11671007156611412051469
domContentLoaded11671007156611412051469
domInteractive963923729106151
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect2212109152067
firstReactRender22195462129
getState9416416726
initialActions001001
loadScripts1148993155311611861453
setupStore8416616612
WebpackHomeuiStartup14681294176210915471673
load12591125157510013171441
domContentLoaded12591124157510013171440
domInteractive77341432185127
firstPaintNaNNaNNaNNaNNaNNaN
backgroundConnect201376102039
firstReactRender34287963542
getState84446713
initialActions002111
loadScripts1240111015579713001414
setupStore94708825
Benchmark value 350 exceeds gate value 334 for chrome webpack home p95 firstPaint
Benchmark value 26 exceeds gate value 24 for firefox browserify home p95 getState
Sum of mean exceeds: 0ms | Sum of p95 exceeds: 18ms
Sum of all benchmark exceeds: 18ms

Bundle size diffs
  • background: 0 Bytes (0%)
  • ui: 63 Bytes (0%)
  • common: 0 Bytes (0%)

Merged via the queue into main with commit db9d969 Apr 23, 2025
169 checks passed
@micaelae micaelae deleted the send-tokens-styling branch April 23, 2025 18:12
@github-actions github-actions bot locked and limited conversation to collaborators Apr 23, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants