From b97dcf09ac56a2dba30c62c01244100de453a1e2 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 17:51:06 -0700 Subject: [PATCH] Move inline styles out into explicitly named BEM classes --- ui/app/app.js | 45 +++++++----------- ui/app/components/modal.js | 15 ++++-- ui/app/css/itcss/components/modal.scss | 66 +++++++++++++++++++------- 3 files changed, 79 insertions(+), 47 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index e842d6297..6ab793524 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -134,51 +134,40 @@ App.prototype.renderGlobalModal = function() { return h(Modal, { ref: "modalRef", }, [ - h('div.modal-contents.transfers-subview', { + h('div.modal-content.transfers-subview', { }, [ - h('div.flex-column.flex-center', { - style: { - justifyContent: 'space-around', - width: '100%', - height: '100px', - }, + h('div.modal-content-title-wrapper.flex-column.flex-center', { + style: {}, }, [ - h('div', { - style: { - fontSize: '26px', - marginTop: '15px', - }, + h('div.modal-content-title', { + style: {}, }, 'Transfers'), 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.buy-option-title', {}, 'Coinbase'), - h('div.buy-option-subtitle', {}, 'Buy with Fiat'), + h('div.modal-content-option', {}, [ + h('div.modal-content-option-title', {}, 'Coinbase'), + h('div.modal-content-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.modal-content-option', {}, [ + h('div.modal-content-option-title', {}, 'Shapeshift'), + h('div.modal-content-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.modal-content-option', {}, [ + h('div.modal-content-option-title', {}, 'Coinbase'), + h('div.modal-content-option-subtitle', {}, 'Deposit from another account'), ]), ]), - h('div', { - style: { - textTransform: 'uppercase', - width: '100%', - height: '50px', - } + h('div.modal-content-footer', { + style: {}, }, 'Cancel'), ]) ]) diff --git a/ui/app/components/modal.js b/ui/app/components/modal.js index bcc2ead44..2339ee497 100644 --- a/ui/app/components/modal.js +++ b/ui/app/components/modal.js @@ -1,4 +1,5 @@ const Component = require('react').Component + const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect @@ -6,6 +7,7 @@ const connect = require('react-redux').connect // const PropTypes from 'prop-types' const FadeModal = require('boron').FadeModal const actions = require('../actions') +const isMobileView = require('../../lib/is-mobile-view') function mapStateToProps (state) { return { @@ -30,6 +32,15 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(Modal) Modal.prototype.render = function () { + const mobileModalStyles = { + width: '95%', + } + + const laptopModalStyles = { + width: '66%', + top: '30%', + } + return h(FadeModal, { className: 'modal', @@ -38,9 +49,7 @@ Modal.prototype.render = function () { ref: (ref) => { this.modalRef = ref }, - modalStyle: { - width: '95%', - }, + modalStyle: isMobileView() ? mobileModalStyles : laptopModalStyles, }, this.props.children, ) diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 37d866983..4db560b21 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -1,4 +1,4 @@ -.modal-contents { +.modal-content { flex-direction: column; align-items: center; justify-content: center; @@ -7,12 +7,29 @@ } @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; padding: 5% 33%; } - div.buy-option { + .modal-content-footer { + text-transform: uppercase; + width: 100%; + height: 50px; + } + + div.modal-content-option { display: flex; flex-direction: column; width: 80vw; @@ -24,39 +41,56 @@ padding: 0% 7%; justify-content: space-around; - div.buy-option-title { + div.modal-content-option-title { font-size: 20px; } - div.buy-option-subtitle { + div.modal-content-option-subtitle { font-size: 16px; } } } @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; } - div.buy-option { + div.modal-content-option { display: flex; flex-direction: column; - width: 150px; - height: 135px; + width: 20vw; + height: 18vw; text-align: center; border-radius: 6px; border: 1px solid black; - padding: 0% 7%; + margin: 0px .5vw; + justify-content: space-around; - div.buy-option-title { - font-size: 1.55em; - margin-top: 22%; + div.modal-content-option-title { + font-size: 20px; } - div.buy-option-subtitle { - font-size: 0.95em; - margin-top: 15%; + div.modal-content-option-subtitle { + font-size: 16px; + padding: 0px 20px; } } }