From 55ca88e588cb88ff1e7814fdf3fffbe5c0e2f072 Mon Sep 17 00:00:00 2001
From: odb366 <klukanov1@gmail.com>
Date: Sat, 16 Jun 2018 16:46:27 +0300
Subject: [PATCH 1/5] fix(onboarding-layout-ui): Reworked spacing and buttons

---
 app/components/Onboarding/FormContainer.js   |  4 ++--
 app/components/Onboarding/FormContainer.scss | 24 ++++++++++++++++----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/app/components/Onboarding/FormContainer.js b/app/components/Onboarding/FormContainer.js
index e0df1517..498e756b 100644
--- a/app/components/Onboarding/FormContainer.js
+++ b/app/components/Onboarding/FormContainer.js
@@ -37,12 +37,12 @@ const FormContainer = ({
       <div className={styles.buttonsContainer}>
         <section>
           {
-            back && <div onClick={back}><FaAngleLeft style={{ verticalAlign: 'top' }} /> Back</div>
+            back && <div onClick={back} className={styles.backButton} ><FaAngleLeft /> Back</div>
           }
         </section>
         <section>
           {
-            next && <div onClick={next}>Next <FaAngleRight style={{ verticalAlign: 'top' }} /></div>
+            next && <div onClick={next} className={styles.nextButton} >Next <FaAngleRight /></div>
           }
         </section>
       </div>
diff --git a/app/components/Onboarding/FormContainer.scss b/app/components/Onboarding/FormContainer.scss
index e5f960db..4ad892f6 100644
--- a/app/components/Onboarding/FormContainer.scss
+++ b/app/components/Onboarding/FormContainer.scss
@@ -22,7 +22,7 @@
 
 .info {
   color: $white;
-  margin: 20px 0 20px 0;
+  margin-bottom: 20px;
   padding: 20px 40px;
 
   h1 {
@@ -41,13 +41,13 @@
   position: relative;
   background: $spaceblue;
   height: 100vh;
-  padding: 60px 40px;
+  padding: 40px 40px;
 }
 
 .footer {
   position: absolute;
   bottom: 0;
-  padding: 20px 40px;
+  padding: 25px 40px;
   color: $white;
   width: calc(100% - 80px);
 
@@ -56,14 +56,30 @@
     flex-direction: row;
     justify-content: space-between;
 
-    div {
+    .nextButton {
       cursor: pointer;
       transition: all 0.25s;
+      background: #31343f;
+      padding: 10px 30px 10px 40px;
+      width: 54px;
+      text-align: center;
 
+      &:hover {
+        background: darken($gold, 5%);
+      }
+    }
+
+    .backButton {
+      cursor: pointer;
+      transition: all 0.25s;
+      padding: 10px 20px 10px 0px;
+      text-align: center;
+      
       &:hover {
         opacity: 0.5;
       }
     }
+    
   }
 }
 

From fcf2700b83da248dcfae8085bc39e46ac2f0c65a Mon Sep 17 00:00:00 2001
From: odb366 <klukanov1@gmail.com>
Date: Sat, 16 Jun 2018 20:08:53 +0300
Subject: [PATCH 2/5] fix(onboarding-layout-ui): Added input borders and
 adjusted spacing

---
 app/components/Onboarding/Alias.scss             |  4 +++-
 app/components/Onboarding/Autopilot.scss         |  3 ++-
 app/components/Onboarding/ConnectionDetails.scss | 14 +++++++++-----
 app/components/Onboarding/ConnectionType.scss    |  2 +-
 app/components/Onboarding/Login.scss             |  8 +++++---
 app/components/Onboarding/NewAezeedPassword.scss |  8 +++++---
 app/components/Onboarding/NewWalletPassword.scss |  8 +++++---
 app/components/Onboarding/Signup.scss            |  2 +-
 8 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/app/components/Onboarding/Alias.scss b/app/components/Onboarding/Alias.scss
index 59d32c8a..d4df42d5 100644
--- a/app/components/Onboarding/Alias.scss
+++ b/app/components/Onboarding/Alias.scss
@@ -3,7 +3,9 @@
 .alias {
   background: transparent;
   outline: none;
-  border: 0;
+  border:1px solid #404040;
+  border-radius: 4px;
+  padding: 15px;
   color: $gold;
   -webkit-text-fill-color: $white;
   font-size: 22px;
diff --git a/app/components/Onboarding/Autopilot.scss b/app/components/Onboarding/Autopilot.scss
index 580bf73e..b90c6e79 100644
--- a/app/components/Onboarding/Autopilot.scss
+++ b/app/components/Onboarding/Autopilot.scss
@@ -4,7 +4,7 @@
   color: $white;
 
   section {
-    margin: 20px 0;
+    margin-bottom: 0;
 
     &.enable {
       &.active {
@@ -44,6 +44,7 @@
       font-weight: 200;
       cursor: pointer;
       transition: all 0.25s;
+      margin-bottom: 20px;
     }
 
     .label {
diff --git a/app/components/Onboarding/ConnectionDetails.scss b/app/components/Onboarding/ConnectionDetails.scss
index e278beb8..d3c7c040 100644
--- a/app/components/Onboarding/ConnectionDetails.scss
+++ b/app/components/Onboarding/ConnectionDetails.scss
@@ -4,22 +4,26 @@
   color: $white;
 
   label {
+    display: block;
     font-size: 12px;
     line-height: 14px;
-    padding: 10px 0px;
+    padding-bottom: 5px;
     min-height: 14px;
   }
 
   input {
     background: transparent;
     outline: none;
-    border: 0;
+    border:1px solid #404040;
+    border-radius: 4px;
+    padding: 10px;
     color: $gold;
     -webkit-text-fill-color: $white;
-    font-size: 22px;
+    font-size: 18px;
     width: 100%;
-    // font-weight: 200;
-    margin-bottom: 25px;
+    font-weight: 400;
+    margin-bottom: 20px;
+    width: 600px;
   }
 
   input::-webkit-input-placeholder {
diff --git a/app/components/Onboarding/ConnectionType.scss b/app/components/Onboarding/ConnectionType.scss
index 5d8f8503..34537492 100644
--- a/app/components/Onboarding/ConnectionType.scss
+++ b/app/components/Onboarding/ConnectionType.scss
@@ -4,7 +4,7 @@
   color: $white;
 
   section {
-    margin: 30px 0;
+    margin: 0;
 
     &.option {
       .button {
diff --git a/app/components/Onboarding/Login.scss b/app/components/Onboarding/Login.scss
index ea052c7f..8a59cc32 100644
--- a/app/components/Onboarding/Login.scss
+++ b/app/components/Onboarding/Login.scss
@@ -7,15 +7,17 @@
 .password {
   background: transparent;
   outline: none;
-  border: 0;
+  border:1px solid #404040;
+  border-radius: 4px;
+  padding: 15px;
   color: $gold;
   -webkit-text-fill-color: $white;
   font-size: 22px;
-  border-bottom: 1px solid transparent;
+  //border-bottom: 1px solid transparent;
   transition: all 0.25s;
 
   &.inputError {
-    border-bottom: 1px solid $red;
+    border: 1px solid $red;
   }
 }
 
diff --git a/app/components/Onboarding/NewAezeedPassword.scss b/app/components/Onboarding/NewAezeedPassword.scss
index 66aa30c5..16e22191 100644
--- a/app/components/Onboarding/NewAezeedPassword.scss
+++ b/app/components/Onboarding/NewAezeedPassword.scss
@@ -1,20 +1,22 @@
 @import '../../variables.scss';
 
 .input:nth-child(2) {
-  margin-top: 40px;
+  margin-top: 30px;
 }
 
 .password {
   background: transparent;
   outline: none;
-  border: 0;
+  border:1px solid #404040;
+  border-radius: 4px;
+  padding: 15px;
   color: $gold;
   -webkit-text-fill-color: $white;
   font-size: 22px;
   transition: all 0.25s;
 
   &.error {
-    border-bottom: 1px solid $red;
+    border: 1px solid $red;
   }
 }
 
diff --git a/app/components/Onboarding/NewWalletPassword.scss b/app/components/Onboarding/NewWalletPassword.scss
index 66aa30c5..16e22191 100644
--- a/app/components/Onboarding/NewWalletPassword.scss
+++ b/app/components/Onboarding/NewWalletPassword.scss
@@ -1,20 +1,22 @@
 @import '../../variables.scss';
 
 .input:nth-child(2) {
-  margin-top: 40px;
+  margin-top: 30px;
 }
 
 .password {
   background: transparent;
   outline: none;
-  border: 0;
+  border:1px solid #404040;
+  border-radius: 4px;
+  padding: 15px;
   color: $gold;
   -webkit-text-fill-color: $white;
   font-size: 22px;
   transition: all 0.25s;
 
   &.error {
-    border-bottom: 1px solid $red;
+    border: 1px solid $red;
   }
 }
 
diff --git a/app/components/Onboarding/Signup.scss b/app/components/Onboarding/Signup.scss
index 27e96f79..877540c3 100644
--- a/app/components/Onboarding/Signup.scss
+++ b/app/components/Onboarding/Signup.scss
@@ -4,7 +4,7 @@
   color: $white;
 
   section {
-    margin: 20px 0;
+    margin-bottom: 20px;
     
     &.enable {
       &.active {

From fd5ab3ab1bc34efa496e47a12870dfe64b79a4c7 Mon Sep 17 00:00:00 2001
From: odb366 <klukanov1@gmail.com>
Date: Sat, 16 Jun 2018 20:08:53 +0300
Subject: [PATCH 3/5] fix(onboarding-layout-ui): Added input borders and
 adjusted spacing

---
 app/components/Onboarding/Alias.scss             |  4 +++-
 app/components/Onboarding/Autopilot.scss         |  3 ++-
 app/components/Onboarding/ConnectionDetails.scss | 14 +++++++++-----
 app/components/Onboarding/ConnectionType.scss    |  2 +-
 app/components/Onboarding/InitWallet.scss        |  4 +++-
 app/components/Onboarding/Login.scss             |  8 +++++---
 app/components/Onboarding/NewAezeedPassword.scss |  8 +++++---
 app/components/Onboarding/NewWalletPassword.scss |  8 +++++---
 app/components/Onboarding/Signup.scss            |  2 +-
 9 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/app/components/Onboarding/Alias.scss b/app/components/Onboarding/Alias.scss
index 59d32c8a..d4df42d5 100644
--- a/app/components/Onboarding/Alias.scss
+++ b/app/components/Onboarding/Alias.scss
@@ -3,7 +3,9 @@
 .alias {
   background: transparent;
   outline: none;
-  border: 0;
+  border:1px solid #404040;
+  border-radius: 4px;
+  padding: 15px;
   color: $gold;
   -webkit-text-fill-color: $white;
   font-size: 22px;
diff --git a/app/components/Onboarding/Autopilot.scss b/app/components/Onboarding/Autopilot.scss
index 580bf73e..b90c6e79 100644
--- a/app/components/Onboarding/Autopilot.scss
+++ b/app/components/Onboarding/Autopilot.scss
@@ -4,7 +4,7 @@
   color: $white;
 
   section {
-    margin: 20px 0;
+    margin-bottom: 0;
 
     &.enable {
       &.active {
@@ -44,6 +44,7 @@
       font-weight: 200;
       cursor: pointer;
       transition: all 0.25s;
+      margin-bottom: 20px;
     }
 
     .label {
diff --git a/app/components/Onboarding/ConnectionDetails.scss b/app/components/Onboarding/ConnectionDetails.scss
index e278beb8..d3c7c040 100644
--- a/app/components/Onboarding/ConnectionDetails.scss
+++ b/app/components/Onboarding/ConnectionDetails.scss
@@ -4,22 +4,26 @@
   color: $white;
 
   label {
+    display: block;
     font-size: 12px;
     line-height: 14px;
-    padding: 10px 0px;
+    padding-bottom: 5px;
     min-height: 14px;
   }
 
   input {
     background: transparent;
     outline: none;
-    border: 0;
+    border:1px solid #404040;
+    border-radius: 4px;
+    padding: 10px;
     color: $gold;
     -webkit-text-fill-color: $white;
-    font-size: 22px;
+    font-size: 18px;
     width: 100%;
-    // font-weight: 200;
-    margin-bottom: 25px;
+    font-weight: 400;
+    margin-bottom: 20px;
+    width: 600px;
   }
 
   input::-webkit-input-placeholder {
diff --git a/app/components/Onboarding/ConnectionType.scss b/app/components/Onboarding/ConnectionType.scss
index 5d8f8503..34537492 100644
--- a/app/components/Onboarding/ConnectionType.scss
+++ b/app/components/Onboarding/ConnectionType.scss
@@ -4,7 +4,7 @@
   color: $white;
 
   section {
-    margin: 30px 0;
+    margin: 0;
 
     &.option {
       .button {
diff --git a/app/components/Onboarding/InitWallet.scss b/app/components/Onboarding/InitWallet.scss
index 8eeb04e4..de6b5e25 100644
--- a/app/components/Onboarding/InitWallet.scss
+++ b/app/components/Onboarding/InitWallet.scss
@@ -7,7 +7,9 @@
 .password {
   background: transparent;
   outline: none;
-  border: 0;
+  border:1px solid #404040;
+  border-radius: 4px;
+  padding: 15px;
   color: $gold;
   -webkit-text-fill-color: $white;
   font-size: 22px;
diff --git a/app/components/Onboarding/Login.scss b/app/components/Onboarding/Login.scss
index ea052c7f..8a59cc32 100644
--- a/app/components/Onboarding/Login.scss
+++ b/app/components/Onboarding/Login.scss
@@ -7,15 +7,17 @@
 .password {
   background: transparent;
   outline: none;
-  border: 0;
+  border:1px solid #404040;
+  border-radius: 4px;
+  padding: 15px;
   color: $gold;
   -webkit-text-fill-color: $white;
   font-size: 22px;
-  border-bottom: 1px solid transparent;
+  //border-bottom: 1px solid transparent;
   transition: all 0.25s;
 
   &.inputError {
-    border-bottom: 1px solid $red;
+    border: 1px solid $red;
   }
 }
 
diff --git a/app/components/Onboarding/NewAezeedPassword.scss b/app/components/Onboarding/NewAezeedPassword.scss
index 66aa30c5..16e22191 100644
--- a/app/components/Onboarding/NewAezeedPassword.scss
+++ b/app/components/Onboarding/NewAezeedPassword.scss
@@ -1,20 +1,22 @@
 @import '../../variables.scss';
 
 .input:nth-child(2) {
-  margin-top: 40px;
+  margin-top: 30px;
 }
 
 .password {
   background: transparent;
   outline: none;
-  border: 0;
+  border:1px solid #404040;
+  border-radius: 4px;
+  padding: 15px;
   color: $gold;
   -webkit-text-fill-color: $white;
   font-size: 22px;
   transition: all 0.25s;
 
   &.error {
-    border-bottom: 1px solid $red;
+    border: 1px solid $red;
   }
 }
 
diff --git a/app/components/Onboarding/NewWalletPassword.scss b/app/components/Onboarding/NewWalletPassword.scss
index 66aa30c5..16e22191 100644
--- a/app/components/Onboarding/NewWalletPassword.scss
+++ b/app/components/Onboarding/NewWalletPassword.scss
@@ -1,20 +1,22 @@
 @import '../../variables.scss';
 
 .input:nth-child(2) {
-  margin-top: 40px;
+  margin-top: 30px;
 }
 
 .password {
   background: transparent;
   outline: none;
-  border: 0;
+  border:1px solid #404040;
+  border-radius: 4px;
+  padding: 15px;
   color: $gold;
   -webkit-text-fill-color: $white;
   font-size: 22px;
   transition: all 0.25s;
 
   &.error {
-    border-bottom: 1px solid $red;
+    border: 1px solid $red;
   }
 }
 
diff --git a/app/components/Onboarding/Signup.scss b/app/components/Onboarding/Signup.scss
index 27e96f79..877540c3 100644
--- a/app/components/Onboarding/Signup.scss
+++ b/app/components/Onboarding/Signup.scss
@@ -4,7 +4,7 @@
   color: $white;
 
   section {
-    margin: 20px 0;
+    margin-bottom: 20px;
     
     &.enable {
       &.active {

From c4e6345c50110044c42a7513b268d599e02a2eef Mon Sep 17 00:00:00 2001
From: odb366 <klukanov1@gmail.com>
Date: Wed, 20 Jun 2018 23:01:54 +0300
Subject: [PATCH 4/5] fix(onboarding-layout-ui): button color changed, and
 conflict resolved

---
 app/components/Onboarding/FormContainer.js   | 16 ++++++++++------
 app/components/Onboarding/FormContainer.scss |  4 ++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/components/Onboarding/FormContainer.js b/app/components/Onboarding/FormContainer.js
index 498e756b..73a94c62 100644
--- a/app/components/Onboarding/FormContainer.js
+++ b/app/components/Onboarding/FormContainer.js
@@ -36,14 +36,18 @@ const FormContainer = ({
     <footer className={styles.footer}>
       <div className={styles.buttonsContainer}>
         <section>
-          {
-            back && <div onClick={back} className={styles.backButton} ><FaAngleLeft /> Back</div>
-          }
+        {back && (
+            <div onClick={back} className={styles.backButton} >
+              <FaAngleLeft style={{ verticalAlign: 'top' }} /> Back
+            </div>
+          )}
         </section>
         <section>
-          {
-            next && <div onClick={next} className={styles.nextButton} >Next <FaAngleRight /></div>
-          }
+          {next && (
+            <div onClick={next} className={styles.nextButton} >
+              Next <FaAngleRight style={{ verticalAlign: 'top' }} />
+            </div>
+          )}
         </section>
       </div>
     </footer>
diff --git a/app/components/Onboarding/FormContainer.scss b/app/components/Onboarding/FormContainer.scss
index 4ad892f6..97f1e52b 100644
--- a/app/components/Onboarding/FormContainer.scss
+++ b/app/components/Onboarding/FormContainer.scss
@@ -59,13 +59,13 @@
     .nextButton {
       cursor: pointer;
       transition: all 0.25s;
-      background: #31343f;
+      background: $darkspaceblue;
       padding: 10px 30px 10px 40px;
       width: 54px;
       text-align: center;
 
       &:hover {
-        background: darken($gold, 5%);
+        background: lighten($darkspaceblue, 10%);
       }
     }
 

From 508ddf670b70ecf1be92727b7eb8d1e80e18a26f Mon Sep 17 00:00:00 2001
From: odb366 <klukanov1@gmail.com>
Date: Thu, 21 Jun 2018 00:55:53 +0300
Subject: [PATCH 5/5] fix(onboarding-layout-ui): fixed lint errors

---
 app/components/Onboarding/FormContainer.js | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/app/components/Onboarding/FormContainer.js b/app/components/Onboarding/FormContainer.js
index 73a94c62..7dc1a216 100644
--- a/app/components/Onboarding/FormContainer.js
+++ b/app/components/Onboarding/FormContainer.js
@@ -7,13 +7,7 @@ import { FaAngleLeft, FaAngleRight } from 'react-icons/lib/fa'
 import zapLogo from 'icons/zap_logo.svg'
 import styles from './FormContainer.scss'
 
-const FormContainer = ({
-  title,
-  description,
-  back,
-  next,
-  children
-}) => (
+const FormContainer = ({ title, description, back, next, children }) => (
   <div className={styles.container}>
     <div className={styles.titleBar} />
 
@@ -29,22 +23,20 @@ const FormContainer = ({
       <p>{description}</p>
     </div>
 
-    <div className={styles.content}>
-      {children}
-    </div>
+    <div className={styles.content}>{children}</div>
 
     <footer className={styles.footer}>
       <div className={styles.buttonsContainer}>
         <section>
-        {back && (
-            <div onClick={back} className={styles.backButton} >
+          {back && (
+            <div onClick={back} className={styles.backButton}>
               <FaAngleLeft style={{ verticalAlign: 'top' }} /> Back
             </div>
           )}
         </section>
         <section>
           {next && (
-            <div onClick={next} className={styles.nextButton} >
+            <div onClick={next} className={styles.nextButton}>
               Next <FaAngleRight style={{ verticalAlign: 'top' }} />
             </div>
           )}
@@ -54,7 +46,6 @@ const FormContainer = ({
   </div>
 )
 
-
 FormContainer.propTypes = {
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,