diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css index 2a2f8cbd..cc4d642e 100644 --- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css +++ b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css @@ -13,7 +13,8 @@ margin-bottom: 24px; @media (--viewportMedium) { - margin-top: 30px; + margin-top: 22px; + margin-bottom: 88px; } } diff --git a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js b/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js index a4de3775..6b3c20e2 100644 --- a/src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js +++ b/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 = ( + + + + ); return ( -
+ { />

- - - - {' '} - +

@@ -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, }; diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css index f5b99b34..033bbba9 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css +++ b/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 { diff --git a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js index 93d3bb9b..fda71617 100644 --- a/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js +++ b/src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js @@ -63,7 +63,7 @@ export const PasswordRecoveryPageComponent = props => { ); const emailSubmittedLinks = ( -
+

{ sendVerificationEmailInProgress={sendVerificationEmailInProgress} sendVerificationEmailError={sendVerificationEmailError} /> -

- -

{title}

-

{message}

- {submittedEmail - ? emailSubmittedLinks - : onSubmitEmail(values.email)} - initialValues={{ email: initialEmail }} - />} +
+
+ +

{title}

+

{message}

+ {submittedEmail + ? emailSubmittedLinks + : onSubmitEmail(values.email)} + initialValues={{ email: initialEmail }} + />} +
diff --git a/src/translations/en.json b/src/translations/en.json index cb772acb..113fd52f 100644 --- a/src/translations/en.json +++ b/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",