From d8fe7438d8c85c0115ddc520fe9ef117e305a6c2 Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Wed, 15 Mar 2017 16:56:11 -0300 Subject: [#971] Add css style for the confirmation page with @tuliocasagrande --- .../backup_account/backup_email/backup_email.js | 3 +- .../backup_account/backup_email/backup_email.scss | 74 ++++++++++++++++++++++ .../backup_account/confirmation/confirmation.js | 2 +- .../backup_account/confirmation/confirmation.scss | 35 ++++++---- web-ui/src/backup_account/page.scss | 62 ++---------------- 5 files changed, 106 insertions(+), 70 deletions(-) create mode 100644 web-ui/src/backup_account/backup_email/backup_email.scss (limited to 'web-ui/src') 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 ( -
+
. + */ + +@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 }) => ( -
+

{t('backup-account.confirmation.title1')}
{t('backup-account.confirmation.title2')}

{t('backup-account.confirmation.paragraph')}

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; - } } -- cgit v1.2.3