feat: add styles to fix braintree modal appearance

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR tidies up the appearance of the Braintree Credit Card form; related PR: Automattic/newspack-plugin#3692 is merged.

How to test the changes in this Pull Request:

1. Set up your site to use Braintree Braintree Credit Card as a payment processor.
2. Either temporarily add braintree_credit_card to the $supported_gateways array in includes/class-modal-checkout.php, or add this code to a mini-plugin:

add_filter(
	'newspack_blocks_modal_checkout_supported_gateways',
	function( $gateways ) {
		if ( ! in_array( 'braintree_credit_card', $gateways, true ) ) {
			$gateways[] = 'braintree_credit_card';
		}
		return $gateways;
	}
);

3. Run through a test checkout and note the appearance of the Braintree credit card option, both when opened and closed:

5. Apply this PR and run npm run build.
6. Repeat the checkout, and confirm the Braintree credit card form looks closer to Stripe:

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[dkoo]

Looks much cleaner!

[laurelfulford]

Thanks @dkoo! 🙌

[github-actions]

Hey @laurelfulford, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

[matticbot]

🎉 This PR is included in version 4.7.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