Email varification dialog - update copies and CTAs (#94629)

* update copies for new design * update styles for new design * margin change * add bold email address in copy * fix border radius as well while we are here * use sentance case for buttons here too
Automattic · Sep 30, 2024 · 6576491 · 6576491
1 parent 6e05a7d
commit 6576491
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 39 deletions.
diff --git a/client/components/email-verification/email-verification-dialog/index.jsx b/client/components/email-verification/email-verification-dialog/index.jsx
@@ -20,12 +20,12 @@ class VerifyEmailDialog extends Component {
 			'sent' === this.props.emailVerificationStatus ||
 			'error' === this.props.emailVerificationStatus
 		) {
-			return this.props.translate( 'Email Sent' );
+			return this.props.translate( 'Email sent' );
 		}
 		if ( 'requesting' === this.props.emailVerificationStatus ) {
 			return <Spinner className="email-verification-dialog__confirmation-dialog-spinner" />;
 		}
-		return this.props.translate( 'Resend Email' );
+		return this.props.translate( 'Resend email' );
 	}
 
 	handleClose = () => {
@@ -35,9 +35,12 @@ class VerifyEmailDialog extends Component {
 
 	getDialogButtons() {
 		return [
+			<Button key="close" onClick={ this.handleClose }>
+				{ this.props.translate( 'Cancel' ) }
+			</Button>,
 			<Button
 				key="resend"
-				primary={ false }
+				primary
 				disabled={ includes(
 					[ 'requesting', 'sent', 'error' ],
 					this.props.emailVerificationStatus
@@ -46,38 +49,37 @@ class VerifyEmailDialog extends Component {
 			>
 				{ this.getResendButtonLabel() }
 			</Button>,
-			<Button key="close" primary onClick={ this.handleClose }>
-				{ this.props.translate( 'OK' ) }
-			</Button>,
 		];
 	}
 
 	render() {
 		const strings = {
-			confirmHeading: this.props.translate( 'Please verify your email address:' ),
+			confirmHeading: this.props.translate( 'Verify your email' ),
 
 			confirmExplanation: this.props.translate(
-				'When you first signed up for a WordPress.com account we sent you an email. ' +
-					'Please open it and click on the blue button to verify your email address.'
+				"Check your inbox at {{wrapper}}%(email)s{{/wrapper}} for the confirmation email, or click 'Resend Email' to get a new one.",
+				{
+					components: {
+						wrapper: (
+							<span className="email-verification-dialog__confirmation-dialog-email-wrapper" />
+						),
+					},
+					args: {
+						email: this.props.email,
+					},
+				}
 			),
 
 			confirmReasoning: this.props.translate(
-				'Verifying your email allows us to assist you if you ' +
-					'ever lose access to your account in the future.'
+				'Verify your email to secure your account and access more features.'
 			),
 
 			confirmEmail: this.props.translate(
-				'{{wrapper}}%(email)s{{/wrapper}} {{emailPreferences}}change{{/emailPreferences}}',
+				"Can't access that email? {{emailPreferences}}Click here to update it{{/emailPreferences}}.",
 				{
 					components: {
-						wrapper: (
-							<span className="email-verification-dialog__confirmation-dialog-email-wrapper" />
-						),
 						emailPreferences: <a href="/me/account" />,
 					},
-					args: {
-						email: this.props.email,
-					},
 				}
 			),
 		};
@@ -92,14 +94,14 @@ class VerifyEmailDialog extends Component {
 				<h1 className="email-verification-dialog__confirmation-dialog-heading is-variable-height">
 					{ strings.confirmHeading }
 				</h1>
-				<p className="email-verification-dialog__confirmation-dialog-email">
-					{ strings.confirmEmail }
+				<p className="email-verification-dialog__confirmation-dialog-explanation">
+					{ strings.confirmReasoning }
 				</p>
 				<p className="email-verification-dialog__confirmation-dialog-explanation">
 					{ strings.confirmExplanation }
 				</p>
-				<p className="email-verification-dialog__confirmation-dialog-reasoning">
-					{ strings.confirmReasoning }
+				<p className="email-verification-dialog__confirmation-dialog-email">
+					{ strings.confirmEmail }
 				</p>
 			</Dialog>
 		);

diff --git a/client/components/email-verification/email-verification-dialog/style.scss b/client/components/email-verification/email-verification-dialog/style.scss
@@ -1,10 +1,8 @@
 .email-verification-dialog__confirmation-dialog.is-narrow {
 	max-width: 100%;
-	border-radius: 0;
 
 	@include breakpoint-deprecated( ">660px" ) {
 		max-width: 550px;
-		border-radius: 2px;
 	}
 }
 
@@ -19,30 +17,23 @@
 }
 
 .email-verification-dialog__confirmation-dialog-email,
-.email-verification-dialog__confirmation-dialog-explanation,
-.email-verification-dialog__confirmation-dialog-reasoning {
+.email-verification-dialog__confirmation-dialog-explanation {
 	color: var(--color-neutral-60);
-	margin: 0 0 8px;
+	margin: 20px 0;
 }
 
 .email-verification-dialog__confirmation-dialog-email {
 	margin-bottom: 16px;
 	color: var(--color-neutral-40);
+	font-size: $font-body-small;
+	a {
+		color: inherit;
+		text-decoration: underline;
+	}
 }
 
 .email-verification-dialog__confirmation-dialog-email-wrapper {
-	display: inline-block;
-	max-width: 70%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	margin-right: 5px;
-	vertical-align: bottom;
-}
-
-.email-verification-dialog__confirmation-dialog-reasoning {
-	color: var(--color-neutral-40);
-	font-size: $font-body-small;
-	margin-bottom: 24px;
+	font-weight: bold;
 }
 
 .email-verification-dialog__confirmation-dialog-spinner {