Adjust CSS for new Portable Wallet

[eugenekasimov]

PR Summary:

There has been changes in a way the dynamic pay buttons (Pay now, pay with PayPal etc) are rendered. Currently, we have our own selectors to style those buttons, but since the whole HTML structure has been changed we need to make adjustments.

So far, everything works fine just because there is backward compatibility. But there are plans to remove it and then the current styling won't work.

Here is a doc that describes CSS properties we need to use to properly style shopify pay buttons.

There are some know issues:

• The border is not applied to dynamic buttons.
• The focus may look a bit weird on some buttons.

Why are these changes introduced?

Fixes #3613.

What approach did you take?

I removed old selectors we used to apply styles (shadow and border radius) to shopify pay buttons.

I added new selectors with some properties we previously used and linked them to our variables.
You can noticed that I didn't add all available properties to selectors, we still get them with default values mentioned in this doc.

Other considerations

It's possible I missed something and removed not all references to previous selectors, but I think I removed the most obvious ones and even if something was left it shouldn't impact the style of the buttons.

Visual impact on existing themes

There shouldn't be any visual impact.

Testing steps/scenarios

• try to change settings like shadow and border radius for buttons and make sure that your changes are applied on dynamic buttons on PDP and in the cart.

Demo links

• Store
• Editor

[melissaperreault]

@eugenekasimov Reading the doc, are we allowed to change the radius beyond 4px of the wallet buttons?

[eugenekasimov]

@eugenekasimov Reading the doc, are we allowed to change the radius beyond 4px of the wallet buttons?

Yes, we are. That 4px is a default value for the radius on the cart page. If we didn't apply our own value we would have 4px for default. But we always use our value that comes from the theme settings.

[tyleralsbury]

Code looks good, but I'll let @melissaperreault test it and confirm as well.

[melissaperreault]

🚢