[#971] Add css style for the confirmation page

with @tuliocasagrande

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