[#971] Add css style for the confirmation page

with @tuliocasagrande

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;
   }
 }