aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--CHANGELOG.md1
-rw-r--r--ui/app/css/index.css22
-rw-r--r--ui/app/first-time/create-vault-complete.js27
-rw-r--r--ui/app/first-time/create-vault.js71
-rw-r--r--ui/app/first-time/init-menu.js21
-rw-r--r--ui/app/first-time/restore-vault.js63
6 files changed, 130 insertions, 75 deletions
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'),
+
+ ]),
])
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-17 11:01:28 +0800