WooCommerce Onboarding: Fix CSS class names in signup route and fix cart display header

[justinshreve]

Note that the flows affected in this PR are currently behind a feature flag while onboarding work is ongoing in WooCommerce Core. Please see 22a33-pb for designs of these flows.

• This PR adjust some incorrect class names on the signup route. See Add WooCommerce onboarding styles to the WC Helper connection flow #35193 (comment) and my follow up comment.
• Makes term of services links clearer and fixes display of updated social buttons.
• This PR also adjusts the colors of the 'cart header' that will display in certain WooCommerce.com OAuth flows.

Testing instructions

We are going to work on a test build of the onboarding code that will make testing things easier, but in the meantime the best way to load these is the following:

• npm start this branch
• Install WooCommerce
• Install WooCommerce Admin from GitHub (https://github.com/woocommerce/woocommerce-admin) and npm run dev.
• define( 'WOOCOMMERCE_CALYPSO_ENVIRONMENT', 'development' ); in your wp-config.php.
• define( 'WP_DEBUG', true ); in your wp-config.php.
• Go to /wp-admin/edit.php?post_type=shop_order and click the Help Tab.
• Under Setup Wizard you should see Quickly access the WooCommerce.com connection flow in Calypso.. Click the connect button here.
• Visually inspect the signup and login pages.
• You can change wccom-from in the query string to wccom-from=cart to test the cart header display.

Screenshots

[matticbot]

Test live: https://calypso.live/?branch=fix/woo-css-classes

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~3 bytes removed 📉 [gzipped])

name                          parsed_size           gzip_size
async-load-signup-steps-user        +36 B  (+0.0%)       -3 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[psealock]

Changes to CSS look good and this is testing well. I can see the login with existing account and create accounts flows, as well as each flow with the wccom-from variation.

Styles look good.