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/FormContainer.js b/app/components/Onboarding/FormContainer.js index 8dc6e583..7dc1a216 100644 --- a/app/components/Onboarding/FormContainer.js +++ b/app/components/Onboarding/FormContainer.js @@ -29,14 +29,14 @@ const FormContainer = ({ title, description, back, next, children }) => (
{back && ( -
+
Back
)}
{next && ( -
+
Next
)} diff --git a/app/components/Onboarding/FormContainer.scss b/app/components/Onboarding/FormContainer.scss index e5f960db..97f1e52b 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: $darkspaceblue; + padding: 10px 30px 10px 40px; + width: 54px; + text-align: center; + &:hover { + background: lighten($darkspaceblue, 10%); + } + } + + .backButton { + cursor: pointer; + transition: all 0.25s; + padding: 10px 20px 10px 0px; + text-align: center; + &:hover { opacity: 0.5; } } + } } 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 {