From 573e5a70f6982a7a8ca2e5773e971a069970246a Mon Sep 17 00:00:00 2001 From: dddddanica Date: Wed, 18 Dec 2024 15:30:56 +0000 Subject: [PATCH 1/7] fix(28081): design tweak for network badge --- .../__snapshots__/token-cell.test.tsx.snap | 2 +- .../__snapshots__/snap-ui-address.test.tsx.snap | 4 ++-- .../__snapshots__/account-list-item.test.js.snap | 4 ++-- .../account-list-item/account-list-item.js | 2 +- .../multichain/badge-status/badge-status.tsx | 2 +- .../connect-accounts-modal.test.tsx.snap | 10 +++++----- .../__snapshots__/connected-site-menu.test.js.snap | 4 ++-- .../connected-site-menu/connected-site-menu.js | 2 +- .../__snapshots__/connections.test.tsx.snap | 2 +- .../pages/send/__snapshots__/send.test.js.snap | 2 +- .../__snapshots__/your-accounts.test.tsx.snap | 12 ++++++------ .../__snapshots__/token-list-item.test.tsx.snap | 12 ++++++------ .../multichain/token-list-item/token-list-item.tsx | 5 ++--- .../__snapshots__/asset-page.test.tsx.snap | 6 +++--- .../__snapshots__/remove-snap-account.test.js.snap | 2 +- 15 files changed, 35 insertions(+), 36 deletions(-) diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap index 7fb51f212ebd..3ec0face8295 100644 --- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap +++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap @@ -28,7 +28,7 @@ exports[`Token Cell should match snapshot 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
network logo
@@ -424,7 +424,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam style="bottom: -1px; right: 2px;" >
diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js index 3ab048597f40..2c080c940d8a 100644 --- a/ui/components/multichain/account-list-item/account-list-item.js +++ b/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'; ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors'; import { useTheme } from '../../../hooks/useTheme'; diff --git a/ui/components/multichain/badge-status/badge-status.tsx b/ui/components/multichain/badge-status/badge-status.tsx index d4e3668bccd8..30e156779308 100644 --- a/ui/components/multichain/badge-status/badge-status.tsx +++ b/ui/components/multichain/badge-status/badge-status.tsx @@ -74,7 +74,7 @@ export const BadgeStatus: React.FC = ({ backgroundColor={badgeBackgroundColor} borderRadius={BorderRadius.full} borderColor={badgeBorderColor} - borderWidth={isConnectedAndNotActive ? 2 : 4} + borderWidth={2} /> } > diff --git a/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap b/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap index b4a4836db2d6..c9b35ebbcee0 100644 --- a/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap +++ b/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap @@ -159,7 +159,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
@@ -261,7 +261,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
@@ -74,7 +74,7 @@ exports[`Connected Site Menu should render the site menu in not connected state style="bottom: -1px; right: -4px; z-index: 1;" >
diff --git a/ui/components/multichain/connected-site-menu/connected-site-menu.js b/ui/components/multichain/connected-site-menu/connected-site-menu.js index 4f532710288e..5d9ebbed4aaf 100644 --- a/ui/components/multichain/connected-site-menu/connected-site-menu.js +++ b/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} /> } > diff --git a/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap b/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap index ad2dc490d7c0..9250404743fc 100644 --- a/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap +++ b/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap @@ -171,7 +171,7 @@ exports[`Connections Content should render correctly 1`] = ` style="bottom: -1px; right: 2px;" >
diff --git a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap index 7b0605b7ea60..c1da8ce23b1b 100644 --- a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap +++ b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap @@ -348,7 +348,7 @@ exports[`SendPage render and initialization should render correctly even when a style="bottom: -1px; right: 2px;" >
diff --git a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap index 71431a330f94..abd45a8127a4 100644 --- a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap +++ b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap @@ -122,7 +122,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
@@ -421,7 +421,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
@@ -720,7 +720,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
@@ -1028,7 +1028,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
@@ -1327,7 +1327,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
@@ -1639,7 +1639,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap index 2359a5d9a5a0..e0efd4cd3fe6 100644 --- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap +++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap @@ -24,7 +24,7 @@ exports[`TokenListItem handles clicking staking opens tab 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
network logo
?
@@ -191,7 +191,7 @@ exports[`TokenListItem should display warning scam modal fallback when safechain class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
?
@@ -270,7 +270,7 @@ exports[`TokenListItem should render correctly 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
network logo
?
@@ -403,7 +403,7 @@ exports[`TokenListItem should render crypto balance with warning scam 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
?
diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx index 40b91a001f17..d5ce348e0297 100644 --- a/ui/components/multichain/token-list-item/token-list-item.tsx +++ b/ui/components/multichain/token-list-item/token-list-item.tsx @@ -40,7 +40,6 @@ import { } from '../../component-library'; import { getMetaMetricsId, - getTestNetworkBackgroundColor, getParticipateInMetaMetrics, getDataCollectionForMarketing, getMarketData, @@ -228,7 +227,6 @@ export const TokenListItem = ({ ); // Used for badge icon const allNetworks = useSelector(getNetworkConfigurationsByChainId); - const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor); return ( } diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap index 6a55226a42cb..658e631a9c2f 100644 --- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap +++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap @@ -198,7 +198,7 @@ exports[`AssetPage should render a native asset 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
static-logo
static-logo
static-logo
From b6f2ae428ef7ae77e83fdba73710924645c76e3d Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Thu, 19 Dec 2024 07:39:35 +1030 Subject: [PATCH 2/7] chore: adjusting color to use icon alternative and replacing to dos --- .../multichain/badge-status/badge-status.stories.tsx | 2 +- .../multichain/connected-site-menu/connected-site-menu.js | 2 +- .../multichain/connected-status/connected-status.tsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/components/multichain/badge-status/badge-status.stories.tsx b/ui/components/multichain/badge-status/badge-status.stories.tsx index b6cc485ef0e6..7122e10468a9 100644 --- a/ui/components/multichain/badge-status/badge-status.stories.tsx +++ b/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, badgeBorderColor: BackgroundColor.backgroundDefault, }; diff --git a/ui/components/multichain/connected-site-menu/connected-site-menu.js b/ui/components/multichain/connected-site-menu/connected-site-menu.js index 5d9ebbed4aaf..cbceafa7d99f 100644 --- a/ui/components/multichain/connected-site-menu/connected-site-menu.js +++ b/ui/components/multichain/connected-site-menu/connected-site-menu.js @@ -88,7 +88,7 @@ export const ConnectedSiteMenu = ({ borderColor={ isConnectedtoOtherAccountOrSnap ? BorderColor.successDefault - : BackgroundColor.backgroundDefault + : BorderColor.backgroundDefault } borderWidth={2} /> diff --git a/ui/components/multichain/connected-status/connected-status.tsx b/ui/components/multichain/connected-status/connected-status.tsx index 83dc0c77ec45..786aee0cdae8 100644 --- a/ui/components/multichain/connected-status/connected-status.tsx +++ b/ui/components/multichain/connected-status/connected-status.tsx @@ -43,11 +43,11 @@ export const ConnectedStatus: React.FC = ({ status = STATUS_CONNECTED_TO_ANOTHER_ACCOUNT; } - let badgeBorderColor = BackgroundColor.backgroundDefault; // TODO: Replace it once border-color has this value. - 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; let tooltipText = t('statusNotConnected'); if (status === STATUS_CONNECTED) { - badgeBorderColor = BackgroundColor.backgroundDefault; + badgeBorderColor = BorderColor.backgroundDefault; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore: type 'string' can't be used to index type '{}' badgeBackgroundColor = BackgroundColor.successDefault; From 7d7970b68e5a6d34204d06150b05d861020ecff2 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Thu, 19 Dec 2024 07:48:27 +1030 Subject: [PATCH 3/7] chore: updating snapshots --- .../detected-token-details/detected-token-details.js | 1 + .../__snapshots__/account-list-item.test.js.snap | 4 ++-- .../connect-accounts-modal.test.tsx.snap | 2 +- .../pages/send/__snapshots__/send.test.js.snap | 2 +- .../__snapshots__/your-accounts.test.tsx.snap | 12 ++++++------ .../__snapshots__/remove-snap-account.test.js.snap | 2 +- .../delete-metametrics-data-button.test.tsx | 4 ++-- 7 files changed, 14 insertions(+), 13 deletions(-) diff --git a/ui/components/app/detected-token/detected-token-details/detected-token-details.js b/ui/components/app/detected-token/detected-token-details/detected-token-details.js index 9882fbce4819..c23aa98f9cd8 100644 --- a/ui/components/app/detected-token/detected-token-details/detected-token-details.js +++ b/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} /> } marginRight={2} diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap index d5a532c507fe..cd0bb60f90e1 100644 --- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap +++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap @@ -116,7 +116,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam style="bottom: -1px; right: 2px;" >
@@ -424,7 +424,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam style="bottom: -1px; right: 2px;" >
diff --git a/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap b/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap index c9b35ebbcee0..f4a21b3ada30 100644 --- a/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap +++ b/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap @@ -232,7 +232,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = ` style="bottom: -1px; right: 2px;" >
diff --git a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap index c1da8ce23b1b..a23161205c8e 100644 --- a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap +++ b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap @@ -348,7 +348,7 @@ exports[`SendPage render and initialization should render correctly even when a style="bottom: -1px; right: 2px;" >
diff --git a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap index abd45a8127a4..8ffdb6565c93 100644 --- a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap +++ b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap @@ -122,7 +122,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
@@ -421,7 +421,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
@@ -720,7 +720,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
@@ -1028,7 +1028,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
@@ -1327,7 +1327,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
@@ -1639,7 +1639,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap index c78e8990c9ae..4ec6bcfa5026 100644 --- a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap +++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap @@ -208,7 +208,7 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = ` style="bottom: -1px; right: 2px;" >
diff --git a/ui/pages/settings/security-tab/delete-metametrics-data-button/delete-metametrics-data-button.test.tsx b/ui/pages/settings/security-tab/delete-metametrics-data-button/delete-metametrics-data-button.test.tsx index 27132fb82f5c..b5f62453594f 100644 --- a/ui/pages/settings/security-tab/delete-metametrics-data-button/delete-metametrics-data-button.test.tsx +++ b/ui/pages/settings/security-tab/delete-metametrics-data-button/delete-metametrics-data-button.test.tsx @@ -160,7 +160,7 @@ describe('DeleteMetaMetricsDataButton', () => { container.querySelector('.settings-page__content-description') ?.textContent, ).toMatchInlineSnapshot( - `" You initiated this action on 7/06/2024. This process can take up to 30 days. View the Privacy policy "`, + `" You initiated this action on 8/06/2024. This process can take up to 30 days. View the Privacy policy "`, ); }); @@ -193,7 +193,7 @@ describe('DeleteMetaMetricsDataButton', () => { container.querySelector('.settings-page__content-description') ?.textContent, ).toMatchInlineSnapshot( - `" You initiated this action on 7/06/2024. This process can take up to 30 days. View the Privacy policy "`, + `" You initiated this action on 8/06/2024. This process can take up to 30 days. View the Privacy policy "`, ); }); From 584d0b7c23c6c8ac5240d34142dd3a588a477860 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Thu, 19 Dec 2024 07:51:49 +1030 Subject: [PATCH 4/7] chore: reverting snapshot --- .../delete-metametrics-data-button.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/pages/settings/security-tab/delete-metametrics-data-button/delete-metametrics-data-button.test.tsx b/ui/pages/settings/security-tab/delete-metametrics-data-button/delete-metametrics-data-button.test.tsx index b5f62453594f..27132fb82f5c 100644 --- a/ui/pages/settings/security-tab/delete-metametrics-data-button/delete-metametrics-data-button.test.tsx +++ b/ui/pages/settings/security-tab/delete-metametrics-data-button/delete-metametrics-data-button.test.tsx @@ -160,7 +160,7 @@ describe('DeleteMetaMetricsDataButton', () => { container.querySelector('.settings-page__content-description') ?.textContent, ).toMatchInlineSnapshot( - `" You initiated this action on 8/06/2024. This process can take up to 30 days. View the Privacy policy "`, + `" You initiated this action on 7/06/2024. This process can take up to 30 days. View the Privacy policy "`, ); }); @@ -193,7 +193,7 @@ describe('DeleteMetaMetricsDataButton', () => { container.querySelector('.settings-page__content-description') ?.textContent, ).toMatchInlineSnapshot( - `" You initiated this action on 8/06/2024. This process can take up to 30 days. View the Privacy policy "`, + `" You initiated this action on 7/06/2024. This process can take up to 30 days. View the Privacy policy "`, ); }); From a2d9da45ea513cde4bf4e0d2e719519d431c3809 Mon Sep 17 00:00:00 2001 From: dddddanica Date: Wed, 18 Dec 2024 22:18:22 +0000 Subject: [PATCH 5/7] fix(28081): revert snapshot changes in --- .../__snapshots__/token-cell.test.tsx.snap | 2 +- .../snap-ui-address.test.tsx.snap | 4 ++-- .../account-list-item.test.js.snap | 8 +++++++ .../account-list-item/account-list-item.js | 2 +- .../multichain/badge-status/badge-status.tsx | 2 +- .../connect-accounts-modal.test.tsx.snap | 12 ++++++---- .../connected-site-menu.test.js.snap | 4 ++-- .../connected-site-menu.js | 2 +- .../connected-status/connected-status.tsx | 1 - .../__snapshots__/connections.test.tsx.snap | 2 +- .../send/__snapshots__/send.test.js.snap | 4 ++++ .../__snapshots__/your-accounts.test.tsx.snap | 24 +++++++++++++++++++ .../token-list-item.test.tsx.snap | 12 +++++----- .../token-list-item/token-list-item.tsx | 5 ++-- .../__snapshots__/asset-page.test.tsx.snap | 6 ++--- .../remove-snap-account.test.js.snap | 4 ++++ 16 files changed, 69 insertions(+), 25 deletions(-) diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap index 3ec0face8295..7fb51f212ebd 100644 --- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap +++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap @@ -28,7 +28,7 @@ exports[`Token Cell should match snapshot 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
network logo
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -424,7 +428,11 @@ exports[`AccountListItem renders AccountListItem component and shows account nam style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js index 2c080c940d8a..3ab048597f40 100644 --- a/ui/components/multichain/account-list-item/account-list-item.js +++ b/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'; +import { ConnectedStatus } from '../connected-status/connected-status'; ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors'; import { useTheme } from '../../../hooks/useTheme'; diff --git a/ui/components/multichain/badge-status/badge-status.tsx b/ui/components/multichain/badge-status/badge-status.tsx index 30e156779308..d4e3668bccd8 100644 --- a/ui/components/multichain/badge-status/badge-status.tsx +++ b/ui/components/multichain/badge-status/badge-status.tsx @@ -74,7 +74,7 @@ export const BadgeStatus: React.FC = ({ backgroundColor={badgeBackgroundColor} borderRadius={BorderRadius.full} borderColor={badgeBorderColor} - borderWidth={2} + borderWidth={isConnectedAndNotActive ? 2 : 4} /> } > diff --git a/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap b/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap index f4a21b3ada30..e1249d358dc0 100644 --- a/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap +++ b/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap @@ -159,7 +159,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -261,7 +265,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
@@ -74,7 +74,7 @@ exports[`Connected Site Menu should render the site menu in not connected state style="bottom: -1px; right: -4px; z-index: 1;" >
diff --git a/ui/components/multichain/connected-site-menu/connected-site-menu.js b/ui/components/multichain/connected-site-menu/connected-site-menu.js index cbceafa7d99f..f077d3213aac 100644 --- a/ui/components/multichain/connected-site-menu/connected-site-menu.js +++ b/ui/components/multichain/connected-site-menu/connected-site-menu.js @@ -90,7 +90,7 @@ export const ConnectedSiteMenu = ({ ? BorderColor.successDefault : BorderColor.backgroundDefault } - borderWidth={2} + borderWidth={isConnectedtoOtherAccountOrSnap ? 2 : 3} /> } > diff --git a/ui/components/multichain/connected-status/connected-status.tsx b/ui/components/multichain/connected-status/connected-status.tsx index 786aee0cdae8..8de3d7c4b38b 100644 --- a/ui/components/multichain/connected-status/connected-status.tsx +++ b/ui/components/multichain/connected-status/connected-status.tsx @@ -3,7 +3,6 @@ import { useSelector } from 'react-redux'; import { BackgroundColor, BorderColor, - Color, } from '../../../helpers/constants/design-system'; import { isAccountConnectedToCurrentTab } from '../../../selectors'; import { diff --git a/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap b/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap index 9250404743fc..ad2dc490d7c0 100644 --- a/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap +++ b/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap @@ -171,7 +171,7 @@ exports[`Connections Content should render correctly 1`] = ` style="bottom: -1px; right: 2px;" >
diff --git a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap index a23161205c8e..20c68c83e2c0 100644 --- a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap +++ b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap @@ -348,7 +348,11 @@ exports[`SendPage render and initialization should render correctly even when a style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
diff --git a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap index 8ffdb6565c93..bfa88fccd70b 100644 --- a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap +++ b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap @@ -122,7 +122,11 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -421,7 +425,11 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -720,7 +728,11 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -1028,7 +1040,11 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -1327,7 +1343,11 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -1639,7 +1659,11 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap index e0efd4cd3fe6..2359a5d9a5a0 100644 --- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap +++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap @@ -24,7 +24,7 @@ exports[`TokenListItem handles clicking staking opens tab 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
network logo
?
@@ -191,7 +191,7 @@ exports[`TokenListItem should display warning scam modal fallback when safechain class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
?
@@ -270,7 +270,7 @@ exports[`TokenListItem should render correctly 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
network logo
?
@@ -403,7 +403,7 @@ exports[`TokenListItem should render crypto balance with warning scam 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
?
diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx index d5ce348e0297..40b91a001f17 100644 --- a/ui/components/multichain/token-list-item/token-list-item.tsx +++ b/ui/components/multichain/token-list-item/token-list-item.tsx @@ -40,6 +40,7 @@ import { } from '../../component-library'; import { getMetaMetricsId, + getTestNetworkBackgroundColor, getParticipateInMetaMetrics, getDataCollectionForMarketing, getMarketData, @@ -227,6 +228,7 @@ export const TokenListItem = ({ ); // Used for badge icon const allNetworks = useSelector(getNetworkConfigurationsByChainId); + const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor); return ( } diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap index 658e631a9c2f..6a55226a42cb 100644 --- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap +++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap @@ -198,7 +198,7 @@ exports[`AssetPage should render a native asset 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
static-logo
static-logo
static-logo
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
From c305a093dfa0de547d003dbdc842f26c155b855c Mon Sep 17 00:00:00 2001 From: dddddanica Date: Thu, 19 Dec 2024 03:13:24 +0000 Subject: [PATCH 6/7] revert changes --- .../__snapshots__/token-cell.test.tsx.snap | 2 +- .../snap-ui-address.test.tsx.snap | 4 ++-- .../account-list-item.test.js.snap | 8 ------- .../account-list-item/account-list-item.js | 2 +- .../multichain/badge-status/badge-status.tsx | 2 +- .../connect-accounts-modal.test.tsx.snap | 12 ++++------ .../connected-site-menu.test.js.snap | 4 ++-- .../connected-site-menu.js | 2 +- .../connected-status/connected-status.tsx | 1 + .../__snapshots__/connections.test.tsx.snap | 2 +- .../send/__snapshots__/send.test.js.snap | 4 ---- .../__snapshots__/your-accounts.test.tsx.snap | 24 ------------------- .../token-list-item.test.tsx.snap | 12 +++++----- .../token-list-item/token-list-item.tsx | 5 ++-- .../__snapshots__/asset-page.test.tsx.snap | 6 ++--- .../remove-snap-account.test.js.snap | 4 ---- 16 files changed, 25 insertions(+), 69 deletions(-) diff --git a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap index 7fb51f212ebd..3ec0face8295 100644 --- a/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap +++ b/ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap @@ -28,7 +28,7 @@ exports[`Token Cell should match snapshot 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
network logo
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -428,11 +424,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js index 3ab048597f40..2c080c940d8a 100644 --- a/ui/components/multichain/account-list-item/account-list-item.js +++ b/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'; ///: BEGIN:ONLY_INCLUDE_IF(build-mmi) import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors'; import { useTheme } from '../../../hooks/useTheme'; diff --git a/ui/components/multichain/badge-status/badge-status.tsx b/ui/components/multichain/badge-status/badge-status.tsx index d4e3668bccd8..30e156779308 100644 --- a/ui/components/multichain/badge-status/badge-status.tsx +++ b/ui/components/multichain/badge-status/badge-status.tsx @@ -74,7 +74,7 @@ export const BadgeStatus: React.FC = ({ backgroundColor={badgeBackgroundColor} borderRadius={BorderRadius.full} borderColor={badgeBorderColor} - borderWidth={isConnectedAndNotActive ? 2 : 4} + borderWidth={2} /> } > diff --git a/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap b/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap index e1249d358dc0..f4a21b3ada30 100644 --- a/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap +++ b/ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap @@ -159,7 +159,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -265,7 +261,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
@@ -74,7 +74,7 @@ exports[`Connected Site Menu should render the site menu in not connected state style="bottom: -1px; right: -4px; z-index: 1;" >
diff --git a/ui/components/multichain/connected-site-menu/connected-site-menu.js b/ui/components/multichain/connected-site-menu/connected-site-menu.js index f077d3213aac..cbceafa7d99f 100644 --- a/ui/components/multichain/connected-site-menu/connected-site-menu.js +++ b/ui/components/multichain/connected-site-menu/connected-site-menu.js @@ -90,7 +90,7 @@ export const ConnectedSiteMenu = ({ ? BorderColor.successDefault : BorderColor.backgroundDefault } - borderWidth={isConnectedtoOtherAccountOrSnap ? 2 : 3} + borderWidth={2} /> } > diff --git a/ui/components/multichain/connected-status/connected-status.tsx b/ui/components/multichain/connected-status/connected-status.tsx index 8de3d7c4b38b..786aee0cdae8 100644 --- a/ui/components/multichain/connected-status/connected-status.tsx +++ b/ui/components/multichain/connected-status/connected-status.tsx @@ -3,6 +3,7 @@ import { useSelector } from 'react-redux'; import { BackgroundColor, BorderColor, + Color, } from '../../../helpers/constants/design-system'; import { isAccountConnectedToCurrentTab } from '../../../selectors'; import { diff --git a/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap b/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap index ad2dc490d7c0..9250404743fc 100644 --- a/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap +++ b/ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap @@ -171,7 +171,7 @@ exports[`Connections Content should render correctly 1`] = ` style="bottom: -1px; right: 2px;" >
diff --git a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap index 20c68c83e2c0..a23161205c8e 100644 --- a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap +++ b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap @@ -348,11 +348,7 @@ exports[`SendPage render and initialization should render correctly even when a style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
diff --git a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap index bfa88fccd70b..8ffdb6565c93 100644 --- a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap +++ b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap @@ -122,11 +122,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -425,11 +421,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -728,11 +720,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -1040,11 +1028,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -1343,11 +1327,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
@@ -1659,11 +1639,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` style="bottom: -1px; right: 2px;" >
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap index 2359a5d9a5a0..e0efd4cd3fe6 100644 --- a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap +++ b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap @@ -24,7 +24,7 @@ exports[`TokenListItem handles clicking staking opens tab 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
network logo
?
@@ -191,7 +191,7 @@ exports[`TokenListItem should display warning scam modal fallback when safechain class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
?
@@ -270,7 +270,7 @@ exports[`TokenListItem should render correctly 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
network logo
?
@@ -403,7 +403,7 @@ exports[`TokenListItem should render crypto balance with warning scam 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
?
diff --git a/ui/components/multichain/token-list-item/token-list-item.tsx b/ui/components/multichain/token-list-item/token-list-item.tsx index 40b91a001f17..d5ce348e0297 100644 --- a/ui/components/multichain/token-list-item/token-list-item.tsx +++ b/ui/components/multichain/token-list-item/token-list-item.tsx @@ -40,7 +40,6 @@ import { } from '../../component-library'; import { getMetaMetricsId, - getTestNetworkBackgroundColor, getParticipateInMetaMetrics, getDataCollectionForMarketing, getMarketData, @@ -228,7 +227,6 @@ export const TokenListItem = ({ ); // Used for badge icon const allNetworks = useSelector(getNetworkConfigurationsByChainId); - const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor); return ( } diff --git a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap index 6a55226a42cb..658e631a9c2f 100644 --- a/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap +++ b/ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap @@ -198,7 +198,7 @@ exports[`AssetPage should render a native asset 1`] = ` class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right" >
static-logo
static-logo
static-logo
>>>>>> parent of 4568f2af3f (fix(28081): design tweak for network badge) />
From c27d151f4f9424874ef68ec288827e6657b0090a Mon Sep 17 00:00:00 2001 From: dddddanica Date: Thu, 19 Dec 2024 03:39:17 +0000 Subject: [PATCH 7/7] fix(28081): apply snapshot changes manually --- .../__snapshots__/snap-ui-address.test.tsx.snap | 4 ++-- .../__snapshots__/connect-accounts-modal.test.tsx.snap | 8 ++++---- .../multichain/connected-status/connected-status.tsx | 1 - 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap index 13caa0c5dc82..deb95bd48555 100644 --- a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap +++ b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap @@ -172,7 +172,7 @@ exports[`SnapUIAddress renders Ethereum address 1`] = `