Merge pull request #228 from MetaMask/i216

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

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.
 

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 */

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'),
     ])
   )
 }

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.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 && (

ui/app/first-time/init-menu.js

@@ -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'),
 
     ])

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'),
+
+      ]),
 
     ])