Hide ShapeShift and Fix Modal Stylings

2 files changed, 52 insertions, 13 deletions

diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index a8033d288..f1a5aa9fd 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -57,13 +57,13 @@ BuyOptions.prototype.render = function () {
           h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
         ]),
 
-        h('div.buy-modal-content-option', {}, [
-          h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
-        ]),
+        // h('div.buy-modal-content-option', {}, [
+        //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+        //   h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        // ]),
 
         h('div.buy-modal-content-option', {
-          onClick: () => this.goToAccountDetailsModal()
+          onClick: () => this.goToAccountDetailsModal(),
         }, [
           h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
           h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 138efc3ea..2bd56fb0a 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -17,15 +17,25 @@ const NewAccountModal = require('./new-account-modal')
 const accountModalStyle = {
   mobileModalStyle: {
     width: '95%',
-    top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
     boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     borderRadius: '4px',
+    top: '10%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
   },
   laptopModalStyle: {
     width: '360px',
-    top: 'calc(33% + 45px)',
+    // top: 'calc(33% + 45px)',
     boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     borderRadius: '4px',
+    top: '10%',
+    transform: 'none',
+    left: '0',
+    right: '0',
+    margin: '0 auto',
   },
   contentStyle: {
     borderRadius: '4px',
@@ -39,14 +49,23 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
       boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      top: '10%',
     },
     laptopModalStyle: {
       width: '66%',
       maxWidth: '550px',
-      top: 'calc(30% + 10px)',
+      top: 'calc(10% + 10px)',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
       boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
+      transform: 'none',
     },
   },
 
@@ -56,13 +75,23 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      // top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      top: '10%',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
     },
     laptopModalStyle: {
       width: '375px',
-      top: 'calc(30% + 10px)',
+      // top: 'calc(30% + 10px)',
+      top: '10%',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
     },
   },
 
@@ -86,11 +115,21 @@ const MODALS = {
     ],
     mobileModalStyle: {
       width: '95%',
-      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+      top: '10%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
     },
     laptopModalStyle: {
       width: '449px',
-      top: 'calc(33% + 45px)',
+      // top: 'calc(33% + 45px)',
+      top: '10%',
+      transform: 'none',
+      left: '0',
+      right: '0',
+      margin: '0 auto',
     },
   },