mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Implement modal content for buy flow - mobile view
This commit is contained in:
parent
922a272e81
commit
928adae104
@ -133,7 +133,55 @@ App.prototype.render = function () {
|
||||
App.prototype.renderGlobalModal = function() {
|
||||
return h(Modal, {
|
||||
ref: "modalRef",
|
||||
}, ['test modal'])
|
||||
}, [
|
||||
h('div.modal-contents.transfers-subview', {
|
||||
|
||||
}, [
|
||||
h('div.flex-column.flex-center', {
|
||||
style: {
|
||||
justifyContent: 'space-around',
|
||||
width: '100%',
|
||||
height: '100px',
|
||||
},
|
||||
}, [
|
||||
h('div', {
|
||||
style: {
|
||||
fontSize: '26px',
|
||||
marginTop: '15px',
|
||||
},
|
||||
}, 'Transfers'),
|
||||
h('div', {}, 'How would you like to buy Ether?'),
|
||||
]),
|
||||
|
||||
h('div.buy-options.flex-column.flex-center', {}, [
|
||||
|
||||
h('div.buy-option', {}, [
|
||||
h('div.buy-option-title', {}, 'Coinbase'),
|
||||
h('div.buy-option-subtitle', {}, 'Buy with Fiat'),
|
||||
|
||||
]),
|
||||
|
||||
h('div.buy-option', {}, [
|
||||
h('div.buy-option-title', {}, 'Shapeshift'),
|
||||
h('div.buy-option-subtitle', {}, 'Trade any digital asset for any other'),
|
||||
]),
|
||||
|
||||
h('div.buy-option', {}, [
|
||||
h('div.buy-option-title', {}, 'Coinbase'),
|
||||
h('div.buy-option-subtitle', {}, 'Deposit from another account'),
|
||||
]),
|
||||
|
||||
]),
|
||||
|
||||
h('div', {
|
||||
style: {
|
||||
textTransform: 'uppercase',
|
||||
width: '100%',
|
||||
height: '50px',
|
||||
}
|
||||
}, 'Cancel'),
|
||||
])
|
||||
])
|
||||
}
|
||||
|
||||
App.prototype.renderSidebar = function() {
|
||||
|
@ -38,6 +38,9 @@ Modal.prototype.render = function () {
|
||||
ref: (ref) => {
|
||||
this.modalRef = ref
|
||||
},
|
||||
modalStyle: {
|
||||
width: '95%',
|
||||
},
|
||||
},
|
||||
this.props.children,
|
||||
)
|
||||
|
@ -3,6 +3,7 @@
|
||||
@import './footer.scss';
|
||||
@import './identicon.scss';
|
||||
@import './network.scss';
|
||||
@import './modal.scss';
|
||||
@import './newui-sections.scss';
|
||||
@import './hero-balance.scss';
|
||||
@import './sections.scss';
|
||||
|
@ -1,5 +1,62 @@
|
||||
.modal {
|
||||
// first child - component
|
||||
// second child - background
|
||||
// boron should provide them, but we need breakpoints
|
||||
}
|
||||
.modal-contents {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-family: 'DIN OT';
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.buy-options {
|
||||
flex-direction: column;
|
||||
padding: 5% 33%;
|
||||
}
|
||||
|
||||
div.buy-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 80vw;
|
||||
height: 15vh;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid black;
|
||||
padding: 0% 7%;
|
||||
justify-content: space-around;
|
||||
|
||||
div.buy-option-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
div.buy-option-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
.buy-options {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div.buy-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 150px;
|
||||
height: 135px;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid black;
|
||||
padding: 0% 7%;
|
||||
|
||||
div.buy-option-title {
|
||||
font-size: 1.55em;
|
||||
margin-top: 22%;
|
||||
}
|
||||
|
||||
div.buy-option-subtitle {
|
||||
font-size: 0.95em;
|
||||
margin-top: 15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user