Move inline styles out into explicitly named BEM classes

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'),
     ])
   ])

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,
   )

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;
     }
   }
 }