Skip to content

Commit 36f084c

Browse files
DDDDDanicageorgewrmarshall
DDDDDanica
and
georgewrmarshall
authored
fix(28081): design tweak for network badge (#29324)
<!-- 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 PR address feedback from design quality check to tweak board color and width for network badge. <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29324?quickstart=1) ## **Related issues** Fixes: #28081 ## **Manual testing steps** 1. Go to this page... 2. 3. ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** See PR for related changes <!-- [screenshots/recordings] --> ### **After** See PR for related changes <!-- [screenshots/recordings] --> ## **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. --------- Co-authored-by: georgewrmarshall <[email protected]>
1 parent 4e255c1 commit 36f084c

File tree

17 files changed

+35
-36
lines changed

17 files changed

+35
-36
lines changed

‎ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ exports[`Token Cell should match snapshot 1`] = `
2828
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right"
2929
>
3030
<div
31-
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
31+
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network multichain-token-list-item__badge__avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
3232
>
3333
<img
3434
alt="network logo"

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

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const DetectedTokenDetails = ({
4343
src={CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId]}
4444
name={currentNetwork?.nickname || ''}
4545
backgroundColor={testNetworkBackgroundColor}
46+
borderWidth={2}
4647
/>
4748
}
4849
marginRight={2}

‎ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
116116
style="bottom: -1px; right: 2px;"
117117
>
118118
<div
119-
class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
119+
class="mm-box multichain-badge-status__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
120120
/>
121121
</div>
122122
</div>
@@ -424,7 +424,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
424424
style="bottom: -1px; right: 2px;"
425425
>
426426
<div
427-
class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
427+
class="mm-box multichain-badge-status__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
428428
/>
429429
</div>
430430
</div>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ import {
6262
getMultichainShouldShowFiat,
6363
} from '../../../selectors/multichain';
6464
import { useMultichainAccountTotalFiatBalance } from '../../../hooks/useMultichainAccountTotalFiatBalance';
65-
import { ConnectedStatus } from '../connected-status/connected-status';
65+
import { ConnectedStatus } from '../connected-status';
6666
///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
6767
import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors';
6868
import { useTheme } from '../../../hooks/useTheme';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const DefaultStory = Template.bind({});
4242

4343
export const NotConnectedStory = Template.bind({});
4444
NotConnectedStory.args = {
45-
badgeBackgroundColor: Color.borderMuted,
45+
badgeBackgroundColor: BackgroundColor.iconAlternative,
4646
badgeBorderColor: BackgroundColor.backgroundDefault,
4747
};
4848

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
7474
backgroundColor={badgeBackgroundColor}
7575
borderRadius={BorderRadius.full}
7676
borderColor={badgeBorderColor}
77-
borderWidth={isConnectedAndNotActive ? 2 : 4}
77+
borderWidth={2}
7878
/>
7979
}
8080
>

‎ui/components/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
232232
style="bottom: -1px; right: 2px;"
233233
>
234234
<div
235-
class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
235+
class="mm-box multichain-badge-status__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
236236
/>
237237
</div>
238238
</div>

‎ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ exports[`Connected Site Menu should render the site menu in connected state 1`]
3232
style="bottom: -1px; right: -4px; z-index: 1;"
3333
>
3434
<div
35-
class="mm-box multichain-connected-site-menu__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-3 box--border-style-solid"
35+
class="mm-box multichain-connected-site-menu__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
3636
/>
3737
</div>
3838
</div>
@@ -74,7 +74,7 @@ exports[`Connected Site Menu should render the site menu in not connected state
7474
style="bottom: -1px; right: -4px; z-index: 1;"
7575
>
7676
<div
77-
class="mm-box multichain-connected-site-menu__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-3 box--border-style-solid"
77+
class="mm-box multichain-connected-site-menu__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
7878
/>
7979
</div>
8080
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,9 @@ export const ConnectedSiteMenu = ({
8888
borderColor={
8989
isConnectedtoOtherAccountOrSnap
9090
? BorderColor.successDefault
91-
: BackgroundColor.backgroundDefault
91+
: BorderColor.backgroundDefault
9292
}
93-
borderWidth={isConnectedtoOtherAccountOrSnap ? 2 : 3}
93+
borderWidth={2}
9494
/>
9595
}
9696
>

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
33
import {
44
BackgroundColor,
55
BorderColor,
6-
Color,
76
} from '../../../helpers/constants/design-system';
87
import { isAccountConnectedToCurrentTab } from '../../../selectors';
98
import {
@@ -43,11 +42,11 @@ export const ConnectedStatus: React.FC<ConnectedStatusProps> = ({
4342
status = STATUS_CONNECTED_TO_ANOTHER_ACCOUNT;
4443
}
4544

46-
let badgeBorderColor = BackgroundColor.backgroundDefault; // TODO: Replace it once border-color has this value.
47-
let badgeBackgroundColor = Color.borderMuted; // //TODO: Replace it once Background color has this value.
45+
let badgeBorderColor = BorderColor.backgroundDefault; // TODO: Replace it once border-color has this value.
46+
let badgeBackgroundColor = BackgroundColor.iconAlternative;
4847
let tooltipText = t('statusNotConnected');
4948
if (status === STATUS_CONNECTED) {
50-
badgeBorderColor = BackgroundColor.backgroundDefault;
49+
badgeBorderColor = BorderColor.backgroundDefault;
5150
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
5251
// @ts-ignore: type 'string' can't be used to index type '{}'
5352
badgeBackgroundColor = BackgroundColor.successDefault;

‎ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ exports[`Connections Content should render correctly 1`] = `
171171
style="bottom: -1px; right: 2px;"
172172
>
173173
<div
174-
class="mm-box multichain-badge-status__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
174+
class="mm-box multichain-badge-status__badge mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
175175
/>
176176
</div>
177177
</div>

‎ui/components/multichain/pages/send/__snapshots__/send.test.js.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -348,7 +348,7 @@ exports[`SendPage render and initialization should render correctly even when a
348348
style="bottom: -1px; right: 2px;"
349349
>
350350
<div
351-
class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
351+
class="mm-box multichain-badge-status__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
352352
/>
353353
</div>
354354
</div>

‎ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap

+6-6
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
122122
style="bottom: -1px; right: 2px;"
123123
>
124124
<div
125-
class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
125+
class="mm-box multichain-badge-status__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
126126
/>
127127
</div>
128128
</div>
@@ -421,7 +421,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
421421
style="bottom: -1px; right: 2px;"
422422
>
423423
<div
424-
class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
424+
class="mm-box multichain-badge-status__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
425425
/>
426426
</div>
427427
</div>
@@ -720,7 +720,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
720720
style="bottom: -1px; right: 2px;"
721721
>
722722
<div
723-
class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
723+
class="mm-box multichain-badge-status__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
724724
/>
725725
</div>
726726
</div>
@@ -1028,7 +1028,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
10281028
style="bottom: -1px; right: 2px;"
10291029
>
10301030
<div
1031-
class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
1031+
class="mm-box multichain-badge-status__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
10321032
/>
10331033
</div>
10341034
</div>
@@ -1327,7 +1327,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
13271327
style="bottom: -1px; right: 2px;"
13281328
>
13291329
<div
1330-
class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
1330+
class="mm-box multichain-badge-status__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
13311331
/>
13321332
</div>
13331333
</div>
@@ -1639,7 +1639,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
16391639
style="bottom: -1px; right: 2px;"
16401640
>
16411641
<div
1642-
class="mm-box multichain-badge-status__badge mm-box--background-color-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-4 box--border-style-solid"
1642+
class="mm-box multichain-badge-status__badge mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
16431643
/>
16441644
</div>
16451645
</div>

0 commit comments

Comments
 (0)