Implement modal content for buy flow - mobile view

4 files changed, 115 insertions, 6 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 71e767b91..e842d6297 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -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() {
diff --git a/ui/app/components/modal.js b/ui/app/components/modal.js
index b008a56d2..bcc2ead44 100644
--- a/ui/app/components/modal.js
+++ b/ui/app/components/modal.js
@@ -38,6 +38,9 @@ Modal.prototype.render = function () {
       ref: (ref) => {
         this.modalRef = ref
       },
+      modalStyle: {
+        width: '95%',
+      },
     },
     this.props.children,
   )
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 8b6698eed..2385866c1 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -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';
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 74e551ab7..37d866983 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -1,5 +1,62 @@
-.modal {
-  // first child - component
-  // second child - background
-  //  boron should provide them, but we need breakpoints
-}
\ No newline at end of file
+.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%;
+    }
+  }
+}