From 2c474b0d6e487652cf16e224e19deb0bf68abedb Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Wed, 20 Sep 2017 05:36:31 -0230
Subject: Export private key modal body ui.

---
 .../components/modals/export-private-key-modal.js  | 22 +++++++
 ui/app/css/itcss/components/modal.scss             | 69 ++++++++++++++++++++++
 ui/app/css/itcss/components/sections.scss          |  2 +-
 3 files changed, 92 insertions(+), 1 deletion(-)

diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index bbcd25e0d..28b988f5a 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/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'),
+      ]),
+      
   ])
 }
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 0afd778e9..9cdfdec8f 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/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;
diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss
index 44ec3e862..5c32976a7 100644
--- a/ui/app/css/itcss/components/sections.scss
+++ b/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;
 }
-- 
cgit