diff --git a/CHANGELOG.md b/CHANGELOG.md index e59f7ded3..2bf056b31 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Current Master +- Redesigned init, vault create, vault restore and seed confirmation screens. - Added pending transactions to transaction list on account screen. - Clicking a pending transaction takes you back to the transaction approval screen. diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 650c52cef..f56e9fbc4 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -128,10 +128,11 @@ h2.page-subtitle { textarea.twelve-word-phrase { margin-top: 20px; + padding: 12px; width: 300px; - height: 180px; + height: 140px; font-size: 16px; - background: #FAF6F0; + background: white; resize: none; } @@ -144,20 +145,10 @@ app sections .initialize-screen hr { width: 60px; margin: 12px; - border-color: #F3C83E; + border-color: #F7861C; border-style: solid; } -.initialize-screen input[type="password"], .initialize-screen textarea { - width: 300px; - padding: 6px; - border-radius: 6px; - border-style: solid; - outline: none; - border: 1px solid #F5A623; - background: #FAF6F0; -} - .initialize-screen label { margin-top: 20px; } @@ -258,6 +249,10 @@ input.large-input { height: 36px; } +.letter-spacey { + letter-spacing: 0.1em; +} + /* accounts */ @@ -387,7 +382,6 @@ input.large-input { .send-screen input { width: 100%; font-size: 12px; - letter-spacing: 0.1em; } /* Ether Balance Widget */ diff --git a/ui/app/first-time/create-vault-complete.js b/ui/app/first-time/create-vault-complete.js index cd062effe..7d2db8003 100644 --- a/ui/app/first-time/create-vault-complete.js +++ b/ui/app/first-time/create-vault-complete.js @@ -27,9 +27,23 @@ CreateVaultCompleteScreen.prototype.render = function() { h('.initialize-screen.flex-column.flex-center.flex-grow', [ - // subtitle and nav - h('.section-title.flex-row.flex-center', [ - h('h2.page-subtitle', 'Vault Created'), + // // subtitle and nav + // h('.section-title.flex-row.flex-center', [ + // h('h2.page-subtitle', 'Vault Created'), + // ]), + + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginTop: 36, + marginBottom: 8, + width: '100%', + fontSize: '20px', + padding: 6, + }, + }, [ + 'Vault Created', ]), h('span.error', { // Error for the right red @@ -44,9 +58,12 @@ CreateVaultCompleteScreen.prototype.render = function() { value: seed, }), - h('button.btn-thin', { + h('button.primary', { onClick: () => this.confirmSeedWords(), - }, 'I\'ve copied it somewhere safe.'), + style: { + margin: '24px', + }, + }, 'I\'ve copied it somewhere safe'), ]) ) } diff --git a/ui/app/first-time/create-vault.js b/ui/app/first-time/create-vault.js index d7bf9cd5d..1e963aa5a 100644 --- a/ui/app/first-time/create-vault.js +++ b/ui/app/first-time/create-vault.js @@ -25,56 +25,63 @@ CreateVaultScreen.prototype.render = function() { h('.initialize-screen.flex-column.flex-center.flex-grow', [ - // subtitle and nav - h('.section-title.flex-row.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: this.showInitializeMenu.bind(this), - }), - h('h2.page-subtitle', 'Create Vault'), + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: 24, + width: '100%', + fontSize: '20px', + padding: 6, + }, + }, [ + 'Create Vault', ]), // password - h('label', { - htmlFor: 'password-box', - }, 'Enter Password (min 8 chars):'), - - h('input', { + h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', + placeholder: 'New Password (min 8 chars)', + style: { + width: 260, + marginTop: 12, + }, }), // confirm password - h('label', { - htmlFor: 'password-box-confirm', - }, 'Confirm Password:'), - - h('input', { + h('input.large-input.letter-spacey', { type: 'password', id: 'password-box-confirm', + placeholder: 'Confirm Password', onKeyPress: this.createVaultOnEnter.bind(this), + style: { + width: 260, + marginTop: 16, + }, }), - /* ENTROPY TEXT INPUT CURRENTLY DISABLED - // entropy - h('label', { - htmlFor: 'entropy-text-entry', - }, 'Enter random text (optional)'), + h('.flex-row.flex-space-between', { + style: { + marginTop: 30, + width: '50%', + }, + }, [ - h('textarea', { - id: 'entropy-text-entry', - style: { resize: 'none' }, - onKeyPress: this.createVaultOnEnter.bind(this), - }), - */ + // cancel + h('button.primary', { + onClick: this.showInitializeMenu.bind(this), + }, 'CANCEL'), + + // submit + h('button.primary', { + onClick: this.createNewVault.bind(this), + }, 'OK'), - // submit - h('button.create-vault.btn-thin', { - onClick: this.createNewVault.bind(this), - }, 'OK'), + ]), (!state.inProgress && state.warning) && ( h('span.in-progress-notification', state.warning) - ), state.inProgress && ( diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index 2d54e7e19..197193063 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -50,10 +50,20 @@ InitializeMenuScreen.prototype.renderMenu = function() { animationEventEmitter: this.animationEventEmitter, }), - h('h2.page-subtitle', 'MetaMask'), - - h('button.btn-thin', { + h('h1', { + style: { + fontSize: '1.4em', + textTransform: 'uppercase', + color: '#7F8082', + marginBottom: 20, + }, + }, 'MetaMask'), + + h('button.primary', { onClick: this.showCreateVault.bind(this), + style: { + margin: 12, + }, }, 'Create New Vault'), h('.flex-row.flex-center.flex-grow', [ @@ -62,8 +72,11 @@ InitializeMenuScreen.prototype.renderMenu = function() { h('hr'), ]), - h('button.btn-thin', { + h('button.primary', { onClick: this.showRestoreVault.bind(this), + style: { + margin: 12, + }, }, 'Restore Existing Vault'), ]) diff --git a/ui/app/first-time/restore-vault.js b/ui/app/first-time/restore-vault.js index 55041e8c0..ff3b308c4 100644 --- a/ui/app/first-time/restore-vault.js +++ b/ui/app/first-time/restore-vault.js @@ -25,39 +25,46 @@ RestoreVaultScreen.prototype.render = function() { h('.initialize-screen.flex-column.flex-center.flex-grow', [ - // subtitle and nav - h('.section-title.flex-row.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: this.showInitializeMenu.bind(this), - }), - h('h2.page-subtitle', 'Restore Vault'), + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: 24, + width: '100%', + fontSize: '20px', + padding: 6, + }, + }, [ + 'Restore Vault', ]), // wallet seed entry h('h3', 'Wallet Seed'), - h('textarea.twelve-word-phrase', { + h('textarea.twelve-word-phrase.letter-spacey', { placeholder: 'Enter your secret twelve word phrase here to restore your vault.' }), // password - h('label', { - htmlFor: 'password-box', - }, 'New Password (min 8 chars):'), - - h('input', { + h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', + placeholder: 'New Password (min 8 chars)', + style: { + width: 260, + marginTop: 12, + }, }), // confirm password - h('label', { - htmlFor: 'password-box-confirm', - }, 'Confirm Password:'), - - h('input', { + h('input.large-input.letter-spacey', { type: 'password', id: 'password-box-confirm', + placeholder: 'Confirm Password', onKeyPress: this.onMaybeCreate.bind(this), + style: { + width: 260, + marginTop: 16, + }, }), (state.warning) && ( @@ -65,9 +72,25 @@ RestoreVaultScreen.prototype.render = function() { ), // submit - h('button.btn-thin', { - onClick: this.restoreVault.bind(this), - }, 'I\'ve double checked the 12 word phrase.'), + + h('.flex-row.flex-space-between', { + style: { + marginTop: 30, + width: '50%', + }, + }, [ + + // cancel + h('button.primary', { + onClick: this.showInitializeMenu.bind(this), + }, 'CANCEL'), + + // submit + h('button.primary', { + onClick: this.restoreVault.bind(this), + }, 'OK'), + + ]), ])