Fixes mobile styling.

4 files changed, 103 insertions, 56 deletions

diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js
index 7c3913c7f..3b39312ec 100644
--- a/ui/app/components/send/gas-fee-display-v2.js
+++ b/ui/app/components/send/gas-fee-display-v2.js
@@ -17,7 +17,7 @@ GasFeeDisplay.prototype.render = function () {
     onClick,
   } = this.props
 
-  return h('div', [
+  return h('div.send-v2__gas-fee-display', [
 
     gasTotal
       ? h(CurrencyDisplay, {
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index f2cc6e700..eb1776c58 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -1,6 +1,6 @@
 .currency-display {
   height: 54px;
-  width: 240px;
+  width: 100%ß;
   border: 1px solid $alto;
   border-radius: 4px;
   background-color: $white;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 7e72e8399..6a5b2b869 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -414,7 +414,6 @@
 
     @media screen and (max-width: $break-small) {
       width: 100%;
-      overflow-y: auto;
       top: 0;
       box-shadow: none;
     }
@@ -457,6 +456,10 @@
     left: 199px;
     border-radius: 50%;
     z-index: 100;
+
+    @media screen and (max-width: $break-small) {
+      top: 36px;
+    }
   }
 
   &__header {
@@ -467,6 +470,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    @media screen and (max-width: $break-small) {
+      height: 59px;
+    }
   }
 
   &__header-tip {
@@ -477,6 +484,10 @@
     transform: rotate(45deg);
     left: 178px;
     top: 65px;
+
+    @media screen and (max-width: $break-small) {
+      top: 46px;
+    }
   }
 
   &__title {
@@ -509,32 +520,47 @@
   }
 
   &__form {
-    display: flex;
-    flex-direction: column;
     margin-top: 13px;
     width: 100%;
+
+    @media screen and (max-width: $break-small) {
+      margin-top: 0px;
+      height: 407px;
+      overflow-y: auto;
+    }
+  }
+
+  &__form-header, &__form-header-copy {
+    width: 100%;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
   }
 
   &__form-row {
     margin: 14.5px 18px 0px;
-    display: flex;
     position: relative;
+    display: flex;
+    flex-flow: row;
+    flex: 1 0 auto;
     justify-content: space-between;
   }
 
+  &__form-field {
+    flex: 1 1 auto;
+  }
+
   &__form-label {
     color: $scorpion;
     font-family: Roboto;
     font-size: 16px;
     line-height: 22px;
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
+    width: 88px;
   }
 
   &__from-dropdown {
     height: 73px;
-    width: 240px;
+    width: 100%;
     border: 1px solid $alto;
     border-radius: 4px;
     background-color: $white;
@@ -570,7 +596,7 @@
   &__to-autocomplete, &__memo-text-area {
     &__input {
       height: 54px;
-      width: 240px;
+      width: 100%;
       border: 1px solid $alto;
       border-radius: 4px;
       background-color: $white;
@@ -583,6 +609,10 @@
     }
   }
 
+  &__gas-fee-display {
+    width: 100%;
+  }
+
   &__sliders-icon-container {
     display: flex;
     align-items: center;
@@ -616,7 +646,7 @@
     justify-content: space-evenly;
     align-items: center;
     border-top: 1px solid $alto;
-    margin-top: 29px;
+    background: $white;
   }
 
   &__next-btn,
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 8d368044a..e8a12670b 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -103,7 +103,7 @@ SendTransactionScreen.prototype.renderCopy = function () {
 
   const tokenText = selectedToken ? 'tokens' : 'ETH'
 
-  return h('div', [
+  return h('div.send-v2__form-header-copy', [
 
     h('div.send-v2__copy', `Only send ${tokenText} to an Ethereum address.`),
 
@@ -126,9 +126,6 @@ SendTransactionScreen.prototype.renderHeader = function () {
 
     ]),
 
-    this.renderTitle(),
-
-    this.renderCopy(),
   ])
 }
 
@@ -157,15 +154,17 @@ SendTransactionScreen.prototype.renderFromRow = function () {
 
     h('div.send-v2__form-label', 'From:'),
 
-    h(FromDropdown, {
-      dropdownOpen,
-      accounts: fromAccounts,
-      selectedAccount: from,
-      onSelect: updateSendFrom,
-      openDropdown: () => this.setState({ dropdownOpen: true }),
-      closeDropdown: () => this.setState({ dropdownOpen: false }),
-      conversionRate,
-    }),
+    h('div.send-v2__form-field', [
+      h(FromDropdown, {
+        dropdownOpen,
+        accounts: fromAccounts,
+        selectedAccount: from,
+        onSelect: updateSendFrom,
+        openDropdown: () => this.setState({ dropdownOpen: true }),
+        closeDropdown: () => this.setState({ dropdownOpen: false }),
+        conversionRate,
+      }),
+    ]),
 
   ])
 }
@@ -199,12 +198,14 @@ SendTransactionScreen.prototype.renderToRow = function () {
 
     ]),
 
-    h(ToAutoComplete, {
-      to,
-      accounts: toAccounts,
-      onChange: this.handleToChange,
-      inError: Boolean(errors.to),
-    }),
+    h('div.send-v2__form-field', [
+      h(ToAutoComplete, {
+        to,
+        accounts: toAccounts,
+        onChange: this.handleToChange,
+        inError: Boolean(errors.to),
+      }),
+    ]),
 
   ])
 }
@@ -245,7 +246,7 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
       conversionRate: amountConversionRate,
     },
   )
