ui - redesign - sendTransaction

5 files changed, 176 insertions, 83 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 00d40a9ee..2b58fb239 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -126,6 +126,9 @@ AccountDetailScreen.prototype.render = function() {
 
           h('button', {
             onClick: () => this.props.dispatch(actions.showSendPage()),
+            style: {
+              margin: 10,
+            },
           }, 'SEND ETH'),
 
         ]),
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 860491a3d..75f434da6 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -21,7 +21,7 @@ html, body {
   background: #F7F7F7;
 }
 
-input:focus {
+input:focus, textarea:focus {
   outline: none;
 }
 
@@ -36,7 +36,7 @@ button {
   font-family: 'Transat Black';
   outline: none;
   cursor: pointer;
-  margin: 10px;
+  /*margin: 10px;*/
   padding: 8px 12px;
   border: none;
   background: #F7861C;
@@ -52,16 +52,6 @@ button:active {
   transform: scale(0.95);
 }
 
-/*input, textarea {
-  width: 300px;
-  padding: 6px;
-  border-radius: 6px;
-  border-style: solid;
-  outline: none;
-  border: 1px solid #F5A623;
-  background: #FAF6F0;
-}*/
-
 a {
   text-decoration: none;
   color: inherit;
@@ -80,7 +70,6 @@ app
 }
 
 button.primary {
-  margin: 10px;
   padding: 8px 12px;
   background: #F7861C;
   box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
@@ -234,32 +223,43 @@ app sections
 
 .unlock-screen input[type=password] {
   width: 260px;
-  height: 36px;
+  /*height: 36px;
   margin-bottom: 24px;
-  padding: 8px;
+  padding: 8px;*/
 }
 
 /* Webkit */
-.password-box::-webkit-input-placeholder {
+.unlock-screen input::-webkit-input-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
 /* Firefox 18- */
-.password-box:-moz-placeholder {
+.unlock-screen input:-moz-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
 /* Firefox 19+ */
-.password-box::-moz-placeholder {
+.unlock-screen input::-moz-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
 /* IE */
-.password-box:-ms-input-placeholder {
+.unlock-screen input:-ms-input-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
 
+input.large-input, textarea.large-input {
+  /*margin-bottom: 24px;*/
+  padding: 8px;
+}
+
+input.large-input {
+  height: 36px;
+}
+
+
+
 /* accounts */
 
 .accounts-section {
@@ -369,3 +369,19 @@ app sections
   background: #FAF6F0;
 }
 
+/* Send Screen */
+
+.send-screen {
+
+}
+
+.send-screen section {
+  margin: 8px 16px;
+}
+
+.send-screen input {
+  width: 100%;
+  font-size: 12px;
+  letter-spacing: 0.1em;
+}
+
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index c366a5d5f..60c56422d 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -151,23 +151,6 @@
   font-size: 1.2em;
 }
 
-/* Send Screen */
-.send-screen {
-  margin: 0 20px;
-}
-.send-screen section {
-  margin: 7px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-.send-screen details {
-  width: 100%;
-}
-.send-screen section input {
-  width: 100%;
-}
-
 hr.horizontal-line {
   display: block;
   height: 1px;
diff --git a/ui/app/send.js b/ui/app/send.js
index 43b4e3a04..56b23ee24 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -2,9 +2,12 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
+const Identicon = require('./components/identicon')
 const actions = require('./actions')
 const util = require('./util')
 const numericBalance = require('./util').numericBalance
+const formatBalance = require('./util').formatBalance
+const addressSummary = require('./util').addressSummary
 const AccountPanel = require('./components/account-panel')
 const ethUtil = require('ethereumjs-util')
 
@@ -32,78 +35,163 @@ function SendTransactionScreen() {
 
 SendTransactionScreen.prototype.render = function() {
   var state = this.props
+  var address = state.address
   var account = state.account
   var identity = state.identity
 
   return (
+
     h('.send-screen.flex-column.flex-grow', [
 
-      // subtitle and nav
-      h('.section-title.flex-row.flex-center', [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          onClick: this.back.bind(this),
-        }),
-        h('h2.page-subtitle', 'Send Transaction'),
+      //
+      // Sender Profile
+      //
+
+      h('.account-data-subsection.flex-column.flex-grow', {
+        style: {
+          margin: '0 20px',
+        },
+      }, [
+
+        // header - identicon + nav
+        h('.flex-row.flex-space-between', {
+          style: {
+            marginTop: 28,
+          },
+        }, [
+
+          // invisible placeholder for later
+          h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', {
+            onClick: this.back.bind(this),
+          }),
+
+          // large identicon
+          h('.identicon-wrapper.flex-column.flex-center.select-none', [
+            h(Identicon, {
+              diameter: 62,
+              address: address,
+            }),
+          ]),
+
+          // small accounts nav
+          h('i.fa.fa-users.fa-lg.cursor-pointer.color-orange', {
+            onClick: this.navigateToAccounts.bind(this),
+          }),
+
+        ]),
+
+        // account label
+        h('h2.font-medium.color-forest.flex-center', {
+          style: {
+            paddingTop: 8,
+            marginBottom: 8,
+          },
+        }, identity && identity.name),
+
+        // address and getter actions
+        h('.flex-row.flex-center', {
+          style: {
+            marginBottom: 8,
+          },
+        }, [
+
+          h('div', {
+            style: {
+              lineHeight: '16px',
+            },
+          }, addressSummary(address)),
+
+        ]),
+
+        // balance
+        h('.flex-row.flex-center', [
+
+          h('div', formatBalance(account && account.balance)),
+
+        ]),
+
       ]),
 
-      h(AccountPanel, {
-        showFullAddress: true,
-        identity: identity,
-        account: account,
-      }),
+      //
+      // Required Fields
+      //
+
+      h('h3.flex-center.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+          color: '#AEAEAE',
+          marginTop: 32,
+          marginBottom: 16,
+        },
+      }, [
+        'Send Transaction',
+      ]),
 
-      h('section.recipient', [
-        h('input.address', {
+      // 'to' field
+      h('section.flex-row.flex-center', [
+        h('input.address.large-input', {
           placeholder: 'Recipient Address',
         })
       ]),
 
-      h('section.ammount', [
-        h('input.ether', {
+      // 'amount' and send button
+      h('section.flex-row.flex-center', [
+
+        h('input.ether.large-input', {
           placeholder: 'Amount',
           type: 'number',
-          style: { marginRight: '6px' }
+          style: {
+            marginRight: 6,
+          },
         }),
-        h('select.currency', {
-          name: 'currency',
-        }, [
-          h('option', { value: 'ether' }, 'Ether (1e18 wei)'),
-          h('option', { value: 'wei' }, 'Wei'),
-        ]),
-      ]),
 
-      h('section.data', [
-        h('details', [
-          h('summary', {
-            style: {
-              cursor: 'pointer',
-              outline: 'none',
-            },
-          }, 'Advanced'),
-          h('textarea.txData', {
-            type: 'textarea',
-            placeholder: 'Transaction data (optional)',
-            style: {
-              height: '100px',
-              width: '100%',
-              resize: 'none',
-            }
-          })
-        ])
+        h('button.primary', {
+          onClick: this.onSubmit.bind(this),
+          style: {
+            textTransform: 'uppercase',
+          },
+        }, 'Send')
+
       ]),
 
-      h('section', {
+      //
+      // Optional Fields
+      //
+
+      h('h3.flex-center.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+          color: '#AEAEAE',
+          marginTop: 16,
+          marginBottom: 16,
+        },
       }, [
-        h('button', {
-          onClick: this.onSubmit.bind(this),
-        }, 'Send')
+        'Tranasactional Data (optional)',
       ]),
 
-      state.warning ? h('span.error', state.warning.split('.')[0]) : null,
+      // 'data' field
+      h('section.flex-row.flex-center', [
+        h('input.txData.large-input', {
+          placeholder: '0x01234',
+          style: {
+            width: '100%',
+            resize: 'none',
+          }
+        }),
+      ]),
+
+      // state.warning ? h('span.error', state.warning.split('.')[0]) : null,
+
     ])
+
   )
 }
 
+SendTransactionScreen.prototype.navigateToAccounts = function(event){
+  event.stopPropagation()
+  this.props.dispatch(actions.showAccountsPage())
+}
+
 SendTransactionScreen.prototype.back = function() {
   var address = this.props.address
   this.props.dispatch(actions.backToAccountDetail(address))
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index 512906c67..687bb5e52 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -41,7 +41,7 @@ UnlockScreen.prototype.render = function() {
         },
       }, 'MetaMask'),
 
-      h('input.password-box', {
+      h('input.large-input', {
         type: 'password',
         id: 'password-box',
         placeholder: 'enter password',
@@ -60,6 +60,9 @@ UnlockScreen.prototype.render = function() {
 
       h('button.primary.cursor-pointer', {
         onClick: this.onSubmit.bind(this),
+        style: {
+          margin: 10,
+        },
       }, 'Unlock'),
 
     ])