[#932] Adds images in account recovery flow

4 files changed, 31 insertions, 3 deletions

diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
index 75cf6ea5..e4d335bb 100644
--- a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js
@@ -24,13 +24,17 @@ import SubmitButton from 'src/common/submit_button/submit_button';
 import './forms.scss';
 
 export const AdminRecoveryCodeForm = ({ t, next }) => (
-  <form className='admin-code-form' onSubmit={next}>
+  <form className='account-recovery-form admin-code' onSubmit={next}>
     <img
       className='account-recovery-progress'
       src='/public/images/account-recovery/step_1.svg'
       alt={t('account-recovery.admin-form.image-description')}
     />
     <h1>{t('account-recovery.admin-form.title')}</h1>
+    <img
+      src='/public/images/account-recovery/admins_contact.svg'
+      alt=''
+    />
     <ul>
       <li>{t('account-recovery.admin-form.tip1')}</li>
       <li>{t('account-recovery.admin-form.tip2')}</li>
diff --git a/web-ui/src/account_recovery/forms/forms.scss b/web-ui/src/account_recovery/forms/forms.scss
index 1ef0e8d3..73d971b2 100644
--- a/web-ui/src/account_recovery/forms/forms.scss
+++ b/web-ui/src/account_recovery/forms/forms.scss
@@ -18,3 +18,23 @@
 .account-recovery-progress {
   width: 100%;
 }
+
+.account-recovery-form {
+  display: flex;
+  flex-direction: column;
+
+  img {
+    margin: 7px 0;
+    align-self: center;
+  }
+
+  .input-field-group {
+    margin-top: 0;
+  }
+}
+
+.new-password {
+  .input-field-group:first-of-type {
+    margin-bottom: 0;
+  }
+}
diff --git a/web-ui/src/account_recovery/forms/new_password_form.js b/web-ui/src/account_recovery/forms/new_password_form.js
index ccc66326..114366b3 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.js
+++ b/web-ui/src/account_recovery/forms/new_password_form.js
@@ -23,7 +23,7 @@ import SubmitButton from 'src/common/submit_button/submit_button';
 import BackLink from 'src/common/back_link/back_link';
 
 export const NewPasswordForm = ({ t, previous }) => (
-  <form>
+  <form className='account-recovery-form new-password'>
     <img
       className='account-recovery-progress'
       src='/public/images/account-recovery/step_3.svg'
diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
index 008fa64f..0438b002 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
@@ -25,13 +25,17 @@ import BackLink from 'src/common/back_link/back_link';
 import './forms.scss';
 
 export const UserRecoveryCodeForm = ({ t, previous, next }) => (
-  <form className='user-code-form' onSubmit={next}>
+  <form className='account-recovery-form user-code' onSubmit={next}>
     <img
       className='account-recovery-progress'
       src='/public/images/account-recovery/step_2.svg'
       alt={t('account-recovery.user-form.image-description')}
     />
     <h1>{t('account-recovery.user-form.title')}</h1>
+    <img
+      src='/public/images/account-recovery/codes.svg'
+      alt=''
+    />
     <p>{t('account-recovery.user-form.description')}</p>
     <InputField name='admin-code' label={t('account-recovery.user-form.input-label')} />
     <SubmitButton buttonText={t('account-recovery.user-form.button')} />