diff options
Diffstat (limited to 'web-ui/src')
5 files changed, 106 insertions, 70 deletions
diff --git a/web-ui/src/backup_account/backup_email/backup_email.js b/web-ui/src/backup_account/backup_email/backup_email.js index 2ef76ecf..05cba35e 100644 --- a/web-ui/src/backup_account/backup_email/backup_email.js +++ b/web-ui/src/backup_account/backup_email/backup_email.js @@ -21,6 +21,7 @@ import SubmitButton from 'src/common/submit_button/submit_button'; import InputField from 'src/common/input_field/input_field'; import validator from 'validator'; +import './backup_email.scss'; export class BackupEmail extends React.Component { @@ -49,7 +50,7 @@ export class BackupEmail extends React.Component { render() { const t = this.props.t; return ( - <div className='container'> + <div className='container backup-email-container'> <img className='backup-account-image' src='/public/images/forgot-my-password.svg' diff --git a/web-ui/src/backup_account/backup_email/backup_email.scss b/web-ui/src/backup_account/backup_email/backup_email.scss new file mode 100644 index 00000000..a98ef8be --- /dev/null +++ b/web-ui/src/backup_account/backup_email/backup_email.scss @@ -0,0 +1,74 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + */ + +@import "~scss/vendor/reset"; +@import "~scss/base/colors"; +@import "~scss/base/fonts"; + + +form { + width: 100%; +} + +.backup-email-container { + width: 84%; + padding: 6% 5%; + display: flex; + align-items: flex-start; + flex-direction: column; +} + +.backup-account-image { + width: 50%; + height: 100%; + align-self: center; +} + +@media only screen and (min-width : 500px) { + form { + display: flex; + flex-direction: column; + + .input-field-group, .submit-button, .link-content { + width: 70%; + align-self: center; + } + } +} + +@media only screen and (min-width : 960px) { + .backup-email-container{ + width: 60%; + padding: 3em; + align-items: flex-start; + flex-direction: row; + } + + form { + margin-left: 2.5em; + min-height: 492px; + + .input-field-group, .submit-button, .link-content { + width: 300px; + align-self: flex-start; + } + } + + .backup-account-image { + width: 300px; + } +} diff --git a/web-ui/src/backup_account/confirmation/confirmation.js b/web-ui/src/backup_account/confirmation/confirmation.js index 324d46ba..851c3d95 100644 --- a/web-ui/src/backup_account/confirmation/confirmation.js +++ b/web-ui/src/backup_account/confirmation/confirmation.js @@ -22,7 +22,7 @@ import SubmitButton from 'src/common/submit_button/submit_button'; import './confirmation.scss'; export const Confirmation = ({ t }) => ( - <div className='confirmation'> + <div className='container confirmation-container'> <h1>{t('backup-account.confirmation.title1')} <br /> {t('backup-account.confirmation.title2')}</h1> <p>{t('backup-account.confirmation.paragraph')}</p> <img src='/public/images/sent-mail.svg' alt='Sent mail' /> diff --git a/web-ui/src/backup_account/confirmation/confirmation.scss b/web-ui/src/backup_account/confirmation/confirmation.scss index 44f3fa8a..da349276 100644 --- a/web-ui/src/backup_account/confirmation/confirmation.scss +++ b/web-ui/src/backup_account/confirmation/confirmation.scss @@ -19,26 +19,35 @@ @import "~scss/base/colors"; @import "~scss/base/fonts"; - - -.confirmation { - background: $white; +.confirmation-container { width: 84%; - margin: 3% auto; padding: 6% 5%; - box-shadow: 0 2px 3px 0 $shadow; + display: flex; + align-items: center; + flex-direction: column; + + img { + padding: 2em 3.2em 2em 0; + } } -@media only screen and (min-width : 500px) { + .submit-button { + width: 65%; + align-self: center; + } +@media only screen and (min-width : 500px) { + .confirmation-container { + width: 50%; + padding: 1em 2em; + } } @media only screen and (min-width : 960px) { - .confirmation{ - width: 60%; - padding: 3em; - align-items: flex-start; - flex-direction: row; - max-width: 700px; + .confirmation-container { + width: 30%; + padding: 1em 2em; + display: flex; + flex-direction: column; } } diff --git a/web-ui/src/backup_account/page.scss b/web-ui/src/backup_account/page.scss index aa973fcd..71e3f074 100644 --- a/web-ui/src/backup_account/page.scss +++ b/web-ui/src/backup_account/page.scss @@ -31,6 +31,12 @@ a { text-decoration: none; } +.container { + background: $white; + margin: 3% auto; + box-shadow: 0 2px 3px 0 $shadow; +} + .page { font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; background: $dark_blue; /* For browsers that do not support gradients */ @@ -48,10 +54,6 @@ section { flex: 1 0 auto; } -form { - width: 100%; -} - h1 { font-size: 1.3em; font-weight: 600; @@ -65,6 +67,7 @@ p { .link { color: $dark_blue; font-style: italic; + font-size: 0.8em; .fa { font-size: 1.6em; @@ -75,59 +78,8 @@ p { } -.container { - background: $white; - width: 84%; - margin: 3% auto; - padding: 6% 5%; - display: flex; - align-items: flex-start; - flex-direction: column; - box-shadow: 0 2px 3px 0 $shadow; -} - -.backup-account-image { - width: 50%; - height: 100%; - align-self: center; -} - @media only screen and (min-width : 500px) { body { font-size: 1.3em; } - - form { - display: flex; - flex-direction: column; - - .input-field-group, .submit-button, .link-content { - width: 70%; - align-self: center; - } - } -} - -@media only screen and (min-width : 960px) { - .container{ - width: 60%; - padding: 3em; - align-items: flex-start; - flex-direction: row; - max-width: 700px; - } - - form { - margin-left: 2.5em; - min-height: 492px; - - .input-field-group, .submit-button, .link-content { - width: 300px; - align-self: flex-start; - } - } - - .backup-account-image { - width: 300px; - } } |