fix(ras-acc): apply terms and conditions styles

[chickenn00dle]

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:

Closes https://app.asana.com/0/1207817176293825/1208579907739880

Looks like our terms and conditions styles weren't being applied correctly because we were targeting invalid classnames and nested elements. This PR adjusts our checkout styles to correctly target this section.

NOTE: I'm making some assumptions about what this should look like based on the existing styles since I didn't see this checkbox in the Figma. Let me know if this should look differently!

Without T&C set:

With T&C set:

How to test the changes in this Pull Request:

1. Set up a terms and conditions page, then apply it in the customizer (WooCommerce > Checkout > Terms and conditions page)
2. As a reader, go through checkout and confirm the Terms and Conditions checkbox appears as shown in the 'With T&C set' screenshot above.
3. Remove the terms and conditions page via the customizer again
4. Repeat step 2, but this time confirm the Terms and Conditions checkbox appears as shown in the 'Without T&C set' screenshot above.

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?

[laurelfulford]

If it helps, I did get a thumbs up from Kevin for the styles used here -- the main difference is the font size and lack of background.

Personally I like how it looks now! The only thing that stands out to me with the label part is the distance between the text and the asterisks.

When the terms are open, the spacing is also a little funky -- the terms box is closer to the privacy policy text than the toggle:

I missed this myself, but when you add a heading the spacing at the top of the terms also seems like a lot! I think removing the top margin from the first element should take care of most cases of that.

[chickenn00dle]

Thanks for the review @laurelfulford!

I've got a fix up for the terms box and abbreviation spacing in 850d5aa and ac5e438

Let me know if this works!

[laurelfulford]

Thanks @chickenn00dle! This looks awesome overall! The only other thing I see is that the spacing next to the checkbox seems to be a bit smaller usual; it's only really noticeable when you have the checkboxes back to back like this:

I think it's just a matter of changing var(--newspack-ui-spacer-base,8px) to var(--newspack-ui-spacer-2,12px) to match the checkbox above; marking as approved since it's a small tweak and things otherwise are solid!