summaryrefslogtreecommitdiff
path: root/web-ui/src/backup_account/confirmation
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui/src/backup_account/confirmation')
-rw-r--r--web-ui/src/backup_account/confirmation/confirmation.js2
-rw-r--r--web-ui/src/backup_account/confirmation/confirmation.scss35
2 files changed, 23 insertions, 14 deletions
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;
}
}