Fix baseline

src/containers/PasswordRecoveryForm/PasswordRecoveryForm.css

@@ -1,27 +1,38 @@
 @import '../../marketplace.css';
 
 .root {
-  display: flex;
+display: flex;
   flex-direction: column;
   flex: 1;
   justify-content: space-between;
   height: 100%;
+  min-height: 306px;
 }
 
 .email {
-  margin-top: 24px;
-  margin-bottom: 24px;
+  margin-top: 37px;
 
   @media (--viewportMedium) {
-    margin-top: 22px;
-    margin-bottom: 88px;
+    margin-top: 38px;
   }
 }
 
 .bottomWrapper {
-  @apply --marketplaceH5FontStyles;
   margin-top: auto;
+}
+
+.bottomText {
+  @apply --marketplaceH5FontStyles;
   color: var(--matterColorAnti);
+  margin: 0;
+
+  @media (--viewportMedium) {
+    margin: 0;
+  }
+}
+
+.submitButton {
+  margin-top: 26px;
 }
 
 .loginLink {

src/containers/PasswordRecoveryForm/PasswordRecoveryForm.js

@@ -61,12 +61,15 @@ const PasswordRecoveryFormComponent = props => {
         validate={emailRequired}
         customErrorText={customErrorText}
       />
-      <p className={css.bottomWrapper}>
-        <FormattedMessage id="PasswordRecoveryForm.loginLinkInfo" values={{ loginLink }} />
-      </p>
-      <PrimaryButton type="submit" disabled={buttonDisabled}>
-        <FormattedMessage id="PasswordRecoveryForm.sendInstructions" />
-      </PrimaryButton>
+
+      <div className={css.bottomWrapper}>
+        <p className={css.bottomText}>
+          <FormattedMessage id="PasswordRecoveryForm.loginLinkInfo" values={{ loginLink }} />
+        </p>
+        <PrimaryButton className={css.submitButton} type="submit" disabled={buttonDisabled}>
+          <FormattedMessage id="PasswordRecoveryForm.sendInstructions" />
+        </PrimaryButton>
+      </div>
     </form>
   );
 };

src/containers/PasswordRecoveryPage/PasswordRecoveryPage.css

@@ -1,5 +1,24 @@
 @import '../../marketplace.css';
 
+:root {
+  --baseContent: {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 32px 24px 98px 24px;
+    background-color: var(--matterColorLight);
+    border-radius: 2px;
+
+    @media (--viewportMedium) {
+      flex-basis: 480px;
+      flex-grow: 0;
+      padding: 55px;
+      margin-top: 7.5vh;
+      margin-bottom: 7.5vh;
+    }
+  }
+}
+
 .root {
   @apply --backgroundImage;
 
@@ -12,24 +31,34 @@
   }
 }
 
