fix: center token icon #26013

sahar-fehri · 2024-07-22T16:16:24Z

Description

This PR centers the tokenIcon in MultichainTokenListItem

Related issues

Fixes:
https://consensyssoftware.atlassian.net/browse/MMASSETS-251

Manual testing steps

Go to this page...

Screenshots/Recordings

Before

Asset picker modal

After

Asset Picker modal

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:16:40Z

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 centers the token icon in the MultichainTokenListItem by adjusting the CSS properties.

Modified ui/components/component-library/badge-wrapper/badge-wrapper.scss to change .mm-badge-wrapper's align-self from start to center.
Ensure this change does not negatively impact other components relying on the previous alignment.

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

greptile-apps · 2024-07-22T16:16:52Z

ui/components/component-library/badge-wrapper/badge-wrapper.scss

@@ -36,7 +36,7 @@
  --badge-wrapper-position-rectangular: 0;

  position: relative;
-  align-self: start; // prevents stretching of badge-wrapper when in flexbox container to maintain badge positioning
+  align-self: center; // prevents stretching of badge-wrapper when in flexbox container to maintain badge positioning


Info: Changed align-self from start to center to center the badge wrapper in its flexbox container.

greptile-apps

PR Summary

(updates since last review)

This PR centers the token icon in the MultichainTokenListItem by adjusting CSS properties and adding a class to the BadgeWrapper component.

Modified ui/components/component-library/badge-wrapper/badge-wrapper.scss to change .mm-badge-wrapper's align-self from center to start.
Updated ui/components/multichain/token-list-item/index.scss to add a new CSS rule for centering the badge within the token list item.
Added className="multichain-token-list-item__badge" to the BadgeWrapper in ui/components/multichain/token-list-item/token-list-item.js.

Ensure these changes do not negatively impact other components relying on the previous alignment.

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

greptile-apps · 2024-07-22T16:27:51Z

ui/components/multichain/token-list-item/index.scss

+  &__badge {
+    align-self: center;
+  }


Info: Added CSS rule to center the badge within the token list item.

Adding custom CSS is the right move here because the Box component doesn't currently support and alignSelf style utility prop

greptile-apps · 2024-07-22T16:28:11Z

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