-  console.log(`sufficientBalance`, sufficientBalance);
+
   const amountLessThanZero = conversionGreaterThan(
     { value: 0, fromNumericBase: 'dec' },
     { value: amount, fromNumericBase: 'hex' },
@@ -277,16 +278,18 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
       this.renderErrorMessage('amount'),
     ]),
 
-    h(CurrencyDisplay, {
-      inError: Boolean(errors.amount),
-      primaryCurrency,
-      convertedCurrency: 'USD',
-      value: amount,
-      conversionRate: amountConversionRate,
-      convertedPrefix: '$',
-      handleChange: this.handleAmountChange,
-      validate: this.validateAmount,
-    }),
+    h('div.send-v2__form-field', [
+      h(CurrencyDisplay, {
+        inError: Boolean(errors.amount),
+        primaryCurrency,
+        convertedCurrency: 'USD',
+        value: amount,
+        conversionRate: amountConversionRate,
+        convertedPrefix: '$',
+        handleChange: this.handleAmountChange,
+        validate: this.validateAmount,
+      }),
+    ]),
 
   ])
 }
@@ -302,17 +305,21 @@ SendTransactionScreen.prototype.renderGasRow = function () {
 
     h('div.send-v2__form-label', 'Gas fee:'),
 
-    h(GasFeeDisplay, {
-      gasTotal,
-      conversionRate,
-      onClick: showCustomizeGasModal,
-    }),
+    h('div.send-v2__form-field', [
+
+      h(GasFeeDisplay, {
+        gasTotal,
+        conversionRate,
+        onClick: showCustomizeGasModal,
+      }),
+    
+      h('div.send-v2__sliders-icon-container', {
+        onClick: showCustomizeGasModal,
+      }, [
+        h('i.fa.fa-sliders.send-v2__sliders-icon'),
+      ]),
 
-    h('div.send-v2__sliders-icon-container', {
-      onClick: showCustomizeGasModal,
-    }, [
-      h('i.fa.fa-sliders.send-v2__sliders-icon'),
-    ])          
+    ]),          
 
   ])
 }
@@ -325,10 +332,12 @@ SendTransactionScreen.prototype.renderMemoRow = function () {
 
     h('div.send-v2__form-label', 'Transaction Memo:'),
 
-    h(MemoTextArea, {
-      memo,
-      onChange: (event) => updateSendMemo(event.target.value),
-    }),
+    h('div.send-v2__form-field', [
+      h(MemoTextArea, {
+        memo,
+        onChange: (event) => updateSendMemo(event.target.value),
+      })
+    ]),
 
   ])
 }
@@ -336,6 +345,14 @@ SendTransactionScreen.prototype.renderMemoRow = function () {
 SendTransactionScreen.prototype.renderForm = function () {
   return h('div.send-v2__form', {}, [
 
+    h('div.sendV2__form-header', [
+
+      this.renderTitle(),
+
+      this.renderCopy(),
+
+    ]),
+
     this.renderFromRow(),
 
     this.renderToRow(),