From 9af33194195b64b4badef3c443794627f104b664 Mon Sep 17 00:00:00 2001
From: Anike Arni <aarni@thoughtworks.com>
Date: Tue, 28 Mar 2017 16:36:18 -0300
Subject: [#932] Adapts forms to tablet

---
 .../account_recovery/forms/admin_recovery_code_form.js |  1 +
 web-ui/src/account_recovery/forms/forms.scss           | 18 ++++++++++++++++++
 .../account_recovery/forms/user_recovery_code_form.js  |  1 +
 3 files changed, 20 insertions(+)

(limited to 'web-ui/src/account_recovery')

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 e4d335bb..3d97b191 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
@@ -32,6 +32,7 @@ export const AdminRecoveryCodeForm = ({ t, next }) => (
     />
     <h1>{t('account-recovery.admin-form.title')}</h1>
     <img
+      className='admin-codes-image'
       src='/public/images/account-recovery/admins_contact.svg'
       alt=''
     />
diff --git a/web-ui/src/account_recovery/forms/forms.scss b/web-ui/src/account_recovery/forms/forms.scss
index 73d971b2..70885daf 100644
--- a/web-ui/src/account_recovery/forms/forms.scss
+++ b/web-ui/src/account_recovery/forms/forms.scss
@@ -19,6 +19,14 @@
   width: 100%;
 }
 
+.admin-codes-image {
+  height: 2.7em;
+}
+
+.user-codes-image {
+  height: 4em;
+}
+
 .account-recovery-form {
   display: flex;
   flex-direction: column;
@@ -38,3 +46,13 @@
     margin-bottom: 0;
   }
 }
+
+@media only screen and (min-width : 500px) {
+  .account-recovery-form {
+    align-items: center;
+
+    p {
+      width: 70%;
+    }
+  }
+}
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 0438b002..3927aef0 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
@@ -33,6 +33,7 @@ export const UserRecoveryCodeForm = ({ t, previous, next }) => (
     />
     <h1>{t('account-recovery.user-form.title')}</h1>
     <img
+      className='user-codes-image'
       src='/public/images/account-recovery/codes.svg'
       alt=''
     />
-- 
cgit v1.2.3