@@ -220,6 +220,7 @@ export const TokenListItem = ({
            />
          }
          marginRight={3}
+          className="multichain-token-list-item__badge"


Info: Added className attribute to BadgeWrapper for centering the token icon.

greptile-apps

PR Summary

(updates since last review)

The PR centers the token icon in the MultichainTokenListItem by adjusting CSS properties and adding a class to the BadgeWrapper component.

Modified ui/components/component-library/badge-wrapper/badge-wrapper.scss to change .mm-badge-wrapper's align-self from center to start.
Updated ui/components/multichain/token-list-item/index.scss to add a new CSS rule for centering the badge within the token list item.
Added className="multichain-token-list-item__badge" to the BadgeWrapper in ui/components/multichain/token-list-item/token-list-item.js.

Ensure these changes do not negatively impact other components relying on the previous alignment.

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

greptile-apps

PR Summary

(updates since last review)

The PR centers the token icon in the MultichainTokenListItem by adjusting CSS properties and adding a class to the BadgeWrapper component.

Modified ui/components/component-library/badge-wrapper/badge-wrapper.scss to change .mm-badge-wrapper's align-self from center to start.
Updated ui/components/multichain/token-list-item/index.scss to add a new CSS rule for centering the badge within the token list item.
Added className="multichain-token-list-item__badge" to the BadgeWrapper in ui/components/multichain/token-list-item/token-list-item.js.

Ensure these changes do not negatively impact other components relying on the previous alignment.

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

greptile-apps

PR Summary

(updates since last review)

The PR centers the token icon in the MultichainTokenListItem by adjusting CSS properties and adding a class to the BadgeWrapper component.

Modified ui/components/component-library/badge-wrapper/badge-wrapper.scss to change .mm-badge-wrapper's align-self from center to start.
Updated ui/components/multichain/token-list-item/index.scss to add a new CSS rule for centering the badge within the token list item.
Added className="multichain-token-list-item__badge" to the BadgeWrapper in ui/components/multichain/token-list-item/token-list-item.js.

Ensure these changes do not negatively impact other components relying on the previous alignment.

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

greptile-apps

PR Summary

(updates since last review)

The PR centers the token icon in the MultichainTokenListItem by adjusting CSS properties and adding a class to the BadgeWrapper component.

Modified ui/components/component-library/badge-wrapper/badge-wrapper.scss to change .mm-badge-wrapper's align-self from center to start.
Updated ui/components/multichain/token-list-item/index.scss to add a new CSS rule for centering the badge within the token list item.
Added className="multichain-token-list-item__badge" to the BadgeWrapper in ui/components/multichain/token-list-item/token-list-item.js.

Ensure these changes do not negatively impact other components relying on the previous alignment.

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

georgewrmarshall

LGTM! It might also be worth sharing this with the @MetaMask/wallet-ux team

Checked update alignment of AvatarToken in MultichainTokenListItem in storybook ✅

georgewrmarshall · 2024-07-22T21:43:52Z

ui/components/multichain/token-list-item/index.scss

+  &__badge {
+    align-self: center;
+  }


Adding custom CSS is the right move here because the Box component doesn't currently support and alignSelf style utility prop

metamaskbot · 2024-07-23T12:43:04Z

Builds ready [88d04bb]

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 (251 ± 261 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	71	171	107	23	11
		domContentLoaded	10	79	31	16	8
		load	41	2201	251	543	261
		domInteractive	10	78	31	16	8

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 46 Bytes (0.00%)
common: 0 Bytes (0.00%)

greptile-apps

PR Summary

(updates since last review)

The PR centers the token icon in the MultichainTokenListItem by adjusting CSS properties and adding a class to the BadgeWrapper component.

Modified ui/components/component-library/badge-wrapper/badge-wrapper.scss to change .mm-badge-wrapper's align-self from center to start.
Updated ui/components/multichain/token-list-item/index.scss to add a new CSS rule for centering the badge within the token list item.
Added className="multichain-token-list-item__badge" to the BadgeWrapper in ui/components/multichain/token-list-item/token-list-item.js.

Ensure these changes do not negatively impact other components relying on the previous alignment.

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

sonarqubecloud · 2024-07-23T16:39:34Z

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

codecov · 2024-07-23T16:55:54Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 69.69%. Comparing base (5272c59) to head (1a55669).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #26013   +/-   ##
========================================
  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)

The PR centers the token icon in the MultichainTokenListItem by adjusting CSS properties and adding a class to the BadgeWrapper component.

Modified .circleci/config.yml to remove the test-e2e-swap-playwright - OPTIONAL job, potentially streamlining the CI/CD pipeline.
Updated app/scripts/background.js to introduce FakeLedgerBridge and FakeTrezorBridge for testing.
Added FakeKeyringBridge type in app/scripts/lib/hardware-keyring-builder-factory.ts for mock bridge implementation.
Enhanced ui/components/multichain/token-list-item/token-list-item.js to center the token icon by modifying CSS and adding a class.
Introduced test/stub/keyring-bridge.js to simulate keyring bridges for testing purposes.

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

metamaskbot · 2024-07-23T17:07:25Z

Builds ready [1a55669]

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 (79 ± 25 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	67	305	108	50	24
		domContentLoaded	10	104	30	22	11
		load	40	291	79	52	25
		domInteractive	10	104	30	22	11

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 46 Bytes (0.00%)
common: 0 Bytes (0.00%)

fix: center token icon

869d258

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

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

metamaskbot added the team-assets label Jul 22, 2024

fix: fix

98470ad

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

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

fix: test

a8bf2cf

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

fix: test

f68a067

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

fix: test

2532ae4

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

fix: fix test

2bff1b6

greptile-apps bot reviewed Jul 22, 2024

View reviewed changes

georgewrmarshall approved these changes Jul 22, 2024

View reviewed changes

sahar-fehri added the needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. label Jul 23, 2024

salimtb approved these changes Jul 23, 2024

View reviewed changes

Merge branch 'develop' into fix/fix-css-multichain-token-list-item

88d04bb

greptile-apps bot reviewed Jul 23, 2024

View reviewed changes

Merge branch 'develop' into fix/fix-css-multichain-token-list-item

1a55669

greptile-apps bot reviewed Jul 23, 2024

View reviewed changes

sahar-fehri merged commit 40f61bc into develop Jul 23, 2024
76 checks passed

sahar-fehri deleted the fix/fix-css-multichain-token-list-item branch July 23, 2024 17:34

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: center token icon #26013

fix: center token icon #26013

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 left a comment

greptile-apps bot Jul 22, 2024

georgewrmarshall 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

georgewrmarshall left a comment

georgewrmarshall Jul 22, 2024

metamaskbot commented Jul 23, 2024

greptile-apps bot left a comment

sonarqubecloud bot commented Jul 23, 2024

codecov bot commented Jul 23, 2024

greptile-apps bot left a comment

metamaskbot commented Jul 23, 2024

fix: center token icon #26013

fix: center token icon #26013

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 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

georgewrmarshall 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

georgewrmarshall left a comment

Choose a reason for hiding this comment

georgewrmarshall Jul 22, 2024

Choose a reason for hiding this comment

metamaskbot commented Jul 23, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

sonarqubecloud bot commented Jul 23, 2024

Quality Gate passed

codecov bot commented Jul 23, 2024

Codecov Report

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

metamaskbot commented Jul 23, 2024

sahar-fehri commented Jul 22, 2024 •

edited

Loading