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: remove halo for tokens #26016

Merged
merged 9 commits into from
Jul 24, 2024
Merged

fix: remove halo for tokens #26016

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5d2e3ea
fix: remove halo for tokens
sahar-fehri Jul 22, 2024
50ebe31
fix: test
sahar-fehri Jul 22, 2024
eb204ed
fix: test
sahar-fehri Jul 22, 2024
bff1bf6
fix: test
sahar-fehri Jul 22, 2024
41a1efb
fix: fix lint
sahar-fehri Jul 22, 2024
670e919
fix: test
sahar-fehri Jul 22, 2024
ff2d638
fix: test
sahar-fehri Jul 22, 2024
e884ca7
fix: rm halo
sahar-fehri Jul 23, 2024
427efd3
Merge branch 'develop' into fix/fix-css-remove-halo-from-token-icon
sahar-fehri Jul 23, 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
9 changes: 2 additions & 7 deletions ui/components/app/assets/token-cell/__snapshots__/token-cell.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,11 @@ exports[`Token Cell should match snapshot 1`] = `
class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm 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-full"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm 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-full"
>
<img
aria-hidden="true"
class="mm-avatar-token__token-image--blurred"
src="./images/test_image.svg"
/>
<img
alt="TEST logo"
class="mm-avatar-token__token-image--size-reduced"
class="mm-avatar-token__token-image"
src="./images/test_image.svg"
/>
</div>
Expand Down
1 change: 0 additions & 1 deletion ui/components/app/import-token/token-list/token-list.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@ export default class TokenList extends Component {
<AvatarToken
Copy link

Choose a reason for hiding this comment

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

Info: Removed the showHalo prop from AvatarToken to eliminate the halo effect around token avatars.

name={symbol}
src={results[i]?.iconUrl}
showHalo
/>
</BadgeWrapper>
</Box>
Expand Down
1 change: 0 additions & 1 deletion ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,6 @@ export function AssetPicker({
borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
src={primaryTokenImage}
size={AvatarTokenSize.Md}
showHalo={!isNFT}
name={symbol}
{...(isNFT && { backgroundColor: BackgroundColor.transparent })}
Comment on lines 199 to 203
Copy link

Choose a reason for hiding this comment

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

Info: Removed showHalo prop from AvatarToken to eliminate the halo effect.

/>
georgewrmarshall marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`TokenListItem should render correctly 1`] = `
class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm 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-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm 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-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
?
</div>
Expand Down
1 change: 0 additions & 1 deletion ui/components/multichain/token-list-item/token-list-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,6 @@ export const TokenListItem = ({
<AvatarToken
Copy link

Choose a reason for hiding this comment

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

Info: Removed showHalo prop from AvatarToken to improve visual consistency.

name={tokenSymbol}
src={tokenImage}
showHalo
borderColor={tokenImage ? undefined : BorderColor.borderDefault}
/>
</BadgeWrapper>
Expand Down
6 changes: 3 additions & 3 deletions ui/pages/asset/components/__snapshots__/asset-page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ exports[`AssetPage should render a native asset 1`] = `
class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm 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-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm 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-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
T
</div>
Expand Down Expand Up @@ -465,7 +465,7 @@ exports[`AssetPage should render an ERC20 asset without prices 1`] = `
class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm 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-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm 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-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
T
</div>
Expand Down Expand Up @@ -942,7 +942,7 @@ exports[`AssetPage should render an ERC20 token with prices 1`] = `
class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
>
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo mm-text--body-sm 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-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm 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-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
T
</div>
Expand Down
Loading