m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-23 03:36:18 +02:00
Code

Move inline styles out into explicitly named BEM classes

Browse Source
This commit is contained in:
sdtsui 2017-08-08 17:51:06 -07:00
parent e260ab46cb
commit b97dcf09ac
3 changed files with 79 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
ui/app/app.js
View File

@ -134,51 +134,40 @@ App.prototype.renderGlobalModal = function() {
return h(Modal, { return h(Modal, {
ref: "modalRef", ref: "modalRef",
}, [ }, [
h('div.modal-contents.transfers-subview', { h('div.modal-content.transfers-subview', {
}, [ }, [
h('div.flex-column.flex-center', { h('div.modal-content-title-wrapper.flex-column.flex-center', {
style: { style: {},
justifyContent: 'space-around',
width: '100%',
height: '100px',
},
}, [ }, [
h('div', { h('div.modal-content-title', {
style: { style: {},
fontSize: '26px',
marginTop: '15px',
},
}, 'Transfers'), }, 'Transfers'),
h('div', {}, 'How would you like to buy Ether?'), h('div', {}, 'How would you like to buy Ether?'),
]), ]),
h('div.buy-options.flex-column.flex-center', {}, [ h('div.modal-content-options.flex-column.flex-center', {}, [
h('div.buy-option', {}, [ h('div.modal-content-option', {}, [
h('div.buy-option-title', {}, 'Coinbase'), h('div.modal-content-option-title', {}, 'Coinbase'),
h('div.buy-option-subtitle', {}, 'Buy with Fiat'), h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
]), ]),
h('div.buy-option', {}, [ h('div.modal-content-option', {}, [
h('div.buy-option-title', {}, 'Shapeshift'), h('div.modal-content-option-title', {}, 'Shapeshift'),
h('div.buy-option-subtitle', {}, 'Trade any digital asset for any other'), h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
]), ]),
h('div.buy-option', {}, [ h('div.modal-content-option', {}, [
h('div.buy-option-title', {}, 'Coinbase'), h('div.modal-content-option-title', {}, 'Coinbase'),
h('div.buy-option-subtitle', {}, 'Deposit from another account'), h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
]), ]),
]), ]),
h('div', { h('div.modal-content-footer', {
style: { style: {},
textTransform: 'uppercase',
width: '100%',
height: '50px',
}
}, 'Cancel'), }, 'Cancel'),
]) ])
]) ])

15
ui/app/components/modal.js
View File

@ -1,4 +1,5 @@
const Component = require('react').Component const Component = require('react').Component
const h = require('react-hyperscript') const h = require('react-hyperscript')
const inherits = require('util').inherits const inherits = require('util').inherits
const connect = require('react-redux').connect const connect = require('react-redux').connect
@ -6,6 +7,7 @@ const connect = require('react-redux').connect
// const PropTypes from 'prop-types' // const PropTypes from 'prop-types'
const FadeModal = require('boron').FadeModal const FadeModal = require('boron').FadeModal
const actions = require('../actions') const actions = require('../actions')
const isMobileView = require('../../lib/is-mobile-view')
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
@ -30,6 +32,15 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal)
Modal.prototype.render = function () { Modal.prototype.render = function () {
const mobileModalStyles = {
width: '95%',
}
const laptopModalStyles = {
width: '66%',
top: '30%',
}
return h(FadeModal, return h(FadeModal,
{ {
className: 'modal', className: 'modal',
@ -38,9 +49,7 @@ Modal.prototype.render = function () {
ref: (ref) => { ref: (ref) => {
this.modalRef = ref this.modalRef = ref
}, },
modalStyle: { modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles,
width: '95%',
},
}, },
this.props.children, this.props.children,
) )

66
ui/app/css/itcss/components/modal.scss
View File

@ -1,4 +1,4 @@
.modal-contents { .modal-content {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -7,12 +7,29 @@
} }
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {
.buy-options { .modal-content-title-wrapper {
justify-content: space-around;
width: 100%;
height: 100px;
}
.modal-content.title {
font-size: 26px;
margin-top: 15px;
}
.modal-content-options {
flex-direction: column; flex-direction: column;
padding: 5% 33%; padding: 5% 33%;
} }
div.buy-option { .modal-content-footer {
text-transform: uppercase;
width: 100%;
height: 50px;
}
div.modal-content-option {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 80vw; width: 80vw;
@ -24,39 +41,56 @@
padding: 0% 7%; padding: 0% 7%;
justify-content: space-around; justify-content: space-around;
div.buy-option-title { div.modal-content-option-title {
font-size: 20px; font-size: 20px;
} }
div.buy-option-subtitle { div.modal-content-option-subtitle {
font-size: 16px; font-size: 16px;
} }
} }
} }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
.buy-options { .modal-content-title-wrapper {
justify-content: space-around;
width: 100%;
height: 100px;
}
.modal-content.title {
font-size: 26px;
margin-top: 15px;
}
.modal-content-footer {
text-transform: uppercase;
width: 100%;
height: 50px;
}
.modal-content-options {
flex-direction: row; flex-direction: row;
} }
div.buy-option { div.modal-content-option {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 150px; width: 20vw;
height: 135px; height: 18vw;
text-align: center; text-align: center;
border-radius: 6px; border-radius: 6px;
border: 1px solid black; border: 1px solid black;
padding: 0% 7%; margin: 0px .5vw;
justify-content: space-around;
div.buy-option-title { div.modal-content-option-title {
font-size: 1.55em; font-size: 20px;
margin-top: 22%;
} }
div.buy-option-subtitle { div.modal-content-option-subtitle {
font-size: 0.95em; font-size: 16px;
margin-top: 15%; padding: 0px 20px;
} }
} }
} }