fix: remove halo for tokens #26016

sahar-fehri · 2024-07-22T16:45:31Z

Description

In the Extension, we display a halo around the token avatar, which differs from Mobile and Portfolio. This smaller avatar size makes the avatar less legible and creates an unpolished feel of the product.

This PR removes the halo for the main token list component, the import token modal and the asset picker

Related issues

Fixes:

Manual testing steps

Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
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 format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). 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.

github-actions · 2024-07-22T16:45:44Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

greptile-apps

PR Summary

This PR removes the halo effect around token avatars to improve legibility and visual consistency across different components.

ui/components/app/import-token/token-list/token-list.component.js: Removed showHalo prop from AvatarToken.
ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx: Deleted showHalo prop from AvatarToken.
ui/components/multichain/token-list-item/token-list-item.js: Eliminated showHalo prop from AvatarToken.

These changes ensure a more polished and consistent user experience.

_{3 file(s) reviewed, 3 comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps · 2024-07-22T16:45:57Z

ui/components/app/import-token/token-list/token-list.component.js

@@ -108,7 +108,6 @@ export default class TokenList extends Component {
                            <AvatarToken


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

greptile-apps · 2024-07-22T16:46:15Z

ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx

                borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
                src={primaryTokenImage}
                size={AvatarTokenSize.Md}
-                showHalo={!isNFT}
                name={symbol}
                {...(isNFT && { backgroundColor: BackgroundColor.transparent })}


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

greptile-apps · 2024-07-22T16:46:31Z

ui/components/multichain/token-list-item/token-list-item.js

@@ -224,7 +224,6 @@ export const TokenListItem = ({
          <AvatarToken


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

greptile-apps

PR Summary

(updates since last review)

No major changes found since last review.

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

This PR removes the halo effect from token avatars in the main token list, import token modal, and asset picker for a more polished look.

Removed halo-related CSS classes from /ui/components/component-library/avatar-token/avatar-token.scss.
Updated AvatarToken component in /ui/components/component-library/avatar-token/avatar-token.tsx to exclude halo logic.
Modified ImportToken component in /ui/pages/swaps/import-token/import-token.js to reflect the updated AvatarToken component without the halo.

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

This PR removes the halo effect from token avatars in the main token list, import token modal, and asset picker for a more polished look.

Removed halo-related CSS classes from /ui/components/component-library/avatar-token/avatar-token.scss.
Updated AvatarToken component in /ui/components/component-library/avatar-token/avatar-token.tsx to exclude halo logic.
Modified ImportToken component in /ui/pages/swaps/import-token/import-token.js to reflect the updated AvatarToken component without the halo.
Adjusted ImportTokensModalConfirm in /ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js to remove halo from token avatars.
Updated TokenDetailsPage in /ui/pages/token-details/token-details-page.js to ensure consistency in token avatar display.

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

This PR removes the halo effect from token avatars in the main token list, import token modal, and asset picker for a more polished look.

Removed halo-related CSS classes from /ui/components/component-library/avatar-token/avatar-token.scss.
Updated AvatarToken component in /ui/components/component-library/avatar-token/avatar-token.tsx to exclude halo logic.
Modified ImportToken component in /ui/pages/swaps/import-token/import-token.js to reflect the updated AvatarToken component without the halo.
Adjusted ImportTokensModalConfirm in /ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js to remove halo from token avatars.
Updated TokenDetailsPage in /ui/pages/token-details/token-details-page.js to ensure consistency in token avatar display.

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

This PR removes the halo effect from token avatars in the main token list, import token modal, and asset picker for a more polished look.

Removed halo-related CSS classes from /ui/components/component-library/avatar-token/avatar-token.scss.
Updated AvatarToken component in /ui/components/component-library/avatar-token/avatar-token.tsx to exclude halo logic.
Modified ImportToken component in /ui/pages/swaps/import-token/import-token.js to reflect the updated AvatarToken component without the halo.
Adjusted ImportTokensModalConfirm in /ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js to remove halo from token avatars.
Updated TokenDetailsPage in /ui/pages/token-details/token-details-page.js to ensure consistency in token avatar display.

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

This PR removes the halo effect from token avatars in the main token list, import token modal, and asset picker for a more polished look.

Removed halo-related CSS classes from /ui/components/component-library/avatar-token/avatar-token.scss.
Updated AvatarToken component in /ui/components/component-library/avatar-token/avatar-token.tsx to exclude halo logic.
Modified ImportToken component in /ui/pages/swaps/import-token/import-token.js to reflect the updated AvatarToken component without the halo.
Adjusted ImportTokensModalConfirm in /ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js to remove halo from token avatars.
Updated TokenDetailsPage in /ui/pages/token-details/token-details-page.js to ensure consistency in token avatar display.

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

georgewrmarshall

Looking good! I did a search for showHalo and found one instance that hasn't been removed. I'm guessing import-tokens-modal-confirm should be updated too?

metamask-extension/ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js

Line 69 in ff2d638

Checked showHalo removed for following components in storybook

ui/components/app/import-token/token-list/token-list.component.js ✅
ui/components/multichain/asset-picker-amount/asset-picker-amount.tsx for AssetPicker component ✅
ui/components/multichain/token-list-item/token-list-item.js ✅

ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx

greptile-apps

PR Summary

(updates since last review)

This PR removes the halo effect from token avatars in the main token list, import token modal, and asset picker for a more polished look.

Removed showHalo prop from AvatarToken in ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js.
Updated AvatarToken component in ui/components/component-library/avatar-token/avatar-token.tsx to exclude halo logic.
Removed halo-related CSS classes from ui/components/component-library/avatar-token/avatar-token.scss.
Modified ImportToken component in ui/pages/swaps/import-token/import-token.js to reflect the updated AvatarToken component without the halo.

_{1 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

sonarqubecloud · 2024-07-23T16:41:35Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

metamaskbot · 2024-07-23T17:10:58Z

Builds ready [427efd3]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (142 ± 148 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	71	262	102	39	19
		domContentLoaded	9	69	28	14	7
		load	39	1477	142	308	148
		domInteractive	9	69	28	14	7

Bundle size diffs

background: 0 Bytes (0.00%)
ui: -48 Bytes (-0.00%)
common: 0 Bytes (0.00%)

codecov · 2024-07-23T17:12:02Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.69%. Comparing base (5272c59) to head (427efd3).
Report is 6 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #26016   +/-   ##
========================================
  Coverage    69.69%   69.69%           
========================================
  Files         1405     1405           
  Lines        49723    49723           
  Branches     13740    13740           
========================================
  Hits         34650    34650           
  Misses       15073    15073

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

greptile-apps

PR Summary

(updates since last review)

This PR removes the halo effect from token avatars in the main token list, import token modal, and asset picker for a more polished look.

Removed showHalo prop from AvatarToken in ui/components/multichain/import-tokens-modal/import-tokens-modal-confirm.js.
Updated AvatarToken component in ui/components/component-library/avatar-token/avatar-token.tsx to exclude halo logic.
Removed halo-related CSS classes from ui/components/component-library/avatar-token/avatar-token.scss.
Modified ImportToken component in ui/pages/swaps/import-token/import-token.js to reflect the updated AvatarToken component without the halo.
Updated TokenListItem in ui/components/multichain/token-list-item/token-list-item.js to remove the halo effect from token avatars.

_{77 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

georgewrmarshall

LGTM!

fix: remove halo for tokens

5d2e3ea

sahar-fehri requested a review from a team as a code owner July 22, 2024 16:45

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

metamaskbot added the team-assets label Jul 22, 2024

fix: test

50ebe31

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

fix: test

eb204ed

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

fix: test

bff1bf6

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

fix: fix lint

41a1efb

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

fix: test

670e919

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

fix: test

ff2d638

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

georgewrmarshall reviewed Jul 22, 2024

View reviewed changes

ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx Show resolved Hide resolved

fix: rm halo

e884ca7

greptile-apps bot reviewed Jul 23, 2024

View reviewed changes

sahar-fehri requested a review from georgewrmarshall July 23, 2024 13:49

Merge branch 'develop' into fix/fix-css-remove-halo-from-token-icon

427efd3

greptile-apps bot reviewed Jul 23, 2024

View reviewed changes

georgewrmarshall approved these changes Jul 24, 2024

View reviewed changes

bergeron approved these changes Jul 24, 2024

View reviewed changes

sahar-fehri merged commit 3d2a436 into develop Jul 24, 2024
76 checks passed

sahar-fehri deleted the fix/fix-css-remove-halo-from-token-icon branch July 24, 2024 17:58

github-actions bot locked and limited conversation to collaborators Jul 24, 2024

metamaskbot added the release-12.3.0 Issue or pull request that will be included in release 12.3.0 label Jul 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: remove halo for tokens #26016

fix: remove halo for tokens #26016

sahar-fehri commented Jul 22, 2024 •

edited

Loading

github-actions bot commented Jul 22, 2024

greptile-apps bot left a comment

greptile-apps bot Jul 22, 2024

greptile-apps bot Jul 22, 2024

greptile-apps bot Jul 22, 2024

greptile-apps bot left a comment

greptile-apps bot left a comment

greptile-apps bot left a comment

greptile-apps bot left a comment

greptile-apps bot left a comment

greptile-apps bot left a comment

georgewrmarshall left a comment •

edited

Loading

greptile-apps bot left a comment

sonarqubecloud bot commented Jul 23, 2024

metamaskbot commented Jul 23, 2024

codecov bot commented Jul 23, 2024 •

edited

Loading

greptile-apps bot left a comment

georgewrmarshall left a comment

		@@ -108,7 +108,6 @@ export default class TokenList extends Component {
		<AvatarToken

		@@ -224,7 +224,6 @@ export const TokenListItem = ({
		<AvatarToken

fix: remove halo for tokens #26016

fix: remove halo for tokens #26016

Conversation

sahar-fehri commented Jul 22, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jul 22, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Jul 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Jul 22, 2024

Choose a reason for hiding this comment

greptile-apps bot Jul 22, 2024

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

georgewrmarshall left a comment • edited Loading

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

sonarqubecloud bot commented Jul 23, 2024

Quality Gate passed

metamaskbot commented Jul 23, 2024

codecov bot commented Jul 23, 2024 • edited Loading

Codecov Report

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

georgewrmarshall left a comment

Choose a reason for hiding this comment

sahar-fehri commented Jul 22, 2024 •

edited

Loading

georgewrmarshall left a comment •

edited

Loading

codecov bot commented Jul 23, 2024 •

edited

Loading