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