diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js index c55d69964..15341a2e9 100644 --- a/ui/app/components/modals/new-account-modal.js +++ b/ui/app/components/modals/new-account-modal.js @@ -22,59 +22,49 @@ function mapDispatchToProps (dispatch) { } } -inherits(BuyOptions, Component) -function BuyOptions () { +inherits(NewAccountModal, Component) +function NewAccountModal () { Component.call(this) } -module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions) +module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountModal) -// BuyOptions is currently meant to be rendered inside -// It is the only component in this codebase that does so -// It utilizes modal styles -BuyOptions.prototype.render = function () { +NewAccountModal.prototype.render = function () { return h('div', {}, [ - h('div.buy-modal-content.transfers-subview', { + h('div.new-account-modal-wrapper', { }, [ - h('div.buy-modal-content-title-wrapper.flex-column.flex-center', { - style: {}, - }, [ - h('div.buy-modal-content-title', { - style: {}, - }, 'New Account Modal'), - h('div', {}, 'How would you like to buy Ether?'), + h('div', {}, [ + 'New Account', ]), - h('div.buy-modal-content-options.flex-column.flex-center', {}, [ - - h('div.buy-modal-content-option', { - onClick: () => { - const { toCoinbase, address } = this.props - toCoinbase(address) - }, - }, [ - h('div.buy-modal-content-option-title', {}, 'Coinbase'), - h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'), + h('div', {}, [ + h('i.fa.fa-times', {}, [ ]), - - 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', {}, 'Direct Deposit'), - h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'), - ]), - + ]), + + h('div', {}, [ + 'Account Name', ]), - h('button', { - style: { - background: 'white', - }, - onClick: () => { this.props.hideModal() }, - }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')), + h('div', {}, [ + h('input', { + placeholder: 'E.g. My new account' + }, []), + ]), + + h('div', {}, [ + 'or', + ]), + + h('div', {}, [ + 'Import an account', + ]), + + h('div', {}, [ + h('button.btn-clear', {}, [ + 'SAVE', + ]), + ]), ]) ]) } diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 9872f7669..fa073b84a 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -166,10 +166,19 @@ } // Account Details Modal - .account-details-modal-wrapper { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; + position: relative; +} + +// New Account Modal +.new-account-modal-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; } \ No newline at end of file