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

Increase font on WooPay button #8715

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

LCmry
Copy link
Contributor

@LCmry LCmry commented Apr 24, 2024

Fixes #8136

Changes proposed in this Pull Request

Increase the font on the WooPay button so it is more in line with other PRB buttons.

Testing instructions

Borrowed from issue

  1. Enable Apple Pay/Google Pay and WooPay
  2. Set button label to "Buy with" and enabled on all pages.
  3. Test on Chrome and Safari desktop and note that the font size has been increased on the product, cart, and checkout pages.
  4. Vary the browser window size to test various breakpoints
  5. Test again on mobile
  6. Test again with the other 2 label options.
  7. Test again with the 'icon only' option and observe no label text and that the logo is centered.

  • 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

@botwoo
Copy link
Collaborator

botwoo commented Apr 24, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8715 or branch name update/increase-woopay-button-font 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: ab17872
  • Build time: 2024-05-02 13:51:39 UTC

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

Copy link
Contributor

github-actions bot commented Apr 24, 2024

Size Change: +6 B (0%)

Total Size: 1.25 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.07 kB +4 B (0%)
release/woocommerce-payments/dist/blocks-checkout.css 2.07 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.08 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.08 kB
release/woocommerce-payments/assets/css/success.css 172 B
release/woocommerce-payments/assets/css/success.rtl.css 172 B
release/woocommerce-payments/dist/blocks-checkout.js 56.3 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 530 B
release/woocommerce-payments/dist/bnpl-announcement.css 531 B
release/woocommerce-payments/dist/bnpl-announcement.js 20 kB
release/woocommerce-payments/dist/cart-block.js 21.4 kB
release/woocommerce-payments/dist/cart.js 4.39 kB
release/woocommerce-payments/dist/checkout-rtl.css 599 B
release/woocommerce-payments/dist/checkout.css 599 B
release/woocommerce-payments/dist/checkout.js 37.5 kB
release/woocommerce-payments/dist/index-rtl.css 40.7 kB
release/woocommerce-payments/dist/index.css 40.6 kB
release/woocommerce-payments/dist/index.js 292 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.28 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/multi-currency.js 54.6 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
release/woocommerce-payments/dist/order.js 41.8 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.js 38.6 kB
release/woocommerce-payments/dist/payment-request-rtl.css 155 B
release/woocommerce-payments/dist/payment-request.css 155 B
release/woocommerce-payments/dist/payment-request.js 12 kB
release/woocommerce-payments/dist/product-details-rtl.css 398 B
release/woocommerce-payments/dist/product-details.css 402 B
release/woocommerce-payments/dist/product-details.js 17.2 kB
release/woocommerce-payments/dist/settings-rtl.css 11.1 kB
release/woocommerce-payments/dist/settings.css 10.9 kB
release/woocommerce-payments/dist/settings.js 201 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 18.5 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 236 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 4.54 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 155 B
release/woocommerce-payments/dist/woopay-express-button.css 155 B
release/woocommerce-payments/dist/woopay-express-button.js 21 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.25 kB
release/woocommerce-payments/dist/woopay.css 4.22 kB
release/woocommerce-payments/dist/woopay.js 69.4 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 815 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.44 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.37 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.5 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.37 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.52 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

@LCmry
Copy link
Contributor Author

LCmry commented Apr 30, 2024

Before After
Shortcode Cart Shortcode Cart
ecb_before_cart ecb_after_cart
Blocks Cart Blocks Cart
ecb_before_cart2 ecb_after_cart2
Shortcode Checkout Shortcode Checkout
ecb_before_check ecb_after_check
Blocks Checkout Blocks Checkout
ecb_before_check2 ecb_after_check2
Product Page Product Page
ecb_before_prod ecb_after_prod

@LCmry
Copy link
Contributor Author

LCmry commented Apr 30, 2024

Shortcode Cart Default
ecb_after_cart
Shortcode Cart Med
ecb_after_cart_med
Shortcode Cart Large
ecb_after_cart_lg

Blocks Cart Default
ecb_after_cart2
Blocks Cart Med
ecb_after_cart2_med
Blocks Cart Large
ecb_after_cart2_lg

@LCmry
Copy link
Contributor Author

LCmry commented May 2, 2024

Shortcode Checkout Default - Before
ecb_before_check

After
Shortcode Checkout Default
ecb_after_check

Shortcode Checkout Med
ecb_after_check_med

Shortcode Checkout Large
ecb_after_check_lg

Blocks Checkout Default - Before
ecb_before_check2

After
Blocks Checkout Default
ecb_after_check2

Blocks Checkout Med
ecb_after_check2_med

Blocks Checkout Large
ecb_after_check2_lg

@LCmry
Copy link
Contributor Author

LCmry commented May 2, 2024

Product Page - Before
ecb_before_prod

After
Product Page Default
ecb_after_prod

Product Page Med
ecb_after_prod_med

Product Page Large
ecb_after_prod_lg

@LCmry LCmry force-pushed the update/increase-woopay-button-font branch from b0a41f6 to ab17872 Compare May 2, 2024 13:48
@LCmry LCmry marked this pull request as ready for review May 2, 2024 13:48
@LCmry
Copy link
Contributor Author

LCmry commented May 2, 2024

@pierorocca and @nikkivias for reviewing the look please.

@pierorocca
Copy link

I'm on mobile and afk. At a quick glance the size looks good but the font weight seems heavier than the dev guidelines?

Could you confirm the logic is getting applied to the light and outline theme options?

@LCmry
Copy link
Contributor Author

LCmry commented May 9, 2024

Thanks for taking a look @pierorocca .

font weight seems heavier than the dev guidelines

I only changed the font size. Where are the guidelines for weight? I can check into them.

Can confirm it is the same for light and outline options.

@pierorocca
Copy link

@LCmry what I'm seeing in the Figma is SF Pro Text Medium. Here's the Figma Large 54 px button for comparison. What web font is being used and current weight?

image

image

@LCmry
Copy link
Contributor Author

LCmry commented May 10, 2024

@pierorocca the current font is 'SF Pro Text' and current weight is 500.

@pierorocca
Copy link

Thanks @LCmry. 500 does correspond to Medium. It looks like Figma rendering can be different than what's actually rendered by different devices and browsers. https://forum.figma.com/t/font-sfprotext-medium-displays-different-between-figma-vs-ios/9513

@nikkivias any thoughts here? Keep weight at 500 or drop down to 400 to try and match Figma?

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.

Increase WooPay button label font so that it has equal prominence to competing PRBs
3 participants