Add wrapper CSS for AccountDetailsModal

3 files changed, 45 insertions, 32 deletions

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 38d08314b..104d2c6ed 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -30,44 +30,40 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
 // It utilizes modal styles
 AccountDetailsModal.prototype.render = function () {
   return h('div', {}, [
-    h('div.buy-modal-content.transfers-subview', {
+    h('div.account-details-modal-wrapper', {
     }, [
-      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
-        style: {},
-      }, [
-        h('div.buy-modal-content-title', {
-          style: {},
-        }, 'Account Details Modal'),
-        h('div', {}, 'How would you like to buy Ether?'),
+
+      h('div', {}, [
+        'ICON',
       ]),
 
-      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
+      h('div', {}, [
+        'X',
+      ]),
 
-        h('div.buy-modal-content-option', {
-          onClick: () => {},
-        }, [
-          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
-        ]),
+      h('div', {}, [
+      ]),
 
-        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', {}, [
+        'QR Code',
+      ]),
 
-        h('div.buy-modal-content-option', {}, [
-          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
-        ]),
+      h('div', {}, [
+        'Account Display',
+      ]),
+
+      h('div', {}, [
+        'divider',
+      ]),
+
+      h('div', {}, [
+        'View aCcount on etherscan',
+      ]),
 
+      h('div', {}, [
+        'export private key',
       ]),
 
-      h('button', {
-        style: {
-          background: 'white',
-        },
-        onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index e2c5f77cc..842c4ed51 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -40,7 +40,7 @@ const MODALS = {
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     },
     laptopModalStyle: {
-      width: '45%',
+      width: '375px',
       top: 'calc(30% + 10px)',
       boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
     },
@@ -50,8 +50,16 @@ const MODALS = {
     contents: [
       h(AccountDetailsModal, {}, []),
     ],
-    mobileModalStyle: {},
-    laptopModalStyle: {},
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '48vh' : '36.5vh',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
+    laptopModalStyle: {
+      width: '360px',
+      top: 'calc(30% + 10px)',
+      boxShadow: 'rgba(0, 0, 0, 0.15) 0px 2px 2px 2px',
+    },
   },
 
   NEW_ACCOUNT: {
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index c8bd1fb85..9872f7669 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -164,3 +164,12 @@
   padding: 10px;
   font-size: 18px;
 }
+
+// Account Details Modal
+
+.account-details-modal-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
\ No newline at end of file