mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +01:00
ui - redesign - init + vault create/restore + seed
This commit is contained in:
kumavis
parent
7f4929a2d2
commit
870e05b240
@ -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 */
|
||||
@ -385,7 +380,6 @@ input.large-input {
|
||||
.send-screen input {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* Ether Balance Widget */
|
||||
|
||||
@ -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'),
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
@ -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.create-vault.btn-thin', {
|
||||
onClick: this.createNewVault.bind(this),
|
||||
}, 'OK'),
|
||||
// submit
|
||||
h('button.primary', {
|
||||
onClick: this.createNewVault.bind(this),
|
||||
}, 'OK'),
|
||||
|
||||
]),
|
||||
|
||||
(!state.inProgress && state.warning) && (
|
||||
h('span.in-progress-notification', state.warning)
|
||||
|
||||
),
|
||||
|
||||
state.inProgress && (
|
||||
|
||||
@ -50,10 +50,20 @@ InitializeMenuScreen.prototype.renderMenu = function() {
|
||||
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),
|
||||
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'),
|
||||
|
||||
])
|
||||
|
||||
@ -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'),
|
||||
|
||||
]),
|
||||
|
||||
])
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user