mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 11:46:13 +02: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() {
|
App.prototype.renderGlobalModal = function() {
|
||||||
return h(Modal, {
|
return h(Modal, {
|
||||||
ref: "modalRef",
|
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() {
|
App.prototype.renderSidebar = function() {
|
||||||
|
@ -38,6 +38,9 @@ Modal.prototype.render = function () {
|
|||||||
ref: (ref) => {
|
ref: (ref) => {
|
||||||
this.modalRef = ref
|
this.modalRef = ref
|
||||||
},
|
},
|
||||||
|
modalStyle: {
|
||||||
|
width: '95%',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
this.props.children,
|
this.props.children,
|
||||||
)
|
)
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
@import './footer.scss';
|
@import './footer.scss';
|
||||||
@import './identicon.scss';
|
@import './identicon.scss';
|
||||||
@import './network.scss';
|
@import './network.scss';
|
||||||
|
@import './modal.scss';
|
||||||
@import './newui-sections.scss';
|
@import './newui-sections.scss';
|
||||||
@import './hero-balance.scss';
|
@import './hero-balance.scss';
|
||||||
@import './sections.scss';
|
@import './sections.scss';
|
||||||
|
@ -1,5 +1,62 @@
|
|||||||
.modal {
|
.modal-contents {
|
||||||
// first child - component
|
flex-direction: column;
|
||||||
// second child - background
|
align-items: center;
|
||||||
// boron should provide them, but we need breakpoints
|
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