Add wrapper CSS for NewAccountModal

ui/app/components/modals/new-account-modal.js

@@ -22,59 +22,49 @@ function mapDispatchToProps (dispatch) {
   }
 }
 
-inherits(BuyOptions, Component)
+inherits(NewAccountModal, Component)
-function BuyOptions () {
+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 <Modal />
+NewAccountModal.prototype.render = function () {
-// It is the only component in this codebase that does so
-// It utilizes modal styles
-BuyOptions.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', {
+      h('div', {}, [
-        style: {},
+        'New Account',
-      }, [
-        h('div.buy-modal-content-title', {
-          style: {},
-        }, 'New Account Modal'),
-        h('div', {}, 'How would you like to buy Ether?'),
       ]),
 
-      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
+      h('div', {}, [
-
+        h('i.fa.fa-times', {}, [
-        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.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('button', {
+      h('div', {}, [
-        style: {
+        'Account Name',
-          background: 'white',
+      ]),
-        },
+
-        onClick: () => { this.props.hideModal() },
+      h('div', {}, [
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
+        h('input', {
+          placeholder: 'E.g. My new account'
+        }, []),
+      ]),
+
+      h('div', {}, [
+        'or',
+      ]),
+
+      h('div', {}, [
+        'Import an account',
+      ]),
+
+      h('div', {}, [
+        h('button.btn-clear', {}, [
+          'SAVE',
+        ]),
+      ]),
     ])
   ])
 }

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;
 }