fix(28081): design tweak for network badge #29324

DDDDDanica · 2024-12-18T15:33:21Z

Description

This PR address feedback from design quality check to tweak board color and width for network badge.

Related issues

Fixes: #28081

Manual testing steps

Go to this page...

Screenshots/Recordings

Before

See PR for related changes

After

See PR for related changes

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 · 2024-12-18T15:33:35Z

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.

DDDDDanica · 2024-12-18T15:36:00Z

ui/components/multichain/token-list-item/token-list-item.tsx

+              backgroundColor={BackgroundColor.backgroundDefault}
+              borderWidth={2}


Before:

After:

CSS breakdown:

Hey @DDDDDanica, should the before and after images be swapped? For example, should the 2px border be after and the 1px border be before?

Good spot ! switched 🙏🏻

DDDDDanica · 2024-12-18T15:38:24Z

ui/components/multichain/badge-status/badge-status.tsx

@@ -74,7 +74,7 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
              backgroundColor={badgeBackgroundColor}
              borderRadius={BorderRadius.full}
              borderColor={badgeBorderColor}
-              borderWidth={isConnectedAndNotActive ? 2 : 4}
+              borderWidth={2}


Before:

After:

Updated so now the background color of the badge matches the header icon

Before

After

DDDDDanica · 2024-12-18T15:42:51Z

ui/components/multichain/connected-site-menu/connected-site-menu.js

