[#922] Extract input field to a component

with @anikarni

2 files changed, 5 insertions, 56 deletions

diff --git a/web-ui/src/account_recovery/page.js b/web-ui/src/account_recovery/page.js
index 90a1faa4..d1bcb464 100644
--- a/web-ui/src/account_recovery/page.js
+++ b/web-ui/src/account_recovery/page.js
@@ -17,7 +17,8 @@
 
 import React from 'react'
 import { translate } from 'react-i18next'
-import SubmitButton from 'src/common/submit_button'
+import SubmitButton from 'src/common/submit_button/submit_button'
+import InputField from 'src/common/input_field/input_field'
 
 import './page.scss'
 
@@ -28,10 +29,7 @@ export const Page = ({ t }) => (
       <h1>{t('backup-account.title')}</h1>
       <p>{t('backup-account.paragraph1')}</p>
       <p>{t('backup-account.paragraph2')}</p>
-      <div className="field-group">
-        <input type="text" name="email" className="email" required />
-        <label className="animated-label" htmlFor="email">{t('backup-account.input-label')}</label>
-      </div>
+      <InputField name='email' label={t('backup-account.input-label')} />
       <SubmitButton buttonText={t('backup-account.button')} />
       <div>
         <a href="/">
diff --git a/web-ui/src/account_recovery/page.scss b/web-ui/src/account_recovery/page.scss
index 2ddb366c..c23fe569 100644
--- a/web-ui/src/account_recovery/page.scss
+++ b/web-ui/src/account_recovery/page.scss
@@ -60,50 +60,6 @@ a {
 
 }
 
-.field-group {
-  position:relative;
-  margin: 1.5em 0;
-  width: 100%;
-
-  label {
-    font-size: 0.9em;
-    margin-bottom: 10px;
-    display: inline-block;
-  }
-
-  input {
-    display: block;
-    border: none;
-    border-bottom: solid 1px #4da3b6;
-    width: 100%;
-    height: auto;
-    padding: 0.3em 0px;
-  }
-
-  input:focus {
-    outline:none;
-    border-width: 2px;
-  }
-
-  input:focus ~ .animated-label, input:valid ~ .animated-label {
-    top:-12px;
-    left: 0;
-    font-size:0.7em;
-    color:#4da3b6;
-  }
-
-  .animated-label {
-    color:#999;
-    position:absolute;
-    pointer-events:none;
-    left: 6px;
-    top:10px;
-    transition:0.2s ease all;
-    -moz-transition:0.2s ease all;
-    -webkit-transition:0.2s ease all;
-  }
-}
-
 .container {
   background: $white;
   width: 84%;
@@ -135,7 +91,7 @@ img {
     -webkit-flex-direction: column;
     flex-direction: column;
 
-    .field-group, div {
+    div {
       flex-basis: 70%;
       -webkit-align-self: center;
       align-self: center;
@@ -157,16 +113,11 @@ img {
   form {
     margin-left: 2.5em;
 
-    .field-group, div {
+    div {
       width: 300px;
       -webkit-align-self: flex-start;
       align-self: flex-start;
     }
-
-    .field-group {
-      margin-top: 3em;
-      font-size: 1em;
-    }
   }
 
   img {