1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

ui - redesign - init + vault create/restore + seed

This commit is contained in:
kumavis 2016-05-26 15:11:22 -07:00
parent 7f4929a2d2
commit 870e05b240
5 changed files with 128 additions and 74 deletions

View File

@ -128,10 +128,11 @@ h2.page-subtitle {
textarea.twelve-word-phrase { textarea.twelve-word-phrase {
margin-top: 20px; margin-top: 20px;
padding: 12px;
width: 300px; width: 300px;
height: 180px; height: 140px;
font-size: 16px; font-size: 16px;
background: #FAF6F0; background: white;
resize: none; resize: none;
} }
@ -144,20 +145,10 @@ app sections
.initialize-screen hr { .initialize-screen hr {
width: 60px; width: 60px;
margin: 12px; margin: 12px;
border-color: #F3C83E; border-color: #F7861C;
border-style: solid; 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 { .initialize-screen label {
margin-top: 20px; margin-top: 20px;
} }
@ -258,6 +249,10 @@ input.large-input {
height: 36px; height: 36px;
} }
.letter-spacey {
letter-spacing: 0.1em;
}
/* accounts */ /* accounts */
@ -385,7 +380,6 @@ input.large-input {
.send-screen input { .send-screen input {
width: 100%; width: 100%;
font-size: 12px; font-size: 12px;
letter-spacing: 0.1em;
} }
/* Ether Balance Widget */ /* Ether Balance Widget */

View File

@ -27,9 +27,23 @@ CreateVaultCompleteScreen.prototype.render = function() {
h('.initialize-screen.flex-column.flex-center.flex-grow', [ h('.initialize-screen.flex-column.flex-center.flex-grow', [
// subtitle and nav // // subtitle and nav
h('.section-title.flex-row.flex-center', [ // h('.section-title.flex-row.flex-center', [
h('h2.page-subtitle', 'Vault Created'), // 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 h('span.error', { // Error for the right red
@ -44,9 +58,12 @@ CreateVaultCompleteScreen.prototype.render = function() {
value: seed, value: seed,
}), }),
h('button.btn-thin', { h('button.primary', {
onClick: () => this.confirmSeedWords(), onClick: () => this.confirmSeedWords(),
}, 'I\'ve copied it somewhere safe.'), style: {
margin: '24px',
},
}, 'I\'ve copied it somewhere safe'),
]) ])
) )
} }

View File

