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

Fix margins on payment methods at checkout #5422

Merged
merged 5 commits into from
Jan 19, 2023

Conversation

timur27
Copy link
Contributor

@timur27 timur27 commented Jan 18, 2023

Fixes #5272

Changes proposed in this Pull Request

This PR

  • aligns the UPE fieldset elements with the CC styles
  • prevents the display of empty HTML elements for saved payment methods when there are no saved tokens
  • adds spacing between the card input field and the save payment method checkbox while aligning it with the SEPA
Before After

image

image

Before After

image

image

Testing instructions

  1. Make sure that the styling shown in the screenshots above is implemented in the shortcode checkout when checking out fix/payment-method-styles and the acceptance criteria described here are all met.

  • 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

@github-actions
Copy link
Contributor

github-actions bot commented Jan 18, 2023

Size Change: +2 B (0%)

Total Size: 1.14 MB

Filename Size Change
release/woocommerce-payments/dist/checkout.css 2.21 kB +1 B (0%)
release/woocommerce-payments/dist/upe_checkout.css 2.21 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 913 B
release/woocommerce-payments/assets/css/success.css 401 B
release/woocommerce-payments/dist/blocks-checkout.css 2.17 kB
release/woocommerce-payments/dist/blocks-checkout.js 36.5 kB
release/woocommerce-payments/dist/checkout.js 27.6 kB
release/woocommerce-payments/dist/index.css 36 kB
release/woocommerce-payments/dist/index.js 307 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 771 B
release/woocommerce-payments/dist/multi-currency-switcher-block.js 56.2 kB
release/woocommerce-payments/dist/multi-currency.css 14.7 kB
release/woocommerce-payments/dist/multi-currency.js 72.6 kB
release/woocommerce-payments/dist/order.css 248 B
release/woocommerce-payments/dist/order.js 12.4 kB
release/woocommerce-payments/dist/payment-gateways.css 1.2 kB
release/woocommerce-payments/dist/payment-gateways.js 47 kB
release/woocommerce-payments/dist/payment-request.js 11.7 kB
release/woocommerce-payments/dist/platform-checkout-express-button.js 12.8 kB
release/woocommerce-payments/dist/platform-checkout.css 4.02 kB
release/woocommerce-payments/dist/platform-checkout.js 75.1 kB
release/woocommerce-payments/dist/settings.css 47.4 kB
release/woocommerce-payments/dist/settings.js 111 kB
release/woocommerce-payments/dist/subscription-edit-page.js 392 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 7.18 kB
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 12.6 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 434 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 298 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 44.1 kB
release/woocommerce-payments/dist/tos.css 236 B
release/woocommerce-payments/dist/tos.js 15.5 kB
release/woocommerce-payments/dist/upe_checkout.js 32.8 kB
release/woocommerce-payments/dist/upe-blocks-checkout.css 2.17 kB
release/woocommerce-payments/dist/upe-blocks-checkout.js 39 kB
release/woocommerce-payments/includes/platform-checkout/assets/css/platform-checkout-express-button.css 247 B
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 633 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 720 B
release/woocommerce-payments/vendor/automattic/jetpack-admin-ui/src/css/jetpack-icon.css 224 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-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.27 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.3 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.27 kB
release/woocommerce-payments/vendor/automattic/jetpack-tracking/src/js/tracks-ajax.js 789 B
release/woocommerce-payments/vendor/automattic/jetpack-tracking/src/js/tracks-callables.js 925 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.2 kB
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.43 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 8.97 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.35 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 387 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.06 kB

compressed-size-action

@timur27 timur27 changed the title Fix/payment method styles Fix margins on payment methods at checkout Jan 18, 2023
@timur27 timur27 marked this pull request as ready for review January 18, 2023 16:35
@timur27 timur27 requested review from a team and mdmoore and removed request for a team January 18, 2023 16:36
Copy link
Member

@mdmoore mdmoore left a comment

Choose a reason for hiding this comment

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

Margins around payment methods are looking much better now. Thanks for working on this @timur27. It looks like we might want some design feedback, but adding my approval since this meets the acceptance criteria.

@elizaan36
Copy link

Thanks for the ping, @FangedParakeet
@timur27 Massive visual improvement!

One small thing is the alignment is slightly off between the "Save payment info" checkbox and checkbox copy. The text needs to be slightly higher to create that horizontal alignment.
image

Everything else looks great.

@timur27
Copy link
Contributor Author

timur27 commented Jan 19, 2023

Thanks, @elizaan36, for this super helpful feedback! It turned out that the misalignment occurred only on Chrome. Right now, it has been fixed, and all browsers (Chrome, Firefox, Safari) display the checkbox and the label text aligned horizontally.

May I kindly ask you to have a quick glance at it whenever your time allows, and please let me know if we can improve anything else or if the changes meet all the current design requirements. Many thanks for your time!

@mdmoore would you be so kind as to check these changes in fb9e83f and their effect in Chrome, Firefox, and Safari? Thanks for your time!

Before (Chrome only) Now (Chrome, Firefox, Safari)

image

image

@timur27 timur27 requested a review from mdmoore January 19, 2023 11:48
@elizaan36
Copy link

Thanks @timur27. Looks good to me.

Copy link
Member

@mdmoore mdmoore left a comment

Choose a reason for hiding this comment

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

Checkbox alignment is looking good in Chrome, Firefox, and Safari. Thanks Timur!

@timur27 timur27 merged commit 87b9ac6 into poc/upe-instances-multiplied Jan 19, 2023
@timur27 timur27 deleted the fix/payment-method-styles branch January 19, 2023 19:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants