Merge branch 'NewUI-flat' into MM-57-use-gas-estimator

ui/app/components/modals/export-private-key-modal.js

@@ -37,5 +37,27 @@ ExportPrivateKeyModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
       
+      h('span.modal-body-title', 'Download Private Keys'),
+
+      h('div.private-key-password', {}, [
+        h('span.private-key-password-label', 'Type Your Password'),
+
+        h('input.private-key-password-input', {
+          type: 'password',
+          placeholder: 'Type password',
+        }),
+      ]),
+
+      h('div.private-key-password-warning', `Warning: Never disclose this key.
+        Anyone with your private keys can take steal any assets held in your
+        account.`
+      ),
+
+      h('div.export-private-key-buttons', {}, [
+        h('button.btn-clear.btn-cancel', {}, 'Cancel'),
+
+        h('button.btn-clear', 'Download'),
+      ]),
+      
   ])
 }

ui/app/components/send-token/index.js

@@ -240,7 +240,10 @@ SendTokenScreen.prototype.renderToAddressInput = function () {
         this.setErrorsFor('to')
         this.estimateGasAndPrice()
       },
-      onFocus: () => this.clearErrorsFor('to'),
+      onFocus: event => {
+        if (to) event.target.select()
+        this.clearErrorsFor('to')
+      },
     }),
     h('datalist#addresses', [
       // Corresponds to the addresses owned.

ui/app/css/itcss/components/modal.scss

@@ -265,6 +265,75 @@
   background-color: $alto;
 }
 
+// Export Private Key Modal
+
+.account-modal-container .account-name {
+  margin-top: 9px;
+  font-size: 20px;
+}
+
+.account-modal-container .modal-body-title {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-size: 18px;
+}
+
+.private-key-password {
+  display: flex;
+  flex-direction: column;
+}
+
+.private-key-password-label {
+  color: $scorpion;
+  font-size: 14px;
+  line-height: 18px;
+  margin-bottom: 10px;
+}
+
+.private-key-password-input {
+  padding: 10px 0 13px 17px;
+  font-size: 16px;
+  line-height: 21px;
+  width: 291px;
+  height: 44px;
+}
+
+.private-key-password::-webkit-input-placeholder {
+  color: $dusty-gray;
+  font-family: 'Montserrat UltraLight';
+}
+
+.private-key-password-warning {
+  border-radius: 8px;
+  background-color: #FFF6F6;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 15px;
+  color: $crimson;
+  width: 292px;
+  padding: 9px 15px;
+  margin-top: 18px;
+  font-family: 'Montserrat Regular';
+}
+
+.export-private-key-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  .btn-clear {
+    width: 141px;
+    height: 54px;
+  }
+
+  .btn-cancel {
+    margin-right: 15px;
+    border-color: $dusty-gray;
+    color: $scorpion;
+  }
+}
+
+
 // New Account Modal
 .new-account-modal-wrapper {
   display: flex;

ui/app/css/itcss/components/sections.scss

@@ -446,7 +446,7 @@ textarea.twelve-word-phrase {
   color: $white;
 }
 
-.qr-ellip-address {
+.qr-ellip-address, .ellip-address {
   overflow: hidden;
   text-overflow: ellipsis;
 }

ui/app/send.js

@@ -130,7 +130,10 @@ SendTransactionScreen.prototype.renderFromInput = function (from, identities) {
         })
       },
       onBlur: () => this.setErrorsFor('from'),
-      onFocus: () => this.clearErrorsFor('from'),
+      onFocus: event => {
+        this.clearErrorsFor('from')
+        this.state.newTx.from && event.target.select()
+      },
     }),
 
     h('datalist#accounts', [
@@ -170,7 +173,10 @@ SendTransactionScreen.prototype.renderToInput = function (to, identities, addres
         this.setErrorsFor('to')
         this.estimateGasAndPrice()
       },
-      onFocus: () => this.clearErrorsFor('to'),
+      onFocus: event => {
+        this.clearErrorsFor('to')
+        this.state.newTx.to && event.target.select()
+      },
     }),
 
     h('datalist#addresses', [