Center send token content; hook up 'Next' and 'Cancel' buttons

ui/app/app.js

@@ -172,15 +172,17 @@ App.prototype.renderAppBar = function () {
         ]),
       ]),
 
-      h('.app-header', {
-        style: {
-          visibility: props.isUnlocked ? 'visible' : 'none',
-          background: '#EFEFEF', // $gallery
-          height: '38px',
-          position: 'relative',
-          zIndex: 12,
-        },
-      })
+      // extra app-header space
+
+      // h('.app-header', {
+      //   style: {
+      //     visibility: props.isUnlocked ? 'visible' : 'none',
+      //     background: '#EFEFEF', // $gallery
+      //     height: '38px',
+      //     position: 'relative',
+      //     zIndex: 12,
+      //   },
+      // })
     ])
   )
 }

ui/app/css/index.css

@@ -489,12 +489,8 @@ input.large-input {
 
 /* Send Screen */
 
-.send-screen {
-
-}
-
 .send-screen section {
-  margin: 8px 16px;
+  margin: 4px 16px;
 }
 
 .send-screen input {

ui/app/send.js

@@ -59,11 +59,19 @@ SendTransactionScreen.prototype.render = function () {
 
   return (
 
-    h('.send-screen.flex-column.flex-grow', {
+    h('div.flex-column.flex-grow', {
+      style: {
+        // overflow: 'scroll',
+        minWidth: '355px', // TODO: maxWidth TBD, use home.html
+      },
+    }, [
+
+      // Main Send token Card
+      h('div.send-screen.flex-column.flex-grow', {
         style: {
-        background: '#FFFFFF', // $background-white
           marginLeft: '3.5%',
           marginRight: '3.5%',
+          background: '#FFFFFF', // $background-white
         }
       }, [
         h('section.flex-center.flex-row', {
@@ -85,7 +93,7 @@ SendTransactionScreen.prototype.render = function () {
         h('h3.flex-center', {
           style: {
             marginTop: '-15px',
-          fontSize: '20px',
+            fontSize: '16px',
           },
         }, [
           'Send Tokens',
@@ -94,7 +102,7 @@ SendTransactionScreen.prototype.render = function () {
         h('h3.flex-center', {
           style: {
             textAlign: 'center',
-          fontSize: '16px',
+            fontSize: '12px',
           },
         }, [
           'Send Tokens to anyone with an Ethereum account',
@@ -103,7 +111,7 @@ SendTransactionScreen.prototype.render = function () {
         h('h3.flex-center', {
           style: {
             textAlign: 'center',
-          fontSize: '16px',
+            fontSize: '12px',
           },
         }, [
           'Your Aragon Token Balance is:',
@@ -112,7 +120,7 @@ SendTransactionScreen.prototype.render = function () {
         h('h3.flex-center', {
           style: {
             textAlign: 'center',
-          fontSize: '43px',
+            fontSize: '36px',
           },
         }, [
           '2.34',
@@ -121,7 +129,7 @@ SendTransactionScreen.prototype.render = function () {
         h('h3.flex-center', {
           style: {
             textAlign: 'center',
-          fontSize: '16px',
+            fontSize: '12px',
           },
         }, [
           'ANT',
@@ -131,7 +139,11 @@ SendTransactionScreen.prototype.render = function () {
         props.error && h('span.error.flex-center', props.error),
 
         // 'to' field
-      h('section.flex-row.flex-center', [
+        h('section.flex-row.flex-center', {
+          style: {
+            fontSize: '12px',
+          },
+        }, [
           h(EnsInput, {
             name: 'address',
             placeholder: 'Recipient Address',
@@ -147,6 +159,7 @@ SendTransactionScreen.prototype.render = function () {
 
           h('div.flex-row.flex-center', {
             style: {
+              fontSize: '12px',
               width: '100%',
               justifyContent: 'space-between',
             }
@@ -161,6 +174,7 @@ SendTransactionScreen.prototype.render = function () {
             type: 'number',
             style: {
               marginRight: '6px',
+              fontSize: '12px',
             },
             dataset: {
               persistentFormId: 'tx-amount',
@@ -173,12 +187,13 @@ SendTransactionScreen.prototype.render = function () {
 
           h('div.flex-row.flex-center', {
             style: {
+              fontSize: '12px',
               width: '100%',
               justifyContent: 'space-between',
             }
           },[
             h('span', { style: {} }, ['Gas Fee:']),
-          h('span', { style: {} }, ['What\'s this?']),
+            h('span', { style: { fontSize: '8px' } }, ['What\'s this?']),
           ]),
 
           h('input.large-input', {
@@ -186,6 +201,7 @@ SendTransactionScreen.prototype.render = function () {
             placeholder: '0',
             type: 'number',
             style: {
+              fontSize: '12px',
               marginRight: '6px',
             },
             // dataset: {
@@ -203,12 +219,13 @@ SendTransactionScreen.prototype.render = function () {
 
           h('div.flex-row.flex-center', {
             style: {
+              fontSize: '12px',
               width: '100%',
               justifyContent: 'flex-start',
             }
           },[
             h('span', { style: {} }, ['Transaction Memo (optional)']),
-          h('span', { style: {} }, ['What\'s this?']),
+            h('span', { style: { fontSize: '8px' } }, ['What\'s this?']),
           ]),
 
           h('input.large-input', {
@@ -219,11 +236,8 @@ SendTransactionScreen.prototype.render = function () {
               marginRight: '6px',
             },
           }),
-
         ]),
 
-
-
         // h('h3.flex-center.text-transform-uppercase', {
         //   style: {
         //     background: '#EBEBEB',
@@ -249,7 +263,25 @@ SendTransactionScreen.prototype.render = function () {
         //     },
         //   }),
         // ]),
+      ]),
+
+      // Buttons underneath card
+
+      h('button.primary', {
+        onClick: this.onSubmit.bind(this),
+        style: {
+          textTransform: 'uppercase',
+        },
+      }, 'Next'),
+
+      h('button.primary', {
+        onClick: this.back.bind(this),
+        style: {
+          textTransform: 'uppercase',
+        },
+      }, 'Cancel'),
     ])
+
   )
 }