Add rounded background to total token, with minor styling tweaks

4 files changed, 180 insertions, 29 deletions

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index f77374ef8..4b06f71b0 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -25,17 +25,6 @@ const MIN_GAS_LIMIT_BN = new BN(21000)
 const Identicon = require('./identicon')
 const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0'
 
-module.exports = PendingTx
-inherits(PendingTx, Component)
-function PendingTx () {
-  Component.call(this)
-  this.state = {
-    valid: true,
-    txData: null,
-    submitting: false,
-  }
-}
-
 // Next: create separate react components
 // roughly 5 components:
 //   heroIcon
@@ -48,7 +37,7 @@ const sectionDivider = h('div', {
     height:'1px',
     background:'#E7E7E7',
   },
-}),
+})
 
 const contentDivider = h('div', {
   style: {
@@ -59,6 +48,16 @@ const contentDivider = h('div', {
   },
 })
 
+module.exports = PendingTx
+inherits(PendingTx, Component)
+function PendingTx () {
+  Component.call(this)
+  this.state = {
+    valid: true,
+    txData: null,
+    submitting: false,
+  }
+}
 
 PendingTx.prototype.render = function () {
   const props = this.props
@@ -175,7 +174,6 @@ PendingTx.prototype.render = function () {
         sectionDivider,
 
         h('section.flex-row.flex-center', {
-
         }, [
           h('div', {
             style: {
@@ -216,27 +214,179 @@ PendingTx.prototype.render = function () {
 
         contentDivider,
 
+        h('section.flex-row.flex-center', {
+        }, [
+          h('div', {
+            style: {
+              width: '50%',
+            }
+          }, [
+            h('span', {
+              style: {
+                textAlign: 'left',
+                fontSize: '12px',
+              }
+            }, [
+              'To'
+            ])
+          ]),
+
+          h('div', {
+            style: {
+              width: '50%',
+            }
+          },[
+            h('div', {
+              style: {
+                textAlign: 'left',
+                fontSize: '10px',
+                marginBottom: '-10px',
+              },
+            }, 'Ethereum Address'),
+
+            h('div', {
+              style: {
+                textAlign: 'left',
+                fontSize: '8px',
+              },
+            }, '...5924')
+          ])
+        ]),
+
+        contentDivider,
+
+        h('section.flex-row.flex-center', {
+        }, [
+          h('div', {
+            style: {
+              width: '50%',
+            }
+          }, [
+            h('span', {
+              style: {
+                textAlign: 'left',
+                fontSize: '12px',
+              }
+            }, [
+              'Gas Fee'
+            ])
+          ]),
+
+          h('div', {
+            style: {
+              width: '50%',
+            }
+          },[
+            h('div', {
+              style: {
+                textAlign: 'left',
+                fontSize: '10px',
+                marginBottom: '-10px',
+              },
+            }, '$0.04 USD'),
+
+            h('div', {
+              style: {
+                textAlign: 'left',
+                fontSize: '8px',
+              },
+            }, '0.001575 ETH')
+          ])
+        ]),
+
+        contentDivider,
+
+        h('section.flex-row.flex-center', {
+          style: {
+            backgroundColor: '#F6F6F6', // $wild-sand
+            borderRadius: '8px',
+            marginLeft: '10px',
+            marginRight: '10px',
+            paddingLeft: '6px',
+            paddingRight: '6px',
+          }
+        }, [
+          h('div', {
+            style: {
+              width: '50%',
+            }
+          }, [
+            h('div', {
+              style: {
+                textAlign: 'left',
+                fontSize: '12px',
+              }
+            }, [
+              'Total Tokens'
+            ]),
+
+            h('div', {
+              style: {
+                textAlign: 'left',
+                fontSize: '8px',
+              }
+            }, [
+              'Total Gas'
+            ])
+
+          ]),
+
+          h('div', {
+            style: {
+              width: '50%',
+            }
+          },[
+            h('div', {
+              style: {
+                textAlign: 'left',
+                fontSize: '10px',
+                marginBottom: '-10px',
+              },
+            }, '0.24 ANT (127.00 USD)'),
+
+            h('div', {
+              style: {
+                textAlign: 'left',
+                fontSize: '8px',
+              },
+            }, '0.249 ETH')
+          ])
+        ]),
+
+        sectionDivider,
+
         h('form#pending-tx-form', {
           onSubmit: this.onSubmit.bind(this),
         }, [
           // Reset Button
-          h('button', {
-            onClick: (event) => {
-              this.resetGasFields()
-              event.preventDefault()
-            },
-          }, 'Reset'),
+          // h('button', {
+          //   onClick: (event) => {
+          //     this.resetGasFields()
+          //     event.preventDefault()
+          //   },
+          // }, 'Reset'),
 
           // Accept Button
           h('input.confirm.btn-green', {
             type: 'submit',
             value: 'SUBMIT',
-            style: { marginLeft: '10px' },
+            style: {
+              color: '#FFFFFF',
+              fontSize: '12px',
+              lineHeight: '20px',
+              textAlign: 'center',
+            },
             disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
           }),
 
           // Cancel Button
-          h('button.cancel.btn-red', {
+          h('button.cancel.btn-light', {
+            style: {
+              background: '#F7F7F7', // $alabaster
+              border: 'none',
+              opacity: 1,
+              width: '8em',
+            },
             onClick: props.cancelTransaction,
           }, 'Reject'),
         ]),
diff --git a/ui/app/css/colors.css b/ui/app/css/colors.css
index 7ac93595f..650c81120 100644
--- a/ui/app/css/colors.css
+++ b/ui/app/css/colors.css
@@ -1,3 +1,4 @@
 $gallery: #EFEFEF;
 $alabaster: #F7F7F7;
-$shark: #22232C;
\ No newline at end of file
+$shark: #22232C;
+$wild-sand: #F6F6F6;
\ No newline at end of file
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index f4783a446..dc8cea695 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -85,10 +85,10 @@ input:focus, textarea:focus {
 //   box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
 // }
 
-// .btn-green, input[type="submit"].btn-green {
-//   background: rgba(106, 195, 96, 1);
-//   box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
-// }
+.btn-green, input[type="submit"].btn-green {
+  border-radius: 2px;
+  background-color: #02C9B1;
+}
 
 // .btn-red {
 //   background: rgba(254, 35, 17, 1);
@@ -139,7 +139,7 @@ button.primary {
   text-transform: uppercase;
 }
 
-button.light {
+.btn-light {
   padding: 8px 12px;
   // background: #FFFFFF; // $bg-white
   box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
diff --git a/ui/app/send.js b/ui/app/send.js
index 873db8473..de9e64ad1 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -272,7 +272,7 @@ SendTransactionScreen.prototype.render = function () {
       // Buttons underneath card
       h('section.flex-column.flex-center', [
 
-        h('button.light', {
+        h('button.btn-light', {
           onClick: this.onSubmit.bind(this),
           style: {
             marginTop: '8px',
@@ -281,7 +281,7 @@ SendTransactionScreen.prototype.render = function () {
           },
         }, 'Next'),
 
-        h('button.light', {
+        h('button.btn-light', {
           onClick: this.back.bind(this),
           style: {
             background: '#F7F7F7', // $alabaster