mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Update modal header design on send screen (#3196)
This commit is contained in:
Alexander Tseung
GitHub
parent
9ed3a5512e
commit
9db0a32dac
@ -30,16 +30,10 @@ async function runSendFlowTest(assert, done) {
|
||||
|
||||
await timeout(1000)
|
||||
|
||||
const sendContainer = $('.send-v2__container')
|
||||
assert.ok(sendContainer[0], 'send container renders')
|
||||
const sendTitle = $('.page-container__title')
|
||||
assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct')
|
||||
|
||||
const sendHeader = $('.send-v2__send-header-icon')
|
||||
assert.ok(sendHeader[0], 'send screen has a header icon')
|
||||
|
||||
const sendTitle = $('.send-v2__title')
|
||||
assert.equal(sendTitle[0].textContent, 'Send Funds', 'Send screen title is correct')
|
||||
|
||||
const sendCopy = $('.send-v2__copy')
|
||||
const sendCopy = $('.page-container__subtitle')
|
||||
assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy')
|
||||
|
||||
const sendFromField = $('.send-v2__form-field')
|
||||
@ -146,7 +140,8 @@ async function runSendFlowTest(assert, done) {
|
||||
'send gas field should show customized gas total converted to USD'
|
||||
)
|
||||
|
||||
const sendButton = $('.send-v2__next-btn')
|
||||
const sendButton = $('button.btn-clear.page-container__footer-button')
|
||||
assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
|
||||
sendButton[0].click()
|
||||
|
||||
await timeout(2000)
|
||||
@ -200,7 +195,8 @@ async function runSendFlowTest(assert, done) {
|
||||
|
||||
await timeout()
|
||||
|
||||
const sendButtonInEdit = $('.send-v2__next-btn')
|
||||
const sendButtonInEdit = $('.btn-clear.page-container__footer-button')
|
||||
assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
|
||||
sendButtonInEdit[0].click()
|
||||
|
||||
await timeout()
|
||||
|
||||
@ -533,7 +533,6 @@
|
||||
@media screen and (max-width: $break-small) {
|
||||
padding: 13px 0;
|
||||
margin: 0;
|
||||
height: 0;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@ -69,3 +69,117 @@ textarea.large-input {
|
||||
input.large-input {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: 400px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
||||
z-index: 25;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border-bottom: 1px solid $geyser;
|
||||
padding: 1.6rem 1rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: center;
|
||||
border-top: 1px solid $geyser;
|
||||
padding: 1.6rem;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__footer-button {
|
||||
width: 165px;
|
||||
height: 60px;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $tundora;
|
||||
font-family: Roboto;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
padding-top: .5rem;
|
||||
line-height: initial;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
padding: 0 1.3rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
min-width: 5rem;
|
||||
padding: .2rem .8rem .9rem;
|
||||
color: $dusty-gray;
|
||||
font-family: Roboto;
|
||||
font-size: 1.1rem;
|
||||
line-height: initial;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border-bottom: none;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&--selected {
|
||||
color: $curious-blue;
|
||||
border-bottom: 3px solid $curious-blue;
|
||||
|
||||
&:hover {
|
||||
color: $curious-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 250px) {
|
||||
.page-container {
|
||||
&__footer {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
|
||||
&__footer-button {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 0;
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.page-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,6 @@ const h = require('react-hyperscript')
|
||||
const ethAbi = require('ethereumjs-abi')
|
||||
const ethUtil = require('ethereumjs-util')
|
||||
|
||||
const Identicon = require('./components/identicon')
|
||||
const FromDropdown = require('./components/send/from-dropdown')
|
||||
const ToAutoComplete = require('./components/send/to-autocomplete')
|
||||
const CurrencyDisplay = require('./components/send/currency-display')
|
||||
@ -179,53 +178,20 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) {
|
||||
}
|
||||
}
|
||||
|
||||
SendTransactionScreen.prototype.renderHeaderIcon = function () {
|
||||
SendTransactionScreen.prototype.renderHeader = function () {
|
||||
const { selectedToken } = this.props
|
||||
|
||||
return h('div.send-v2__send-header-icon-container', [
|
||||
selectedToken
|
||||
? h(Identicon, {
|
||||
diameter: 40,
|
||||
address: selectedToken.address,
|
||||
})
|
||||
: h('img.send-v2__send-header-icon', { src: '../images/eth_logo.svg' }),
|
||||
])
|
||||
}
|
||||
|
||||
SendTransactionScreen.prototype.renderTitle = function () {
|
||||
const { selectedToken } = this.props
|
||||
|
||||
return h('div.send-v2__title', [selectedToken ? 'Send Tokens' : 'Send Funds'])
|
||||
}
|
||||
|
||||
SendTransactionScreen.prototype.renderCopy = function () {
|
||||
const { selectedToken } = this.props
|
||||
|
||||
const tokenText = selectedToken ? 'tokens' : 'ETH'
|
||||
|
||||
return h('div.send-v2__form-header-copy', [
|
||||
return h('div.page-container__header', [
|
||||
|
||||
h('div.send-v2__copy', `Only send ${tokenText} to an Ethereum address.`),
|
||||
h('div.page-container__title', selectedToken ? 'Send Tokens' : 'Send ETH'),
|
||||
|
||||
h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'),
|
||||
|
||||
])
|
||||
}
|
||||
|
||||
SendTransactionScreen.prototype.renderHeader = function () {
|
||||
return h('div', [
|
||||
h('div.send-v2__header', {}, [
|
||||
|
||||
this.renderHeaderIcon(),
|
||||
|
||||
h('div.send-v2__arrow-background', [
|
||||
h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'),
|
||||
]),
|
||||
|
||||
h('div.send-v2__header-tip'),
|
||||
|
||||
]),
|
||||
h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`),
|
||||
|
||||
h(
|
||||
'div.page-container__subtitle',
|
||||
'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'
|
||||
),
|
||||
])
|
||||
}
|
||||
|
||||
@ -504,14 +470,6 @@ 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(),
|
||||
@ -535,14 +493,14 @@ SendTransactionScreen.prototype.renderFooter = function () {
|
||||
|
||||
const noErrors = !amountError && toError === null
|
||||
|
||||
return h('div.send-v2__footer', [
|
||||
h('button.btn-cancel.send-v2__cancel-btn', {
|
||||
return h('div.page-container__footer', [
|
||||
h('button.btn-cancel.page-container__footer-button', {
|
||||
onClick: () => {
|
||||
clearSend()
|
||||
goHome()
|
||||
},
|
||||
}, 'Cancel'),
|
||||
h('button.btn-clear.send-v2__next-btn', {
|
||||
h('button.btn-clear.page-container__footer-button', {
|
||||
disabled: !noErrors || !gasTotal,
|
||||
onClick: event => this.onSubmit(event),
|
||||
}, 'Next'),
|
||||
@ -552,7 +510,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
|
||||
SendTransactionScreen.prototype.render = function () {
|
||||
return (
|
||||
|
||||
h('div.send-v2__container', [
|
||||
h('div.page-container', [
|
||||
|
||||
this.renderHeader(),
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user