From 971112d413fd30ee1607a0516c1b030976067db8 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Wed, 31 Jan 2018 18:11:13 -0330
Subject: [NewUI] Updates capitalization and alignment for the import account
 screen. (#3122)

* Updates capitalization and alignment for the import account screen.

* Align elements in import form.
---
 ui/app/accounts/import/index.js              |  2 +-
 ui/app/accounts/import/private-key.js        | 19 ++++++++++++-------
 ui/app/css/itcss/components/new-account.scss | 25 ++++++++++++++++++++++---
 3 files changed, 35 insertions(+), 11 deletions(-)

(limited to 'ui/app')

diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
index 0c901c09b..71eb9ae23 100644
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@@ -37,7 +37,7 @@ AccountImportSubview.prototype.render = function () {
 
       h('div.new-account-import-form__select-section', [
 
-        h('div.new-account-import-form__select-label', 'SELECT TYPE'),
+        h('div.new-account-import-form__select-label', 'Select Type'),
 
         h(Select, {
           className: 'new-account-import-form__select',
diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js
index 43afbca87..12f3a6430 100644
--- a/ui/app/accounts/import/private-key.js
+++ b/ui/app/accounts/import/private-key.js
@@ -32,15 +32,20 @@ PrivateKeyImportView.prototype.render = function () {
 
   return (
     h('div.new-account-import-form__private-key', [
-      h('span.new-account-create-form__instruction', 'Paste your private key string here:'),
 
-      h('input.new-account-import-form__input-password', {
-        type: 'password',
-        id: 'private-key-box',
-        onKeyPress: () => this.createKeyringOnEnter(),
-      }),
+      h('div.new-account-import-form__private-key-password-container', [
 
-      h('div.new-account-create-form__buttons', {}, [
+        h('span.new-account-import-form__instruction', 'Paste your private key string here:'),
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          id: 'private-key-box',
+          onKeyPress: () => this.createKeyringOnEnter(),
+        }),
+
+      ]),
+
+      h('div.new-account-import-form__buttons', {}, [
 
         h('button.new-account-create-form__button-cancel', {
           onClick: () => goHome(),
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index c5e4ea761..81f919df3 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -55,11 +55,17 @@
 }
 
 .new-account-import-form {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding: 0 30px;
+
   &__select-section {
     display: flex;
-    justify-content: space-evenly;
+    justify-content: space-between;
     align-items: center;
     margin-top: 29px;
+    width: 100%;
   }
 
   &__select-label {
@@ -91,19 +97,25 @@
     }
   }
 
+  &__private-key-password-container {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    width: 100%;
+  }
+
   &__instruction {
     color: $scorpion;
     font-family: Roboto;
     font-size: 16px;
     line-height: 21px;
     align-self: flex-start;
-    margin-left: 30px;
   }
 
   &__private-key {
     display: flex;
     flex-flow: column;
-    align-items: center;
+    align-items: flex-start;
     margin-top: 34px;
   }
 
@@ -126,6 +138,13 @@
     align-items: center;
     margin-top: 29px;
   }
+
+  &__buttons {
+    margin-top: 39px;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }
 
 .new-account-create-form {
-- 
cgit