Skip to content

Commit 2311b79

Browse files
DDDDDanicaDDDDDanica
committed
fix(28081): design tweak for network badge
1 parent 241c9d8 commit 2311b79

File tree

11 files changed

+28
-29
lines changed

11 files changed

+28
-29
lines changed

‎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-border-muted 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-border-muted 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.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

+5-5
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
159159
<rect
160160
fill="#FA4300"
161161
height="32"
162-
transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
162+
transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
163163
width="32"
164164
x="0"
165165
y="0"
@@ -202,7 +202,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
202202
<rect
203203
fill="#FA4300"
204204
height="32"
205-
transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
205+
transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
206206
width="32"
207207
x="0"
208208
y="0"
@@ -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-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
236236
/>
237237
</div>
238238
</div>
@@ -261,7 +261,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
261261
<rect
262262
fill="#FA4300"
263263
height="32"
264-
transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
264+
transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
265265
width="32"
266266
x="0"
267267
y="0"
@@ -304,7 +304,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
304304
<rect
305305
fill="#FA4300"
306306
height="32"
307-
transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
307+
transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
308308
width="32"
309309
x="0"
310310
y="0"

‎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

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export const ConnectedSiteMenu = ({
9090
? BorderColor.successDefault
9191
: BackgroundColor.backgroundDefault
9292
}
93-
borderWidth={isConnectedtoOtherAccountOrSnap ? 2 : 3}
93+
borderWidth={2}
9494
/>
9595
}
9696
>

‎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-border-muted 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-border-muted 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-border-muted 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-border-muted 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-border-muted 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-border-muted 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-border-muted mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-2 box--border-style-solid"
16431643
/>
16441644
</div>
16451645
</div>

‎ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.tsx.snap

+6-6
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ exports[`TokenListItem handles clicking staking opens tab 1`] = `
2424
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right"
2525
>
2626
<div
27-
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"
27+
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"
2828
>
2929
<img
3030
alt="network logo"
@@ -113,7 +113,7 @@ exports[`TokenListItem should display warning scam modal 1`] = `
113113
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right"
114114
>
115115
<div
116-
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"
116+
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"
117117
>
118118
?
119119
</div>
@@ -191,7 +191,7 @@ exports[`TokenListItem should display warning scam modal fallback when safechain
191191
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right"
192192
>
193193
<div
194-
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"
194+
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"
195195
>
196196
?
197197
</div>
@@ -270,7 +270,7 @@ exports[`TokenListItem should render correctly 1`] = `
270270
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right"
271271
>
272272
<div
273-
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"
273+
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"
274274
>
275275
<img
276276
alt="network logo"
@@ -338,7 +338,7 @@ exports[`TokenListItem should render crypto balance 1`] = `
338338
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right"
339339
>
340340
<div
341-
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"
341+
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"
342342
>
343343
?
344344
</div>
@@ -403,7 +403,7 @@ exports[`TokenListItem should render crypto balance with warning scam 1`] = `
403403
class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right"
404404
>
405405
<div
406-
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"
406+
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"
407407
>
408408
?
409409
</div>

0 commit comments

Comments
 (0)