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.

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

Unify payment method icon design #7560

Merged
merged 17 commits into from
Oct 27, 2023
Merged

Conversation

KarlisJ
Copy link
Contributor

@KarlisJ KarlisJ commented Oct 26, 2023

Fixes #7183

Changes proposed in this Pull Request

Unify the design for Payment method and Card icon design.

  • borders are consistent
  • alignement is consistent

Testing instructions

TODO: Need to list all use places. Quite hard to gather them all


  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@KarlisJ KarlisJ self-assigned this Oct 26, 2023
@KarlisJ
Copy link
Contributor Author

KarlisJ commented Oct 26, 2023

We still need to fix some failing tests, mostly just recreating snapshots.

Also, this PR needs to address the use cases where assets are used as CSS backgrounds. I might skip it since there are no problems with alignment or borders.

Copy link
Contributor

@kalessil kalessil left a comment

Choose a reason for hiding this comment

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

Early feedback: looks good! Leaving some comments to look into (minor ones).

client/payment-methods-icons.tsx Outdated Show resolved Hide resolved
client/payment-methods-icons.tsx Outdated Show resolved Hide resolved
client/payment-methods-icons.tsx Outdated Show resolved Hide resolved
@kalessil kalessil requested a review from a team October 26, 2023 07:53
Copy link
Contributor

@mgascam mgascam left a comment

Choose a reason for hiding this comment

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

Looking great already! I left a couple of comments to double check with you.

One thing I noticed is that the Link icon does not have border on the Payment > Settings screen in the Express Checkout section.

Screenshot 2023-10-26 at 11 48 26

