Merge pull request #1336 from MetaMask/buyButtonRedo

Buy button redo

1 files changed, 11 insertions, 23 deletions

diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 8c9686035..e0a720426 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -43,14 +43,18 @@ ShapeshiftForm.prototype.renderMain = function () {
     style: {
       // marginTop: '10px',
       padding: '25px',
+      paddingTop: '5px',
       width: '100%',
+      minHeight: '215px',
       alignItems: 'center',
+      overflowY: 'auto',
     },
   }, [
     h('.flex-row', {
       style: {
         justifyContent: 'center',
         alignItems: 'baseline',
+        height: '42px',
       },
     }, [
       h('img', {
@@ -66,6 +70,7 @@ ShapeshiftForm.prototype.renderMain = function () {
         h('input#fromCoin.buy-inputs.ex-coins', {
           type: 'text',
           list: 'coinList',
+          autoFocus: true,
           dataset: {
             persistentFormId: 'input-coin',
           },
@@ -92,7 +97,6 @@ ShapeshiftForm.prototype.renderMain = function () {
       h('.icon-control', [
         h('i.fa.fa-refresh.fa-4.orange', {
           style: {
-            position: 'relative',
             bottom: '5px',
             left: '5px',
             color: '#F7861C',
@@ -121,8 +125,6 @@ ShapeshiftForm.prototype.renderMain = function () {
         },
       }),
     ]),
-
-    this.props.isSubLoading ? this.renderLoading() : null,
     h('.flex-column', {
       style: {
         alignItems: 'flex-start',
@@ -138,17 +140,6 @@ ShapeshiftForm.prototype.renderMain = function () {
         this.props.warning) : this.renderInfo(),
     ]),
 
-    h('.flex-row', {
-      style: {
-        padding: '10px',
-        paddingBottom: '2px',
-        width: '100%',
-      },
-    }, [
-      h('div', 'Receiving address:'),
-      h('.ellip-address', this.props.buyView.buyAddress),
-    ]),
-
     h(this.activeToggle('.input-container'), {
       style: {
         padding: '10px',
@@ -156,6 +147,7 @@ ShapeshiftForm.prototype.renderMain = function () {
         width: '100%',
       },
     }, [
+
       h('div', `${coin} Address:`),
 
       h('input#fromCoinAddress.buy-inputs', {
@@ -166,8 +158,8 @@ ShapeshiftForm.prototype.renderMain = function () {
         },
         style: {
           boxSizing: 'border-box',
-          width: '278px',
-          height: '20px',
+          width: '227px',
+          height: '30px',
           padding: ' 5px ',
         },
       }),
@@ -177,7 +169,7 @@ ShapeshiftForm.prototype.renderMain = function () {
           fontSize: '12px',
           color: '#F7861C',
           position: 'relative',
-          bottom: '5px',
+          bottom: '10px',
           right: '11px',
         },
       }),
@@ -190,6 +182,8 @@ ShapeshiftForm.prototype.renderMain = function () {
           onClick: this.shift.bind(this),
           style: {
             marginTop: '10px',
+            position: 'relative',
+            bottom: '40px',
           },
         },
         'Submit'),
@@ -266,8 +260,6 @@ ShapeshiftForm.prototype.renderInfo = function () {
 
   return h('span', {
     style: {
-      marginTop: '10px',
-      marginBottom: '15px',
     },
   }, [
     h('h3.flex-row.text-transform-uppercase', {
@@ -286,10 +278,6 @@ ShapeshiftForm.prototype.renderInfo = function () {
   ])
 }
 
-ShapeshiftForm.prototype.handleAddress = function (event) {
-  this.props.dispatch(actions.updateBuyAddress(event.target.value))
-}
-
 ShapeshiftForm.prototype.activeToggle = function (elementType) {
   if (!this.props.buyView.formView.response || this.props.warning) return elementType
   return `${elementType}.inactive`