@ -25,56 +25,63 @@ CreateVaultScreen.prototype.render = function() {
h('.initialize-screen.flex-column.flex-center.flex-grow', [ h('.initialize-screen.flex-column.flex-center.flex-grow', [
// subtitle and nav h('h3.flex-center.text-transform-uppercase', {
h('.section-title.flex-row.flex-center', [ style: {
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { background: '#EBEBEB',
onClick: this.showInitializeMenu.bind(this), color: '#AEAEAE',
}), marginBottom: 24,
h('h2.page-subtitle', 'Create Vault'), width: '100%',
fontSize: '20px',
padding: 6,
},
}, [
'Create Vault',
]), ]),
// password // password
h('label', { h('input.large-input.letter-spacey', {
htmlFor: 'password-box',
}, 'Enter Password (min 8 chars):'),
h('input', {
type: 'password', type: 'password',
id: 'password-box', id: 'password-box',
placeholder: 'New Password (min 8 chars)',
style: {
width: 260,
marginTop: 12,
},
}), }),
// confirm password // confirm password
h('label', { h('input.large-input.letter-spacey', {
htmlFor: 'password-box-confirm',
}, 'Confirm Password:'),
h('input', {
type: 'password', type: 'password',
id: 'password-box-confirm', id: 'password-box-confirm',
placeholder: 'Confirm Password',
onKeyPress: this.createVaultOnEnter.bind(this), onKeyPress: this.createVaultOnEnter.bind(this),
style: {
width: 260,
marginTop: 16,
},
}), }),
/* ENTROPY TEXT INPUT CURRENTLY DISABLED h('.flex-row.flex-space-between', {
// entropy style: {
h('label', { marginTop: 30,
htmlFor: 'entropy-text-entry', width: '50%',
}, 'Enter random text (optional)'), },
}, [
h('textarea', { // cancel
id: 'entropy-text-entry', h('button.primary', {
style: { resize: 'none' }, onClick: this.showInitializeMenu.bind(this),
onKeyPress: this.createVaultOnEnter.bind(this), }, 'CANCEL'),
}),
*/
// submit // submit
h('button.create-vault.btn-thin', { h('button.primary', {
onClick: this.createNewVault.bind(this), onClick: this.createNewVault.bind(this),
}, 'OK'), }, 'OK'),
]),
(!state.inProgress && state.warning) && ( (!state.inProgress && state.warning) && (
h('span.in-progress-notification', state.warning) h('span.in-progress-notification', state.warning)
), ),
state.inProgress && ( state.inProgress && (

View File

@ -50,10 +50,20 @@ InitializeMenuScreen.prototype.renderMenu = function() {
animationEventEmitter: this.animationEventEmitter, animationEventEmitter: this.animationEventEmitter,
}), }),
h('h2.page-subtitle', 'MetaMask'), h('h1', {
style: {
fontSize: '1.4em',
textTransform: 'uppercase',
color: '#7F8082',
marginBottom: 20,
},
}, 'MetaMask'),
h('button.btn-thin', { h('button.primary', {
onClick: this.showCreateVault.bind(this), onClick: this.showCreateVault.bind(this),
style: {
margin: 12,
},
}, 'Create New Vault'), }, 'Create New Vault'),
h('.flex-row.flex-center.flex-grow', [ h('.flex-row.flex-center.flex-grow', [
@ -62,8 +72,11 @@ InitializeMenuScreen.prototype.renderMenu = function() {
h('hr'), h('hr'),
]), ]),
h('button.btn-thin', { h('button.primary', {
onClick: this.showRestoreVault.bind(this), onClick: this.showRestoreVault.bind(this),
style: {
margin: 12,
},
}, 'Restore Existing Vault'), }, 'Restore Existing Vault'),
]) ])

View File

@ -25,39 +25,46 @@ RestoreVaultScreen.prototype.render = function() {
h('.initialize-screen.flex-column.flex-center.flex-grow', [ h('.initialize-screen.flex-column.flex-center.flex-grow', [
// subtitle and nav h('h3.flex-center.text-transform-uppercase', {
h('.section-title.flex-row.flex-center', [ style: {
h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { background: '#EBEBEB',
onClick: this.showInitializeMenu.bind(this), color: '#AEAEAE',
}), marginBottom: 24,
h('h2.page-subtitle', 'Restore Vault'), width: '100%',
fontSize: '20px',
padding: 6,
},
}, [
'Restore Vault',
]), ]),
// wallet seed entry // wallet seed entry
h('h3', 'Wallet Seed'), 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.' placeholder: 'Enter your secret twelve word phrase here to restore your vault.'
}), }),
// password // password
h('label', { h('input.large-input.letter-spacey', {
htmlFor: 'password-box',
}, 'New Password (min 8 chars):'),
h('input', {
type: 'password', type: 'password',
id: 'password-box', id: 'password-box',
placeholder: 'New Password (min 8 chars)',
style: {
width: 260,
marginTop: 12,
},
}), }),
// confirm password // confirm password
h('label', { h('input.large-input.letter-spacey', {
htmlFor: 'password-box-confirm',
}, 'Confirm Password:'),
h('input', {
type: 'password', type: 'password',
id: 'password-box-confirm', id: 'password-box-confirm',
placeholder: 'Confirm Password',
onKeyPress: this.onMaybeCreate.bind(this), onKeyPress: this.onMaybeCreate.bind(this),
style: {
width: 260,
marginTop: 16,
},
}), }),
(state.warning) && ( (state.warning) && (
@ -65,9 +72,25 @@ RestoreVaultScreen.prototype.render = function() {
), ),
// submit // submit
h('button.btn-thin', {
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), onClick: this.restoreVault.bind(this),
}, 'I\'ve double checked the 12 word phrase.'), }, 'OK'),
]),
]) ])