Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Dec 20, 2024
+35 −36
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
573e5a7
fix(28081): design tweak for network badge
DDDDDanica Dec 18, 2024
b6f2ae4
chore: adjusting color to use icon alternative and replacing to dos
georgewrmarshall Dec 18, 2024
7d7970b
chore: updating snapshots
georgewrmarshall Dec 18, 2024
584d0b7
chore: reverting snapshot
georgewrmarshall Dec 18, 2024
a2d9da4
fix(28081): revert snapshot changes in
DDDDDanica Dec 18, 2024
c305a09
revert changes
DDDDDanica Dec 19, 2024
c27d151
fix(28081): apply snapshot changes manually
DDDDDanica Dec 19, 2024
b7f2147
Merge branch 'main' into fix/28081-design-tweak
DDDDDanica Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
<div
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"
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"
>
<img
alt="network logo"
Expand Down
1 change: 1 addition & 0 deletions ui/components/app/detected-token/detected-token-details/detected-token-details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ const DetectedTokenDetails = ({
src={CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId]}
name={currentNetwork?.nickname || ''}
backgroundColor={testNetworkBackgroundColor}
borderWidth={2}
Copy link
Contributor

@georgewrmarshall georgewrmarshall Dec 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before

Screenshot 2024-12-19 at 7 56 19 AM

After

Screenshot 2024-12-19 at 7 48 02 AM

/>
}
marginRight={2}
Expand Down
4 changes: 2 additions & 2 deletions ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ exports[`SnapUIAddress renders 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"
Expand Down Expand Up @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed: c27d151

Expand Down
4 changes: 2 additions & 2 deletions ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down Expand Up @@ -424,7 +424,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/components/multichain/account-list-item/account-list-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Path simplification

///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors';
import { useTheme } from '../../../hooks/useTheme';
Expand Down
2 changes: 1 addition & 1 deletion ui/components/multichain/badge-status/badge-status.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const DefaultStory = Template.bind({});

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

@georgewrmarshall georgewrmarshall Dec 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before

Screenshot 2024-12-19 at 7 53 05 AM

After

Screenshot 2024-12-19 at 7 40 20 AM

badgeBorderColor: BackgroundColor.backgroundDefault,
};

Expand Down
2 changes: 1 addition & 1 deletion ui/components/multichain/badge-status/badge-status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const BadgeStatus: React.FC<BadgeStatusProps> = ({
backgroundColor={badgeBackgroundColor}
borderRadius={BorderRadius.full}
borderColor={badgeBorderColor}
borderWidth={isConnectedAndNotActive ? 2 : 4}
borderWidth={2}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before:
Screenshot 2024-12-18 at 15 29 05

After:
Screenshot 2024-12-18 at 15 08 14

Copy link
Contributor

@georgewrmarshall georgewrmarshall Dec 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Before

Screenshot 2024-12-19 at 7 54 10 AMScreenshot 2024-12-19 at 7 54 25 AM

After

Screenshot 2024-12-19 at 7 41 54 AMScreenshot 2024-12-19 at 7 42 08 AM

/>
}
>
Expand Down
10 changes: 5 additions & 5 deletions ...ents/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
<rect
fill="#FA4300"
height="32"
transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
width="32"
x="0"
y="0"
Expand Down Expand Up @@ -202,7 +202,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
<rect
fill="#FA4300"
height="32"
transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
width="32"
x="0"
y="0"
Expand Down Expand Up @@ -232,7 +232,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down Expand Up @@ -261,7 +261,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
<rect
fill="#FA4300"
height="32"
transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
width="32"
x="0"
y="0"
Expand Down Expand Up @@ -304,7 +304,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
<rect
fill="#FA4300"
height="32"
transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
width="32"
x="0"
y="0"
Expand Down
4 changes: 2 additions & 2 deletions ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ exports[`Connected Site Menu should render the site menu in connected state 1`]
style="bottom: -1px; right: -4px; z-index: 1;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down Expand Up @@ -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;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ui/components/multichain/connected-site-menu/connected-site-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,9 @@ export const ConnectedSiteMenu = ({
borderColor={
isConnectedtoOtherAccountOrSnap
? BorderColor.successDefault
: BackgroundColor.backgroundDefault
: BorderColor.backgroundDefault
}
borderWidth={isConnectedtoOtherAccountOrSnap ? 2 : 3}
borderWidth={2}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before (not connected):
Screenshot 2024-12-18 at 15 41 03

After (not connected):
Screenshot 2024-12-18 at 15 39 32

Before (connected):
Screenshot 2024-12-18 at 15 41 21

After (connected)
Screenshot 2024-12-18 at 15 39 17
:

/>
}
>
Expand Down
6 changes: 3 additions & 3 deletions ui/components/multichain/connected-status/connected-status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@ export const ConnectedStatus: React.FC<ConnectedStatusProps> = ({
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;
Comment on lines -47 to +46
Copy link
Contributor

@georgewrmarshall georgewrmarshall Dec 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Screenshot 2024-12-19 at 7 41 54 AMScreenshot 2024-12-19 at 7 42 08 AM
Screenshot 2024-12-19 at 7 43 48 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks George ! that makes sense !

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;
Expand Down
2 changes: 1 addition & 1 deletion ui/components/multichain/pages/connections/__snapshots__/connections.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ exports[`Connections Content should render correctly 1`] = `
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/components/multichain/pages/send/__snapshots__/send.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,7 +348,7 @@ exports[`SendPage render and initialization should render correctly even when a
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down Expand Up @@ -421,7 +421,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down Expand Up @@ -720,7 +720,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down Expand Up @@ -1028,7 +1028,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down Expand Up @@ -1327,7 +1327,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down Expand Up @@ -1639,7 +1639,7 @@ exports[`SendPageYourAccounts render renders correctly 1`] = `
style="bottom: -1px; right: 2px;"
>
<div
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"
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"
/>
</div>
</div>
Expand Down
Loading
Loading