-.content {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 30px 24px 98px 24px;
-  background-color: var(--matterColorLight);
-  border-radius: 2px;
+.submitEmailContent {
+  @apply --baseContent;
+}
+
+.emailSubmittedContent {
+  @apply --baseContent;
+  padding-bottom: 99px;
 
   @media (--viewportMedium) {
-    flex-basis: 480px;
-    flex-grow: 0;
-    min-height: 573px;
-    padding: 60px;
-    margin-top: 7.5vh;
-    margin-bottom: 7.5vh;
+    padding-bottom: 62px;
+    min-height: 508px;
   }
 }
 
+.emailNotVerifiedContent {
+  @apply --baseContent;
+  padding-top: 30px;
+
+  @media (--viewportMedium) {
+    padding-top: 53px;
+    padding-bottom: 80px;
+  }
+}
+
+.genericErrorContent {
+  @apply --baseContent;
+}
+
 .keysIconRoot {
   width: 100%;
   height: 100%;
@@ -37,17 +66,38 @@
 
 .title {
   @apply --marketplaceModalTitle;
+  margin-top: 31px;
+  margin-bottom: 0px;
+}
+
+.message {
+  margin-top: 23px;
+  margin-bottom: 0px;
+
+  @media (--viewportMedium) {
+    margin-top: 24px;
+    margin-bottom: 0px;
+  }
 }
 
 .submittedEmail {
   font-weight: bold;
 }
 
-.bottomWrapper {
-  margin-top: 67px;
+.emailNotVerifiedBottomText {
+  margin-top: 30px;
+  margin-bottom: 0px;
+
+  @media (--viewportMedium) {
+    margin-top: 32px;
+  }
 }
 
-.bottomText {
+.bottomWrapper {
+  margin-top: auto;
+}
+
+.bottomInfo {
   @apply --marketplaceH5FontStyles;
   margin: 0;
   color: var(--matterColorAnti);

src/containers/PasswordRecoveryPage/PasswordRecoveryPage.js

@@ -59,12 +59,14 @@ export const PasswordRecoveryPageComponent = props => {
   );
 
   const submitEmailContent = (
-    <div className={css.content}>
+    <div className={css.submitEmailContent}>
       <KeysIcon />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.forgotPasswordTitle" />
       </h1>
-      <p><FormattedMessage id="PasswordRecoveryPage.forgotPasswordMessage" /></p>
+      <p className={css.message}>
+        <FormattedMessage id="PasswordRecoveryPage.forgotPasswordMessage" />
+      </p>
       <PasswordRecoveryForm
         onChange={onChange}
         onSubmit={values => onSubmitEmail(values.email)}
@@ -77,20 +79,21 @@ export const PasswordRecoveryPageComponent = props => {
   const submittedEmailText = passwordRequested
     ? <span className={css.submittedEmail}>{initialEmail}</span>
     : <span className={css.submittedEmail}>{submittedEmail}</span>;
+
   const emailSubmittedContent = (
-    <div className={css.content}>
+    <div className={css.emailSubmittedContent}>
       <KeysIcon />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.emailSubmittedTitle" />
       </h1>
-      <p>
+      <p className={css.message}>
         <FormattedMessage
           id="PasswordRecoveryPage.emailSubmittedMessage"
           values={{ submittedEmailText }}
         />
       </p>
       <div className={css.bottomWrapper}>
-        <p className={css.bottomText}>
+        <p className={css.bottomInfo}>
           {recoveryInProgress
             ? <FormattedMessage id="PasswordRecoveryPage.resendingEmailInfo" />
             : <FormattedMessage
@@ -98,7 +101,7 @@ export const PasswordRecoveryPageComponent = props => {
                 values={{ resendEmailLink }}
               />}
         </p>
-        <p className={css.bottomText}>
+        <p className={css.bottomInfo}>
           <FormattedMessage id="PasswordRecoveryPage.fixEmailInfo" values={{ fixEmailLink }} />
         </p>
       </div>
@@ -107,25 +110,25 @@ export const PasswordRecoveryPageComponent = props => {
 
   const initialEmailText = <span className={css.submittedEmail}>{initialEmail}</span>;
   const emailNotVerifiedContent = (
-    <div className={css.content}>
+    <div className={css.emailNotVerifiedContent}>
       <DoorIcon />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedTitle" />
       </h1>
-      <p>
+      <p className={css.message}>
         <FormattedMessage
           id="PasswordRecoveryPage.emailNotVerifiedMessage"
           values={{ initialEmailText }}
         />
       </p>
-      <p>
+      <p className={css.emailNotVerifiedBottomText}>
         <FormattedMessage id="PasswordRecoveryPage.emailNotVerifiedContactAdmin" />
       </p>
     </div>
   );
 
   const genericErrorContent = (
-    <div className={css.content}>
+    <div className={css.genericErrorContent}>
       <KeysIcon />
       <h1 className={css.title}>
         <FormattedMessage id="PasswordRecoveryPage.actionFailedTitle" />

src/translations/en.json

@@ -242,7 +242,7 @@
   "PasswordRecoveryPage.fixEmailLinkText": "Fix it.",
   "PasswordRecoveryPage.fixEmailInfo": "Whoops, typo in your email? {fixEmailLink}",
   "PasswordRecoveryPage.forgotPasswordTitle": "Forgot your password?",
-  "PasswordRecoveryPage.forgotPasswordMessage": "No worries! Please enter the email address you used when signing up and we'll send you instructions on how to create a new password.",
+  "PasswordRecoveryPage.forgotPasswordMessage": "No worries! Please enter the email address you used when signing up and we'll send you instructions on how to set a new password.",
   "PasswordRecoveryPage.resendEmailLinkText": "Send another email.",
   "PasswordRecoveryPage.resendEmailInfo": "Didn't get the email? {resendEmailLink}",
   "PasswordRecoveryPage.resendingEmailInfo": "Resending instructions...",