diff options
author | Tayane Fernandes <tayane.rmf@gmail.com> | 2017-02-07 18:09:20 -0200 |
---|---|---|
committer | Tayane Fernandes <tayane.rmf@gmail.com> | 2017-02-07 18:09:20 -0200 |
commit | a47f32a7b0728c402787ebe914a0953638734820 (patch) | |
tree | d3d33d6afd08367071a55e6c7c0cfe8d22ff44f3 /web-ui/src/account_recovery | |
parent | 1204842f3eb792b6f12445edf1a79532493a3d55 (diff) |
[#922] Extract the submit button to a component
with @anikarni
Diffstat (limited to 'web-ui/src/account_recovery')
-rw-r--r-- | web-ui/src/account_recovery/page.js | 7 | ||||
-rw-r--r-- | web-ui/src/account_recovery/page.scss | 24 |
2 files changed, 7 insertions, 24 deletions
diff --git a/web-ui/src/account_recovery/page.js b/web-ui/src/account_recovery/page.js index 79eca8a7..90a1faa4 100644 --- a/web-ui/src/account_recovery/page.js +++ b/web-ui/src/account_recovery/page.js @@ -17,21 +17,22 @@ import React from 'react' import { translate } from 'react-i18next' +import SubmitButton from 'src/common/submit_button' import './page.scss' export const Page = ({ t }) => ( <div className='container'> - <img src='assets/images/forgot-my-password.svg' alt={t('backup-account.image-description')}/> + <img src='assets/images/forgot-my-password.svg' alt={t('backup-account.image-description')} /> <form> <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/> + <input type="text" name="email" className="email" required /> <label className="animated-label" htmlFor="email">{t('backup-account.input-label')}</label> </div> - <button>{t('backup-account.button')}</button> + <SubmitButton buttonText={t('backup-account.button')} /> <div> <a href="/"> <i className="fa fa-angle-left" aria-hidden="true"></i> diff --git a/web-ui/src/account_recovery/page.scss b/web-ui/src/account_recovery/page.scss index 6cd8c5aa..2ddb366c 100644 --- a/web-ui/src/account_recovery/page.scss +++ b/web-ui/src/account_recovery/page.scss @@ -104,23 +104,10 @@ a { } } - -button { - background: $dark_blue; - padding: 0.8em; - color: $white; - text-align: center; - border: none; - border-radius: 2px; - font-weight: 300; - width: 100%; - margin-bottom: 1em; -} - .container { background: $white; width: 84%; - // margin: 3% auto; + margin: 3% auto; padding: 6% 5%; -webkit-display: flex; @@ -148,7 +135,7 @@ img { -webkit-flex-direction: column; flex-direction: column; - .field-group, button, div { + .field-group, div { flex-basis: 70%; -webkit-align-self: center; align-self: center; @@ -170,7 +157,7 @@ img { form { margin-left: 2.5em; - .field-group, button, div { + .field-group, div { width: 300px; -webkit-align-self: flex-start; align-self: flex-start; @@ -185,9 +172,4 @@ img { img { width: 300px; } - - button { - font-size: 0.8em; - margin-bottom: 1em; - } } |