Further styling to get hex component working. Fix some typos.

3 files changed, 44 insertions, 16 deletions

diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js
index 34f628f7f..bdc0ed191 100644
--- a/ui/app/components/hex-as-decimal-input.js
+++ b/ui/app/components/hex-as-decimal-input.js
@@ -3,6 +3,7 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
+const extend = require('xtend')
 
 module.exports = HexAsDecimalInput
 
@@ -23,20 +24,40 @@ function HexAsDecimalInput () {
 HexAsDecimalInput.prototype.render = function () {
   const props = this.props
   const { value, onChange } = props
-  const decimalValue = decimalize(value)
+  const toEth = props.toEth
+  const suffix = props.suffix
+  const decimalValue = decimalize(value, toEth)
+  const style = props.style
 
   return (
-    h('input', {
+    h('.flex-row', {
       style: {
-        display: 'block',
-        textAlign: 'right',
+        alignItems: 'flex-end',
+        lineHeight: '13px',
+        fontFamily: 'Montserrat Light',
+        textRendering: 'geometricPrecision',
       },
-      value: decimalValue,
-      onChange: (event) => {
-        const hexString = hexify(event.target.value)
-        onChange(hexString)
-      },
-    })
+    }, [
+      h('input.ether-balance.ether-balance-amount', {
+        style: extend({
+          display: 'block',
+          textAlign: 'right',
+          backgroundColor: 'transparent',
+        }, style),
+        value: decimalValue,
+        onChange: (event) => {
+          const hexString = hexify(event.target.value)
+          onChange(hexString)
+        },
+      }),
+      h('div', {
+        style: {
+          color: ' #AEAEAE',
+          fontSize: '12px',
+          marginLeft: '5px',
+        },
+      }, suffix),
+    ])
   )
 }
 
@@ -45,7 +66,7 @@ function hexify (decimalString) {
   return '0x' + hexBN.toString('hex')
 }
 
-function decimalize (input) {
+function decimalize (input, toEth) {
   const strippedInput = ethUtil.stripHexPrefix(input)
   const inputBN = new BN(strippedInput, 'hex')
   return inputBN.toString(10)
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
index 973f6ac92..65eb1d2af 100644
--- a/ui/app/components/pending-tx-details.js
+++ b/ui/app/components/pending-tx-details.js
@@ -138,12 +138,17 @@ PTXP.render = function () {
         h('.cell.row', {
 
         }, [
-          h('.cell.label', 'Total Gas'),
+          h('.cell.label', 'Gas Limit'),
           h('.cell.value', {
 
           }, [
             h(HexInput, {
               value: gas,
+              suffix: 'UNITS',
+              style: {
+                position: 'relative',
+                top: '5px',
+              },
               onChange: (newHex) => {
                 this.setState({ gas: newHex })
               },
@@ -159,8 +164,13 @@ PTXP.render = function () {
           }, [
             h(HexInput, {
               value: gasPrice,
+              suffix: 'WEI',
+              style: {
+                position: 'relative',
+                top: '5px',
+              },
               onChange: (newHex) => {
-                this.setState({ gas: newHex })
+                this.setState({ gasPrice: newHex })
               },
             }),
           ])
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 23b0dc00f..2b0bb1dfb 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -16,9 +16,6 @@ PendingTx.prototype.render = function () {
   const txData = props.txData
   const txParams = txData.txParams
 
-  const gas = state.gas || txParams.gas
-  const gasPrice = state.gasPrice || txData.gasPrice
-
   return (
 
     h('div', {