@@ -200,11 +197,10 @@ const PaymentMethodInformationObject: Record<
affirm: __( 'Affirm', 'woocommerce-payments' ),
},
description: __(
// translators: %s is the store currency.
'Allow customers to pay over time with Affirm. Available to all customers paying in %s.',
'Expand your business with Affirm',
Copy link
Contributor

Choose a reason for hiding this comment

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

I noticed we are changing the description for Affirm and Afterpay, is this intended? Asking because for Klarna we are not changing this description.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not intended, thanks for pointing out. Could be incorrect merge from develop. I'll look into that.

client/style.scss Show resolved Hide resolved
client/payment-methods-map.tsx Outdated Show resolved Hide resolved
@KarlisJ
Copy link
Contributor Author

KarlisJ commented Oct 27, 2023

@mgascam Thank you for pointing out the missing LinkIcon.

I've implemented all requested changes. Just need to resolve failing tests (in most cases recreating snapshot)

@botwoo
Copy link
Collaborator

botwoo commented Oct 27, 2023

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 7560 or branch name fix/7183-unify-pm-icon-design in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: 86a81f1
  • Build time: 2023-10-27 13:15:32 UTC

Note: the build is updated when a new commit is pushed to this PR.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 27, 2023

Size Change: +4.83 kB (0%)

Total Size: 1.44 MB

Filename Size Change
release/woocommerce-payments/assets/css/admin.css 1.06 kB +20 B (+2%)
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.8 kB +1 B (0%)
release/woocommerce-payments/dist/blocks-checkout.css 1.8 kB +1 B (0%)
release/woocommerce-payments/dist/checkout-rtl.css 441 B +1 B (0%)
release/woocommerce-payments/dist/checkout.css 442 B +1 B (0%)
release/woocommerce-payments/dist/index-rtl.css 36.4 kB +18 B (0%)
release/woocommerce-payments/dist/index.css 36.4 kB +20 B (0%)
release/woocommerce-payments/dist/index.js 284 kB +185 B (0%)
release/woocommerce-payments/dist/multi-currency-rtl.css 3.39 kB +509 B (+18%) ⚠️
release/woocommerce-payments/dist/multi-currency.css 3.39 kB +513 B (+18%) ⚠️
release/woocommerce-payments/dist/multi-currency.js 55.4 kB +513 B (+1%)
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.3 kB +609 B (+88%) 🆘
release/woocommerce-payments/dist/payment-gateways.css 1.3 kB +607 B (+88%) 🆘
release/woocommerce-payments/dist/payment-gateways.js 39.1 kB +515 B (+1%)
release/woocommerce-payments/dist/settings-rtl.css 9.52 kB +470 B (+5%) 🔍
release/woocommerce-payments/dist/settings.css 9.53 kB +471 B (+5%) 🔍
release/woocommerce-payments/dist/settings.js 234 kB +368 B (0%)
release/woocommerce-payments/dist/upe_checkout-rtl.css 441 B +1 B (0%)
release/woocommerce-payments/dist/upe_checkout.css 442 B +1 B (0%)
release/woocommerce-payments/dist/upe_split_checkout-rtl.css 441 B +1 B (0%)
release/woocommerce-payments/dist/upe_split_checkout.css 442 B +1 B (0%)
release/woocommerce-payments/dist/upe-blocks-checkout-rtl.css 1.8 kB +1 B (0%)
release/woocommerce-payments/dist/upe-blocks-checkout.css 1.8 kB +1 B (0%)
release/woocommerce-payments/dist/upe-split-blocks-checkout-rtl.css 1.8 kB +1 B (0%)
release/woocommerce-payments/dist/upe-split-blocks-checkout.css 1.8 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/dist/blocks-checkout.js 75.1 kB
release/woocommerce-payments/dist/checkout.js 28.9 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.2 kB
release/woocommerce-payments/dist/order-rtl.css 676 B
release/woocommerce-payments/dist/order.css 679 B
release/woocommerce-payments/dist/order.js 41.1 kB
release/woocommerce-payments/dist/payment-request-rtl.css 153 B
release/woocommerce-payments/dist/payment-request.css 153 B
release/woocommerce-payments/dist/payment-request.js 13.1 kB
release/woocommerce-payments/dist/product-details.js 898 B
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.5 kB
release/woocommerce-payments/dist/tos-rtl.css 230 B
release/woocommerce-payments/dist/tos.css 231 B
release/woocommerce-payments/dist/tos.js 22 kB
release/woocommerce-payments/dist/upe_checkout.js 34.1 kB
release/woocommerce-payments/dist/upe_split_checkout.js 34.7 kB
release/woocommerce-payments/dist/upe_with_deferred_intent_creation_checkout.js 37.1 kB
release/woocommerce-payments/dist/upe-blocks-checkout.js 40.9 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.js 42.5 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 153 B
release/woocommerce-payments/dist/woopay-express-button.css 153 B
release/woocommerce-payments/dist/woopay-express-button.js 52 kB
release/woocommerce-payments/dist/woopay-rtl.css 3.91 kB
release/woocommerce-payments/dist/woopay.css 3.91 kB
release/woocommerce-payments/dist/woopay.js 71.7 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.32 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.8 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.32 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.05 kB

compressed-size-action

Copy link
Contributor

@dmvrtx dmvrtx left a comment

Choose a reason for hiding this comment

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

Everything looks good and consistent on the Settings and Transactions screens! Good work!

Kārlis Janisels and others added 4 commits October 27, 2023 14:20
Some use cases like removing PM modal relies on additional classes added to the root img
Current grid component is not resiable and brakes the design for enabling Credit card modal
@KarlisJ KarlisJ enabled auto-merge October 27, 2023 13:06
@KarlisJ KarlisJ added this pull request to the merge queue Oct 27, 2023
Merged via the queue into develop with commit 2ab6eda Oct 27, 2023
28 checks passed
@KarlisJ KarlisJ deleted the fix/7183-unify-pm-icon-design branch October 27, 2023 13:38
@KarlisJ KarlisJ mentioned this pull request Nov 8, 2023
6 tasks
@KarlisJ KarlisJ mentioned this pull request Nov 13, 2023
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Align logo border with icon edge
6 participants