chore: PortfolioView™: Design Review Cleanup: Networks, sort, & Menu

[darkwing]

Description

Improves various design review aspects pointed out by @amandaye0h

Related issues

Fixes:

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• 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 format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[github-actions]

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.

[darkwing]

[darkwing]

Did this with CSS because the CurrencyDisplay component doesn't use DS, and I desperately want to avoid changing that as it's used everywhere.

[darkwing]

[darkwing]

Icons:

[metamaskbot]

Builds ready [992abf4]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2061 ± 88 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	331	2461	1974	417	200
		domContentLoaded	1715	2360	2021	156	75
		load	1724	2471	2061	183	88
		domInteractive	23	220	59	50	24
		backgroundConnect	9	181	44	41	20
		firstReactRender	61	303	117	49	24
		getState	4	74	25	22	11
		initialActions	0	1	0	0	0
		loadScripts	1213	1761	1487	140	67
		setupStore	6	58	15	15	7
		uiStartup	1934	2843	2337	255	122

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 469 Bytes (0.01%)
• common: 0 Bytes (0.00%)

[georgewrmarshall]

LGTM. I noticed some instances of ButtonBase outside of this PR that should be using ButtonIcon, but those can be refactored in a subsequent PR.