LG-6387: Make CTA button more prominent

[jmdembe]

This PR is looking to decrease confusion of where the "Create your account" button is located.

Context:

• The issue has been raised that some partner sites direct you to the Login.gov front-door to click "Create an account" after clicking "Create a new account" on their respective site, requiring users to do the same action twice.

• The secure.login.gov IdP landing page features username and password fields for users to sign in and create an account. There have been notes from our partners and agencies like CA.gov who have expressed concerns about the visibility of the “Create account” CTA within the Login.gov “front-door” sign-in landing page.

Proposed solution: Improve layout of the front door sign-in page to reduce user confusion of options to select

before	Figma design	after

[zachmargolis]

LGTM

[zachmargolis]

maybe we could use the -x- styles for left + right?

Suggested change

	<span class='padding-left-1 padding-right-1 bg-white' ><%= t('headings.create_account_with_sp.cta', app_name: APP_NAME) %></span>
	<span class='padding-x-1 bg-white' ><%= t('headings.create_account_with_sp.cta', app_name: APP_NAME) %></span>

[jmdembe]

yeah this is a lot better. thanks!

[aduth]

Minor: I saw some commits which moved styles from the CSS to utility classes. I might actually be more in favor of the opposite, so that we can treat this more as a self-contained component.

e.g.

<h2 class="separator-heading">
  <span class="separator-heading__text">
    <%= t('headings.create_account_with_sp.cta', app_name: APP_NAME) %>
  </span>
</h2>

[aduth]

This has both text-normal and text-bold classes. Based on the Figma design, I'm assuming it should only be text-bold.

[aduth]

Couple discrepancies I'm noticing between the implementation and Figma reference:

1. Font size: 22px vs. 18px in the Figma
2. Padding: 0.5rem vs. 1rem in the Figma

Suggested change

	.text-center--line {
	border-bottom-color: color('primary-light');
	line-height: 0.1em;
	}
	.text-center--line {
	border-bottom-color: color('primary-light');
	line-height: 0.1em;
	font-size: 1.125rem;
	span {
	@include u-padding-x(2);
	}
	}

[aduth]

Is 0.1em significant? Would it make any difference if it were 0 (collapse all line-height) or 1px (match the size of the border)?

[aduth]

I'm observing that at small phone sizes (e.g. iPhone SE) where text wrapping occurs, the small line-height causes the text to collapse on itself in French and Spanish versions.