Use core button for logged out accept invite button

Author: adamwoodnz

client/blocks/signup-form/signup-submit-button.tsx

@@ -8,6 +8,7 @@ interface SignupSubmitButtonProps {
 	variationName?: string;
 	children: ReactNode;
 	className?: string;
+	onClick?: () => void;
 }
 
 const SignupSubmitButton = ( {
@@ -16,6 +17,7 @@ const SignupSubmitButton = ( {
 	variationName,
 	children,
 	className,
+	onClick,
 }: SignupSubmitButtonProps ) => {
 	return (
 		<Button
@@ -28,6 +30,7 @@ const SignupSubmitButton = ( {
 			) }
 			disabled={ isDisabled }
 			isBusy={ isBusy }
+			onClick={ onClick }
 			__next40pxDefaultSize
 		>
 			{ children }

client/jetpack-connect/style.scss

@@ -1037,11 +1037,6 @@ $colophon-height: 50px;
 			color: var(--color-neutral-80);
 		}
 
-		.signup-form__submit {
-			border: 0;
-			box-shadow: none;
-		}
-
 		.jetpack-header__partner-logo-plus svg {
 			stroke: var(--color-neutral-80);
 		}

client/login/wp-login/style.scss

@@ -19,7 +19,7 @@ $image-height: 47px;
 		padding-bottom: $image-height;
 		min-height: calc(100% - #{$image-height});
 	}
-	
+
 	.layout__content {
 		position: static;
 	}
@@ -315,7 +315,6 @@ $image-height: 47px;
 	}
 
 	.login .button.is-primary {
-		// Note: Matches primary button to `button.signup-form__submit`
 		background-color: var(--studio-wordpress-blue, #3858e9);
 		color: var(--color-text-inverted);
 		box-shadow: none;
@@ -363,7 +362,7 @@ $image-height: 47px;
 		// following overrides could be safely deleted.
 		input:not(.components-text-control__input),
 		button:not(.components-button) {
-			/* Note: Same as `button.signup-form__submit, .signup-form__input.form-text-input` */
+			/* Note: Same as `.signup-form__input.form-text-input` */
 			height: 40px; // Matches .components-button height __next40pxDefaultSize
 			border: 1px solid var(--studio-gray-10);
 			font-size: $font-body;

client/my-sites/invites/invite-accept-logged-out/index.jsx

@@ -6,7 +6,7 @@ import { Component } from 'react';
 import { connect } from 'react-redux';
 import store from 'store';
 import SignupForm from 'calypso/blocks/signup-form';
-import FormButton from 'calypso/components/forms/form-button';
+import SignupSubmitButton from 'calypso/blocks/signup-form/signup-submit-button';
 import LoggedOutFormLinkItem from 'calypso/components/logged-out-form/link-item';
 import LoggedOutFormLinks from 'calypso/components/logged-out-form/links';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
@@ -150,9 +150,9 @@ class InviteAcceptLoggedOut extends Component {
 				<div className="logged-out-form">
 					{ this.renderFormHeader() }
 					<Card className="logged-out-form__footer">
-						<FormButton className="signup-form__submit" onClick={ this.clickSignInLink }>
+						<SignupSubmitButton onClick={ this.clickSignInLink }>
 							{ this.props.translate( 'Sign In' ) }
-						</FormButton>
+						</SignupSubmitButton>
 					</Card>
 				</div>
 			</div>

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

@@ -52,27 +52,6 @@ body.is-section-accept-invite {
 		max-width: 372px;
 		background: none;
 
-		button.is-primary {
-			border-radius: 2px;
-			border: 1px solid var(--studio-wordpress-blue, #3858e9);
-			background: var(--studio-wordpress-blue, #3858e9);
-			height: 48px;
-			font-weight: 500;
-			&:hover {
-				background: var(--studio-wordpress-blue-60);
-			}
-			&:focus {
-				background-color: var(--studio-wordpress-blue-60);
-				border-color: var(--studio-wordpress-blue-60);
-				color: var(--color-text-inverted);
-				box-shadow: none;
-			}
-			&:disabled {
-				background: var(--studio-gray-20);
-				border: 1px solid var(--studio-gray-20);
-				color: var(--color-surface);
-			}
-		}
 		label.form-label {
 			color: var(--studio-gray-60, #50575e);
 			font-size: 0.875rem;

client/signup/style.scss

@@ -307,27 +307,6 @@ body.is-section-signup .layout:not(.dops):not(.is-wccom-oauth-flow) {
 
 	.signup__step.is-user,
 	.signup__step.is-user-social {
-		.button.signup-form__submit[disabled],
-		.button.signup-form__submit:disabled,
-		.button.signup-form__submit.disabled {
-			background-color: var(--studio-gray-20);
-			color: var(--color-surface);
-		}
-
-		.button.signup-form__submit {
-			border-radius: 4px;
-			max-width: 408px;
-			height: 44px;
-			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-			font-weight: 500;
-			letter-spacing: 0.32px;
-			line-height: 17px;
-
-			&.newsletter-signup-form {
-				background-color: var(--color-primary);
-			}
-		}
-
 		.signup-form__terms-of-service-link {
 			text-align: start;
 			font-size: 0.875rem;