aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ui/app/components/send/gas-fee-display-v2.js2
-rw-r--r--ui/app/css/itcss/components/currency-display.scss2
-rw-r--r--ui/app/css/itcss/components/send.scss50
-rw-r--r--ui/app/send-v2.js105
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(),
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-18 16:29:54 +0800