Merge pull request #1877 from MetaMask/hotfix/mobile-buy-layout

Improve layout for legacy buy screen

ui/app/components/buy-button-subview.js

@@ -143,7 +143,7 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
     return h('div.flex-column', {
       style: {
         alignItems: 'center',
-        margin: '50px',
+        margin: '20px 50px',
       },
     }, [
       h('h3.text-transform-uppercase', {

ui/app/components/shapeshift-form.js

@@ -33,10 +33,10 @@ ShapeshiftForm.prototype.renderMain = function () {
 
   return h('.flex-column', {
     style: {
-      // marginTop: '10px',
+      position: 'relative',
       padding: '25px',
       paddingTop: '5px',
-      width: '100%',
+      width: '90%',
       minHeight: '215px',
       alignItems: 'center',
       overflowY: 'auto',
@@ -58,7 +58,9 @@ ShapeshiftForm.prototype.renderMain = function () {
         },
       }),
 
-      h('.input-container', [
+      h('.input-container', {
+        position: 'relative',
+      }, [
         h('input#fromCoin.buy-inputs.ex-coins', {
           type: 'text',
           list: 'coinList',
@@ -79,27 +81,31 @@ ShapeshiftForm.prototype.renderMain = function () {
           style: {
             fontSize: '12px',
             color: '#F7861C',
-            position: 'relative',
-            bottom: '48px',
-            left: '106px',
+            position: 'absolute',
           },
         }),
       ]),
 
-      h('.icon-control', [
-        h('i.fa.fa-refresh.fa-4.orange', {
+      h('.icon-control', {
         style: {
-            bottom: '5px',
-            left: '5px',
-            color: '#F7861C',
+          position: 'relative',
         },
-          onClick: this.updateCoin.bind(this),
-        }),
+      }, [
+        // Not visible on the screen, can't see it on master.
+
+        // h('i.fa.fa-refresh.fa-4.orange', {
+        //   style: {
+        //     bottom: '5px',
+        //     left: '5px',
+        //     color: '#F7861C',
+        //   },
+        //   onClick: this.updateCoin.bind(this),
+        // }),
         h('i.fa.fa-chevron-right.fa-4.orange', {
           style: {
-            position: 'relative',
-            bottom: '26px',
-            left: '10px',
+            position: 'absolute',
+            bottom: '35%',
+            left: '0%',
             color: '#F7861C',
           },
           onClick: this.updateCoin.bind(this),
@@ -117,26 +123,34 @@ ShapeshiftForm.prototype.renderMain = function () {
         },
       }),
     ]),
+
     h('.flex-column', {
       style: {
+        marginTop: '1%',
         alignItems: 'flex-start',
       },
     }, [
-      this.props.warning ? this.props.warning && h('span.error.flex-center', {
+      this.props.warning
+        ? this.props.warning
+        && h('span.error.flex-center', {
           style: {
             textAlign: 'center',
             width: '229px',
             height: '82px',
           },
-      },
-        this.props.warning) : this.renderInfo(),
+        }, this.props.warning)
+        : this.renderInfo(),
+
+      this.renderRefundAddressForCoin(coin),
     ]),
 
-    h(this.activeToggle('.input-container'), {
+  ])
+}
+
+ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) {
+  return h(this.activeToggle('.input-container'), {
     style: {
-        padding: '10px',
-        paddingTop: '0px',
-        width: '100%',
+      marginTop: '1%',
     },
   }, [
 
@@ -147,6 +161,7 @@ ShapeshiftForm.prototype.renderMain = function () {
       placeholder: `Your ${coin} Refund Address`,
       dataset: {
         persistentFormId: 'refund-address',
+
       },
       style: {
         boxSizing: 'border-box',
@@ -160,27 +175,22 @@ ShapeshiftForm.prototype.renderMain = function () {
       style: {
         fontSize: '12px',
         color: '#F7861C',
-          position: 'relative',
-          bottom: '10px',
-          right: '11px',
+        position: 'absolute',
       },
     }),
-      h('.flex-row', {
+    h('div.flex-row', {
       style: {
-          justifyContent: 'flex-end',
+        justifyContent: 'flex-start',
       },
     }, [
       h('button', {
         onClick: this.shift.bind(this),
         style: {
-            marginTop: '10px',
-            position: 'relative',
-            bottom: '40px',
+          marginTop: '1%',
         },
       },
       'Submit'),
     ]),
-    ]),
   ])
 }