Apply styles

src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css

@@ -13,7 +13,8 @@
   margin-bottom: 24px;
 
   @media (--viewportMedium) {
-    margin-top: 30px;
+    margin-top: 22px;
+    margin-bottom: 88px;
   }
 }
 

src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js

@@ -1,14 +1,24 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { reduxForm, propTypes as formPropTypes } from 'redux-form';
+import classNames from 'classnames';
 import { PrimaryButton, TextInputField, NamedLink } from '../../components';
 import * as validators from '../../util/validators';
 
 import css from './PasswordRecoveryForm.css';
 
 const PasswordRecoveryFormComponent = props => {
-  const { handleSubmit, pristine, submitting, form, initialValues, intl } = props;
+  const {
+    rootClassName,
+    className,
+    handleSubmit,
+    pristine,
+    submitting,
+    form,
+    initialValues,
+    intl,
+  } = props;
 
   // email
   const emailLabel = intl.formatMessage({
@@ -21,10 +31,18 @@ const PasswordRecoveryFormComponent = props => {
     id: 'PasswordRecoveryForm.emailRequired',
   });
   const emailRequired = validators.required(emailRequiredMessage);
+
   const initialEmail = initialValues ? initialValues.email : null;
   const buttonDisabled = (pristine && !initialEmail) || submitting;
+  const classes = classNames(rootClassName || css.root, className);
+
+  const goToLoginHelp = (
+    <span className={css.goToLoginLinkHelp}>
+      <FormattedMessage id="PasswordRecoveryForm.goToLoginHelp" />
+    </span>
+  );
   return (
-    <form onSubmit={handleSubmit}>
+    <form className={classes} onSubmit={handleSubmit}>
       <TextInputField
         className={css.email}
         type="email"
@@ -36,11 +54,7 @@ const PasswordRecoveryFormComponent = props => {
       />
       <p className={css.bottomWrapper}>
         <NamedLink name="LoginPage" className={css.goToLoginLink}>
-          <span className={css.goToLoginLinkHelp}>
-            <FormattedMessage id="PasswordRecoveryForm.goToLoginHelp" />
-          </span>
-          {' '}
-          <FormattedMessage id="PasswordRecoveryForm.goToLogin" />
+          <FormattedMessage id="PasswordRecoveryForm.goToLogin" values={{ goToLoginHelp }} />
         </NamedLink>
       </p>
       <PrimaryButton type="submit" disabled={buttonDisabled}>
@@ -50,8 +64,17 @@ const PasswordRecoveryFormComponent = props => {
   );
 };
 
+PasswordRecoveryFormComponent.defaultProps = {
+  rootClassName: null,
+  className: null,
+};
+
+const { string } = PropTypes;
+
 PasswordRecoveryFormComponent.propTypes = {
   ...formPropTypes,
+  rootClassName: string,
+  className: string,
   intl: intlShape.isRequired,
 };
 

src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css

@@ -1,11 +1,33 @@
 @import '../../marketplace.css';
 
 .root {
+  @apply --backgroundImage;
+
+  display: flex;
+  flex: 1;
+
+  @media (--viewportMedium) {
+    justify-content: center;
+    align-items: flex-start;
+  }
+}
+
+.content {
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
-  flex: 1;
-  justify-content: space-between;
-  height: 100%;
+  padding: 30px 24px 98px 24px;
+  background-color: var(--matterColorLight);
+  border-radius: 2px;
+
+  @media (--viewportMedium) {
+    flex-basis: 480px;
+    flex-grow: 0;
+    min-height: 573px;
+    padding: 60px;
+    margin-top: 7.5vh;
+    margin-bottom: 7.5vh;
+  }
 }
 
 .keysIconRoot {
@@ -21,9 +43,31 @@
   font-weight: bold;
 }
 
+.bottomWrapper {
+  margin-top: auto;
+  @media (--viewportMedium) {
+    margin-top: 67px;
+  }
+}
+
+.bottomWrapper p {
+  line-height: 24px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .emailSubmittedLink {
   @apply --marketplaceH5FontStyles;
   color: var(--matterColor);
+  line-height: 24px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+
+  @media (--viewportMedium) {
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
 }
 
 .emailSubmittedLinkHelp {

src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js

@@ -63,7 +63,7 @@ export const PasswordRecoveryPageComponent = props => {
   );
 
   const emailSubmittedLinks = (
-    <div>
+    <div className={css.bottomWrapper}>
       <p>
         <InlineTextButton
           className={css.emailSubmittedLink}
@@ -101,16 +101,18 @@ export const PasswordRecoveryPageComponent = props => {
         sendVerificationEmailInProgress={sendVerificationEmailInProgress}
         sendVerificationEmailError={sendVerificationEmailError}
       />
-      <div>
-        <KeysIcon />
-        <h1 className={css.title}>{title}</h1>
-        <p>{message}</p>
-        {submittedEmail
-          ? emailSubmittedLinks
-          : <PasswordRecoveryForm
-              onSubmit={values => onSubmitEmail(values.email)}
-              initialValues={{ email: initialEmail }}
-            />}
+      <div className={css.root}>
+        <div className={css.content}>
+          <KeysIcon />
+          <h1 className={css.title}>{title}</h1>
+          <p>{message}</p>
+          {submittedEmail
+            ? emailSubmittedLinks
+            : <PasswordRecoveryForm
+                onSubmit={values => onSubmitEmail(values.email)}
+                initialValues={{ email: initialEmail }}
+              />}
+        </div>
       </div>
 
     </PageLayout>

src/translations/en.json

@@ -228,7 +228,7 @@
   "PasswordRecoveryForm.emailLabel": "Email",
   "PasswordRecoveryForm.emailPlaceholder": "john.doe@example.com",
   "PasswordRecoveryForm.emailRequired": "This field is required",
-  "PasswordRecoveryForm.goToLogin": "Go to log in.",
+  "PasswordRecoveryForm.goToLogin": "{goToLoginHelp} Go to log in.",
   "PasswordRecoveryForm.goToLoginHelp": "Suddenly remembered your password?",
   "PasswordRecoveryForm.sendInstructions": "Send instructions",
   "PasswordRecoveryPage.emailSubmittedTitle": "Check your inbox",