@@ -90,7 +90,7 @@ export const ConnectedSiteMenu = ({
                  ? BorderColor.successDefault
                  : BackgroundColor.backgroundDefault
              }
-              borderWidth={isConnectedtoOtherAccountOrSnap ? 2 : 3}
+              borderWidth={2}


Before (not connected):

After (not connected):

Before (connected):

After (connected)

:

DDDDDanica · 2024-12-18T15:43:29Z

ui/components/multichain/account-list-item/account-list-item.js

@@ -62,7 +62,7 @@ import {
  getMultichainShouldShowFiat,
 } from '../../../selectors/multichain';
 import { useMultichainAccountTotalFiatBalance } from '../../../hooks/useMultichainAccountTotalFiatBalance';
-import { ConnectedStatus } from '../connected-status/connected-status';
+import { ConnectedStatus } from '../connected-status';


Path simplification

metamaskbot · 2024-12-18T16:29:25Z

Builds ready [1061690]

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
- 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 (1747 ± 68 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1539	2148	1750	151	72
		domContentLoaded	1529	2066	1710	139	67
		load	1541	2106	1747	141	68
		domInteractive	25	84	45	21	10
		backgroundConnect	10	81	37	21	10
		firstReactRender	15	70	29	19	9
		getState	5	65	20	20	10
		initialActions	0	1	0	0	0
		loadScripts	1125	1582	1287	120	58
		setupStore	6	70	14	17	8
		uiStartup	1773	2378	1984	157	75

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -61 Bytes (-0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2024-12-18T18:56:30Z

Builds ready [573e5a7]

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
- 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, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1862 ± 212 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	274	3361	1805	560	269
		domContentLoaded	1479	3335	1835	445	214
		load	1496	3363	1862	442	212
		domInteractive	23	141	55	33	16
		backgroundConnect	9	84	29	21	10
		firstReactRender	16	95	49	25	12
		getState	5	92	17	22	11
		initialActions	0	1	0	0	0
		loadScripts	1058	2630	1380	379	182
		setupStore	7	74	18	21	10
		uiStartup	1660	4008	2147	545	262

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -61 Bytes (-0.00%)
common: 0 Bytes (0.00%)

georgewrmarshall

LGTM! 🔥 I made some small updates hope that is ok!

georgewrmarshall · 2024-12-18T20:40:53Z

ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap

@@ -476,7 +476,7 @@ exports[`SnapUIAddress renders legacy Ethereum address 1`] = `
          <rect
            fill="#F29602"
            height="32"
-            transform="translate(-2.81750896228304 4.951916544006229) rotate(230.4 16 16)"
+            transform="translate(-2.8175089622830405 4.951916544006229) rotate(230.4 16 16)"
            width="32"
            x="0"
            y="0"


I found that these snapshots update regardless of changes not sure if we want to include them or not 🤔

I found similar thing in weird svg snapshot failure, FAIL ui/components/multichain/connect-accounts-modal/connect-accounts-modal.test.tsx (5.461 s), and this one only failed in github actions

Trying to manually applying those snapshot changes locally and see how it goes 🙇🏻‍♀️

Addressed: c27d151

georgewrmarshall · 2024-12-18T21:11:03Z

ui/components/multichain/badge-status/badge-status.stories.tsx

@@ -42,7 +42,7 @@ export const DefaultStory = Template.bind({});

 export const NotConnectedStory = Template.bind({});
 NotConnectedStory.args = {
-  badgeBackgroundColor: Color.borderMuted,
+  badgeBackgroundColor: BackgroundColor.iconAlternative,


Before

After

georgewrmarshall · 2024-12-18T21:12:34Z

ui/components/multichain/badge-status/badge-status.tsx

@@ -74,7 +74,7 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
              backgroundColor={badgeBackgroundColor}
              borderRadius={BorderRadius.full}
              borderColor={badgeBorderColor}
-              borderWidth={isConnectedAndNotActive ? 2 : 4}
+              borderWidth={2}


Updated so now the background color of the badge matches the header icon

Before

After

georgewrmarshall · 2024-12-18T21:14:13Z

ui/components/multichain/connected-status/connected-status.tsx

-  let badgeBackgroundColor = Color.borderMuted; // //TODO: Replace it once Background color has this value.
+  let badgeBorderColor = BorderColor.backgroundDefault; // TODO: Replace it once border-color has this value.
+  let badgeBackgroundColor = BackgroundColor.iconAlternative;


We recently updated border muted to be transparent which is why the UI looked "broken" I've updated it to use icon/alternative. This also matches Figma

Thanks George ! that makes sense !

georgewrmarshall · 2024-12-18T21:19:21Z

ui/components/app/detected-token/detected-token-details/detected-token-details.js

@@ -43,6 +43,7 @@ const DetectedTokenDetails = ({
            src={CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId]}
            name={currentNetwork?.nickname || ''}
            backgroundColor={testNetworkBackgroundColor}
+            borderWidth={2}


Before

After

georgewrmarshall · 2024-12-18T21:21:06Z

ui/components/multichain/token-list-item/token-list-item.tsx

+              backgroundColor={BackgroundColor.backgroundDefault}
+              borderWidth={2}


Hey @DDDDDanica, should the before and after images be swapped? For example, should the 2px border be after and the 1px border be before?

metamaskbot · 2024-12-19T04:12:30Z

Builds ready [c27d151]

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
- 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, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1515 ± 59 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	397	1783	1459	274	131
		domContentLoaded	1328	1776	1496	121	58
		load	1336	1783	1515	124	59
		domInteractive	21	172	51	35	17
		backgroundConnect	8	53	20	13	6
		firstReactRender	15	72	34	23	11
		getState	4	45	12	13	6
		initialActions	0	1	0	0	0
		loadScripts	950	1383	1114	113	54
		setupStore	5	8	7	1	0
		uiStartup	1526	2001	1715	140	67

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -45 Bytes (-0.00%)
common: 0 Bytes (0.00%)

dbrans

Nice work!

NidhiKJha

LGTM

metamaskbot · 2024-12-20T15:33:36Z

Builds ready [b7f2147]

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, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1880 ± 66 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1558	2132	1883	137	66
		domContentLoaded	1547	2121	1861	137	66
		load	1557	2135	1880	137	66
		domInteractive	27	233	51	44	21
		backgroundConnect	9	71	22	17	8
		firstReactRender	18	78	47	25	12
		getState	6	50	13	13	6
		initialActions	0	1	0	0	0
		loadScripts	1126	1592	1390	110	53
		setupStore	7	58	20	18	9
		uiStartup	1829	2446	2156	136	66

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -45 Bytes (-0.00%)
common: 0 Bytes (0.00%)

DDDDDanica added team-design-system All issues relating to design system in Extension team-extension-platform team-wallet-ux labels Dec 18, 2024

DDDDDanica self-assigned this Dec 18, 2024

DDDDDanica requested a review from a team as a code owner December 18, 2024 15:33

DDDDDanica commented Dec 18, 2024

View reviewed changes

DDDDDanica force-pushed the fix/28081-design-tweak branch from 2311b79 to 1061690 Compare December 18, 2024 15:55

DDDDDanica requested review from a team as code owners December 18, 2024 15:55

fix(28081): design tweak for network badge

573e5a7

DDDDDanica force-pushed the fix/28081-design-tweak branch from 1061690 to 573e5a7 Compare December 18, 2024 18:23

georgewrmarshall added 3 commits December 19, 2024 07:39

chore: adjusting color to use icon alternative and replacing to dos

b6f2ae4

chore: updating snapshots

7d7970b

chore: reverting snapshot

584d0b7

georgewrmarshall previously approved these changes Dec 18, 2024

View reviewed changes

DDDDDanica dismissed georgewrmarshall’s stale review via e6fda0c December 18, 2024 22:18

DDDDDanica force-pushed the fix/28081-design-tweak branch 2 times, most recently from a8ccba3 to d224ed3 Compare December 19, 2024 03:10

fix(28081): revert snapshot changes in

a2d9da4

DDDDDanica force-pushed the fix/28081-design-tweak branch from d224ed3 to a2d9da4 Compare December 19, 2024 03:11

DDDDDanica added 2 commits December 19, 2024 03:13

revert changes

c305a09

fix(28081): apply snapshot changes manually

c27d151

pedronfigueiredo approved these changes Dec 20, 2024

View reviewed changes

dbrans approved these changes Dec 20, 2024

View reviewed changes

DDDDDanica enabled auto-merge December 20, 2024 14:47

NidhiKJha approved these changes Dec 20, 2024

View reviewed changes

DDDDDanica added this pull request to the merge queue Dec 20, 2024

DDDDDanica removed this pull request from the merge queue due to a manual request Dec 20, 2024

Merge branch 'main' into fix/28081-design-tweak

b7f2147

DDDDDanica enabled auto-merge December 20, 2024 15:29

DDDDDanica added this pull request to the merge queue Dec 20, 2024

Merged via the queue into main with commit 36f084c Dec 20, 2024
77 checks passed

DDDDDanica deleted the fix/28081-design-tweak branch December 20, 2024 16:09

github-actions bot locked and limited conversation to collaborators Dec 20, 2024

metamaskbot added the release-12.11.0 Issue or pull request that will be included in release 12.11.0 label Dec 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(28081): design tweak for network badge #29324

fix(28081): design tweak for network badge #29324

DDDDDanica commented Dec 18, 2024 •

edited by github-actions bot

Loading

github-actions bot commented Dec 18, 2024

DDDDDanica Dec 18, 2024 •

edited

Loading

georgewrmarshall Dec 18, 2024

DDDDDanica Dec 18, 2024

DDDDDanica Dec 18, 2024

georgewrmarshall Dec 18, 2024 •

edited

Loading

DDDDDanica Dec 18, 2024

DDDDDanica Dec 18, 2024

metamaskbot commented Dec 18, 2024

metamaskbot commented Dec 18, 2024

georgewrmarshall left a comment

georgewrmarshall Dec 18, 2024

DDDDDanica Dec 18, 2024

DDDDDanica Dec 19, 2024

DDDDDanica Dec 19, 2024

georgewrmarshall Dec 18, 2024 •

edited

Loading

georgewrmarshall Dec 18, 2024 •

edited

Loading

georgewrmarshall Dec 18, 2024 •

edited

Loading

DDDDDanica Dec 18, 2024

georgewrmarshall Dec 18, 2024 •

edited

Loading

georgewrmarshall Dec 18, 2024

metamaskbot commented Dec 19, 2024

dbrans left a comment

NidhiKJha left a comment

metamaskbot commented Dec 20, 2024

		backgroundColor={BackgroundColor.backgroundDefault}
		borderWidth={2}

fix(28081): design tweak for network badge #29324

fix(28081): design tweak for network badge #29324

Conversation

DDDDDanica commented Dec 18, 2024 • edited by github-actions bot Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Dec 18, 2024

DDDDDanica Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

georgewrmarshall Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Before

After

Choose a reason for hiding this comment

Choose a reason for hiding this comment

metamaskbot commented Dec 18, 2024

metamaskbot commented Dec 18, 2024

georgewrmarshall left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

georgewrmarshall Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Before

After

georgewrmarshall Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Before

After

georgewrmarshall Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

georgewrmarshall Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Before

After

Choose a reason for hiding this comment

metamaskbot commented Dec 19, 2024

dbrans left a comment

Choose a reason for hiding this comment

NidhiKJha left a comment

Choose a reason for hiding this comment

metamaskbot commented Dec 20, 2024

DDDDDanica commented Dec 18, 2024 •

edited by github-actions bot

Loading

DDDDDanica Dec 18, 2024 •

edited

Loading

georgewrmarshall Dec 18, 2024 •

edited

Loading

georgewrmarshall Dec 18, 2024 •

edited

Loading

georgewrmarshall Dec 18, 2024 •

edited

Loading

georgewrmarshall Dec 18, 2024 •

edited

Loading

georgewrmarshall Dec 18, 2024 •

edited

Loading