New email verification texts and layout

src/containers/EmailVerificationForm/EmailVerificationForm.css

@@ -10,10 +10,15 @@
 
 .title {
   @apply --marketplaceModalTitle;
+  margin: 28px 0 17px 0;
+
+  @media (--viewportMedium) {
+    margin: 28px 0 24px 0;
+  }
 }
 
 .button {
-  @apply --marketplaceButtonStyles;
+  @apply --marketplaceButtonStylesPrimary;
 
   margin-top: 24px;
   align-self: stretch;
@@ -24,6 +29,10 @@
 }
 
 .error {
-  margin-top: 24px;
   color: var(--failColor);
+  margin: 23px 0 24px 0;
+
+  @media (--viewportMedium) {
+    margin: 28px 0 24px 0;
+  }
 }

src/containers/EmailVerificationForm/EmailVerificationForm.js

@@ -2,10 +2,11 @@ import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { reduxForm, Field, propTypes as formPropTypes } from 'redux-form';
-import { Button, NamedLink } from '../../components';
-
+import { PrimaryButton, NamedLink, IconEmailAttention, IconEmailSuccess } from '../../components';
 import * as propTypes from '../../util/propTypes';
+
 import css from './EmailVerificationForm.css';
+
 const EmailVerificationFormComponent = props => {
   const {
     currentUser,
@@ -16,6 +17,7 @@ const EmailVerificationFormComponent = props => {
   } = props;
 
   const email = <strong>{currentUser.attributes.email}</strong>;
+  const name = currentUser.attributes.profile.displayName;
 
   const errorMessage = (
     <div className={css.error}>
@@ -26,6 +28,7 @@ const EmailVerificationFormComponent = props => {
   const verifyEmail = (
     <div className={css.root}>
       <div>
+        <IconEmailAttention />
         <h1 className={css.title}>
           <FormattedMessage id="EmailVerificationForm.verifyEmailAddress" />
         </h1>
@@ -41,12 +44,12 @@ const EmailVerificationFormComponent = props => {
       <form onSubmit={handleSubmit}>
         <Field component="input" type="hidden" name="verificationToken" />
 
-        <Button className={css.button} type="submit" disabled={submitting || inProgress}>
+        <PrimaryButton className={css.button} type="submit" disabled={submitting || inProgress}>
 
           {submitting || inProgress
             ? <FormattedMessage id="EmailVerificationForm.verifying" />
             : <FormattedMessage id="EmailVerificationForm.verify" />}
-        </Button>
+        </PrimaryButton>
       </form>
     </div>
   );
@@ -54,36 +57,33 @@ const EmailVerificationFormComponent = props => {
   const alreadyVerified = (
     <div className={css.root}>
       <div>
+        <IconEmailSuccess />
         <h1 className={css.title}>
-          <FormattedMessage id="EmailVerificationForm.emailVerified" />
+          <FormattedMessage id="EmailVerificationForm.successTitle" values={{ name }} />
         </h1>
 
         <p>
-          <FormattedMessage
-            id="EmailVerificationForm.yourEmailAddressIsVerified"
-            values={{ email }}
-          />
+          <FormattedMessage id="EmailVerificationForm.successText" />
         </p>
 
       </div>
 
       <NamedLink className={css.button} name="LandingPage">
-        <FormattedMessage id="EmailVerificationForm.okHomepage" />
+        <FormattedMessage id="EmailVerificationForm.successButtonText" />
       </NamedLink>
     </div>
   );
 
   return currentUser.attributes.emailVerified ? alreadyVerified : verifyEmail;
 };
+
 EmailVerificationFormComponent.defaultProps = {
   currentUser: null,
   inProgress: false,
   verificationError: null,
 };
-const {
-  instanceOf,
-  bool,
-} = PropTypes;
+
+const { instanceOf, bool } = PropTypes;
 
 EmailVerificationFormComponent.propTypes = {
   ...formPropTypes,
@@ -91,9 +91,11 @@ EmailVerificationFormComponent.propTypes = {
   currentUser: propTypes.currentUser.isRequired,
   verificationError: instanceOf(Error),
 };
+
 const defaultFormName = 'EmailVerificationForm';
 
 const EmailVerificationForm = compose(reduxForm({ form: defaultFormName }), injectIntl)(
   EmailVerificationFormComponent
 );
+
 export default EmailVerificationForm;

src/marketplace.css

@@ -136,6 +136,7 @@
 
     /* Text */
     text-align: center;
+    text-decoration: none;
 
     /* Effects */
 

src/translations/en.json

@@ -105,20 +105,16 @@
   "EditListingWizard.tabLabelLocation": "Location",
   "EditListingWizard.tabLabelPhotos": "Photos",
   "EditListingWizard.tabLabelPricing": "Pricing",
-  "EmailVerificationForm.emailVerified": "Your email address is verified",
-  "EmailVerificationForm.finishAccountSetup": "To finish setting up your Saunatime account, we sent an email to {email} to make sure this email is yours, so we can reach your later.",
-  "EmailVerificationForm.finishAccountSetup": "To finish setting up your Saunatime account, we sent an email to {email} to make sure this email is yours.",
-  "EmailVerificationForm.okHomepage": "Ok, got it. Take me to the homepage",
+  "EmailVerificationForm.finishAccountSetup": "We would like to send you email notifications. To allow that, please verify your email {email}.",
+  "EmailVerificationForm.successButtonText": "Continue exploring",
+  "EmailVerificationForm.successText": "Everything looks good, time to get out there – have a great day.",
+  "EmailVerificationForm.successTitle": "Thanks for verifying your email, {name}.",
   "EmailVerificationForm.verificationFailed": "Could not verify the email address.",
   "EmailVerificationForm.verify": "Verify my email",
-  "EmailVerificationForm.verifyEmailAddress": "Verify your email address",
-  "EmailVerificationForm.verifyEmailAddress": "Verify your email address",
+  "EmailVerificationForm.verifyEmailAddress": "Verify your email",
   "EmailVerificationForm.verifying": "Verifying…",
-  "EmailVerificationForm.yourEmailAddressIsVerified": "Your email address {email} is verified.",
   "EmailVerificationPage.loadingUserInformation": "Loading user information…",
-  "EmailVerificationPage.loadingUserInformation": "Loading user information…",
-  "EmailVerificationPage.title": "Verify your email address",
-  "EmailVerificationPage.title": "Verify your email address",
+  "EmailVerificationPage.title": "Verify your email",
   "HeroSection.mobileSearchButtonText": "Search saunas",
   "HeroSection.subTitle": "The largest online community to rent saunas in Finland.",
   "HeroSection.title": "Book saunas everywhere.",