Update to new approach using a status

Automattic · Jul 9, 2017 · 10a984e · 10a984e
1 parent d134fed
commit 10a984e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 15 deletions.
diff --git a/...sites/domains/domain-management/components/icann-verification/icann-verification-card.jsx b/...sites/domains/domain-management/components/icann-verification/icann-verification-card.jsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import React from 'react';
+import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -26,8 +27,8 @@ let IcannVerificationCard = React.createClass( {
 		}
 
 		return this.translate(
-			'You have to verify the email address used to register this domain before you can make changes. ' +
-			'Look for the verification message in your email inbox. ' +
+			'We need to verify the email address you provided for this domain to ensure we can contact ' +
+			'you concerning your domain. Please verify your email address or your domain may be suspended. ' +
 			'{{learnMoreLink}}Learn more.{{/learnMoreLink}}', {
 				components: {
 					learnMoreLink: <a href={ support.EMAIL_VALIDATION_AND_VERIFICATION }
@@ -41,23 +42,33 @@ let IcannVerificationCard = React.createClass( {
 
 	render() {
 		return (
-			<div className="icann-verification is-warning card">
+			<div className="icann-verification is-warning card is-compact">
 				<div className="icann-verification__explanation">
+					<h1 className="icann-verification__heading">Important: Verify Your Email Address</h1>
 					{ this.getExplanation() }
 				</div>
 
-				<IcannVerification.Button submitting={ this.props.submitting }
+				<div className="icann-verification__status-container">
+					<div className="icann-verification__status waiting">
+						<Gridicon icon="notice-outline" size="36" />
+						{ this.translate(
+							'Check your email — we\'re waiting for you to verify.'
+						)}
+					</div>
+
+					<IcannVerification.Button submitting={ this.props.submitting }
 					onClick={ this.props.handleSubmit } />
 
-				<div className="icann-verification__email">
-					{ this.translate(
-						'Verification email sent to: [registrant contact email]. ' +
-						'{{registrantEmail}}Change email address.{{/registrantEmail}}', {
-							components: {
-								registrantEmail: <a href="#" />
+					<div className="icann-verification__sent-to">
+						{ this.translate(
+							'Sent to registrant@contactemail.com. ' +
+							'{{registrantEmail}}Change email address.{{/registrantEmail}}', {
+								components: {
+									registrantEmail: <a href="#" />
+								}
 							}
-						}
-					)}
+						)}
+					</div>
 				</div>
 
 			</div>

diff --git a/...t/my-sites/domains/domain-management/components/icann-verification/icann-verification.jsx b/...t/my-sites/domains/domain-management/components/icann-verification/icann-verification.jsx
@@ -36,7 +36,7 @@ function createContainer( DecoratedComponent ) {
 					notices.error( error.message );
 				} else {
 					notices.info( this.translate(
-						'Verification sent to [registrant contact email]. Check your email.'
+						'Email sent to [registrant contact email]. Check your email.'
 					) );
 				}
 
@@ -57,7 +57,7 @@ const Button = React.createClass( {
 			<button disabled={ this.props.submitting }
 					className="button is-primary is-full-width"
 					onClick={ this.props.onClick }>
-				{ this.translate( 'Resend verification email' ) }
+				{ this.translate( 'Send Again' ) }
 			</button>
 		);
 	}

diff --git a/client/my-sites/domains/domain-management/components/icann-verification/style.scss b/client/my-sites/domains/domain-management/components/icann-verification/style.scss
@@ -12,11 +12,53 @@
 	margin-bottom: 15px;
 }
 
-.icann-verification__email {
+.icann-verification__status {
+	font-size: 16px;
+	font-weight: 600;
+
+	.gridicon {
+		display: block;
+		float: left;
+		padding: 0 15px 0 0;
+	}
+
+	&.waiting .gridicon {
+		color: $alert-yellow;
+	}
+}
+
+.icann-verification__sent-to {
 	color: 	darken( $gray, 20% );
 	font-size: 14px;
 }
 
+.icann-verification__heading {
+	font-size: 21px;
+	font-weight: bold;
+	line-height: 26px;
+	margin: 0 0 10px;
+}
+
+.icann-verification__status-container {
+	border-top: 1px solid lighten( $gray, 20% );
+	margin: 25px -24px -16px -21px;
+	padding: 24px 24px 24px 21px;
+	position: relative;
+
+	.button {
+		margin: 5px 0;
+		@include breakpoint( '>480px' ) {
+			position: absolute;
+			right: 24px;
+			top: 24px;
+		}
+	}
+
+	@include breakpoint( '>480px' ) {
+		padding-right: 145px;
+	}
+}
+
 .domain-details-card {
 	.icann-verification {
 		margin-bottom: 16px;