Update logged-out invite screen to match the logged-in one (#103490)

* Adjust the logged-out invite form to match the logged in one

* Remove period from headings

Author: claudiucelfilip

client/my-sites/invites/invite-accept-logged-out/style.scss

@@ -24,32 +24,42 @@ body.is-section-accept-invite {
 .invite-accept-logged-out-wrapper {
 	width: 100%;
 	margin: 0 auto;
-	@media (min-width: $break-small) {
-		width: 372px;
-		margin-top: 100px;
-	}
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	box-sizing: border-box;
 	font-family: $font-sf-pro-text;
 
+	.invite-form-header {
+		flex: 0.5;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		max-height: 340px;
+	}
+
 	.invite-form-header__title {
 		color: var(--studio-gray-100, #2c3338);
 		text-align: center;
 		font-family: $recoleta-font-family;
 		font-size: 2rem;
-		line-height: normal;
-		letter-spacing: 0.2px;
+		line-height: 1.26;
+		a {
+			text-decoration: none;
+		}
 	}
 
 	.invite-form-header__explanation {
 		color: var(--studio-gray-50, #2c3338);
 		text-align: center;
-		margin-top: 14px;
+		margin-top: 6px;
+		font-size: 14px;
 	}
 
 	.card.logged-out-form {
 		box-shadow: none;
 		padding: 0;
-		margin: 0;
-		max-width: 372px;
+		margin: 0 auto;
 		background: none;
 
 		button.is-primary {
@@ -84,18 +94,19 @@ body.is-section-accept-invite {
 			margin-bottom: 0;
 		}
 	}
+	.signup-form {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
 
 	.signup-form__passwordless-form-wrapper {
 		.signup-form__terms-of-service-link {
-			margin: 16px 0;
+			margin: 30px 0 16px;
 			color: var(--studio-gray-50, #2c3338);
 			font-size: $font-body-small; // 14px
 			line-height: 20px;
-			a {
-				color: var(--studio-gray-80, #2c3338);
-				font-style: normal;
-				text-decoration-line: underline;
-			}
 		}
 	}
 
@@ -104,13 +115,7 @@ body.is-section-accept-invite {
 		padding: 0;
 	}
 	.logged-out-form__link-item {
-		color: var(--studio-gray-90, #2c3338);
-		font-weight: 500;
-		text-underline-offset: 5px;
-		margin-top: 32px;
-		padding: 0;
-		&:hover {
-			color: var(--studio-blue-50, #0675c4);
-		}
+		color: var(--color-link);
+		font-size: 12px;
 	}
 }

client/my-sites/invites/invite-form-header/index.jsx

@@ -34,50 +34,50 @@ class InviteFormHeader extends Component {
 
 		switch ( role ) {
 			case 'administrator':
-				title = this.props.translate( 'Sign up to start managing {{siteLink/}}.', {
+				title = this.props.translate( 'Sign up to start managing {{siteLink/}}', {
 					components: {
 						siteLink: this.getSiteLink(),
 					},
 				} );
 				break;
 			case 'editor':
-				title = this.props.translate( 'Sign up to start editing {{siteLink/}}.', {
+				title = this.props.translate( 'Sign up to start editing {{siteLink/}}', {
 					components: {
 						siteLink: this.getSiteLink(),
 					},
 				} );
 				break;
 			case 'author':
-				title = this.props.translate( 'Sign up to start writing for {{siteLink/}}.', {
+				title = this.props.translate( 'Sign up to start writing for {{siteLink/}}', {
 					components: {
 						siteLink: this.getSiteLink(),
 					},
 				} );
 				break;
 			case 'contributor':
-				title = this.props.translate( 'Sign up to start contributing to {{siteLink/}}.', {
+				title = this.props.translate( 'Sign up to start contributing to {{siteLink/}}', {
 					components: {
 						siteLink: this.getSiteLink(),
 					},
 				} );
 				break;
 			case 'subscriber':
-				title = this.props.translate( 'Sign up to start your subscription to {{siteLink/}}.', {
+				title = this.props.translate( 'Sign up to start your subscription to {{siteLink/}}', {
 					components: {
 						siteLink: this.getSiteLink(),
 					},
 				} );
 				break;
 			case 'viewer':
-				title = this.props.translate( 'Sign up to begin viewing {{siteLink/}}.', {
+				title = this.props.translate( 'Sign up to begin viewing {{siteLink/}}', {
 					components: {
 						siteLink: this.getSiteLink(),
 					},
 				} );
 				break;
 			case 'follower':
 				title = this.props.translate(
-					'Sign up to start following {{siteLink/}} in the WordPress.com Reader.',
+					'Sign up to start following {{siteLink/}} in the WordPress.com Reader',
 					{
 						components: {
 							siteLink: this.getSiteLink(),
@@ -87,7 +87,7 @@ class InviteFormHeader extends Component {
 				break;
 			default:
 				title = this.props.translate(
-					'Sign up to join {{siteLink/}} as: {{strong}}%(siteRole)s{{/strong}}.',
+					'Sign up to join {{siteLink/}} as: {{strong}}%(siteRole)s{{/strong}}',
 					{
 						args: {
 							siteRole: role,