ui - redesign - unlock menu

ui/app/app.js

@@ -50,15 +50,6 @@ App.prototype.render = function() {
   var state = this.props
   var view = state.currentView.name
   var transForward = state.transForward
-  var shouldHaveFooter = true
-  switch (view) {
-    case 'restoreVault':
-      shouldHaveFooter = false;
-    case 'createVault':
-      shouldHaveFooter = false;
-    case 'createVaultComplete':
-      shouldHaveFooter = false;
-  }
 
   return (
 
@@ -67,34 +58,12 @@ App.prototype.render = function() {
         // Windows was showing a vertical scroll bar:
         overflow: 'hidden',
       }
-    },
-    [
+    }, [
 
       h(LoadingIndicator),
 
       // app bar
-      h('.app-header.flex-row.flex-space-between', {
-        style: {
-          alignItems: 'center',
-        }
-      }, [
-
-        // mini logo
-        h('img', {
-          height: 24,
-          width: 24,
-          src: '/images/icon-128.png',
-        }),
-
-        // metamask name
-        h('h1', 'MetaMask'),
-
-        // hamburger
-        h('i.fa.fa-bars.cursor-pointer.color-orange', {
-          onClick: (event) => state.dispatch(actions.showConfigPage()),
-        }),
-
-      ]),
+      this.renderAppBar(),
 
       // panel content
       h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
@@ -153,16 +122,38 @@ App.prototype.render = function() {
   )
 }
 
-App.prototype.toggleMetamaskActive = function(){
-  if (!this.props.isUnlocked) {
-    // currently inactive: redirect to password box
-    var passwordBox = document.querySelector('input[type=password]')
-    if (!passwordBox) return
-    passwordBox.focus()
-  } else {
-    // currently active: deactivate
-    this.props.dispatch(actions.lockMetamask(false))
-  }
+App.prototype.renderAppBar = function(){
+  var state = this.props
+
+  return (
+
+    h('.app-header.flex-row.flex-space-between', {
+      style: {
+        alignItems: 'center',
+        visibility: state.isUnlocked ? 'visibile' : 'none',
+        background: state.isUnlocked ? 'white' : 'none',
+        height: '36px',
+      },
+    }, state.isUnlocked && [
+
+      // mini logo
+      h('img', {
+        height: 24,
+        width: 24,
+        src: '/images/icon-128.png',
+      }),
+
+      // metamask name
+      h('h1', 'MetaMask'),
+
+      // hamburger
+      h('i.fa.fa-bars.cursor-pointer.color-orange', {
+        onClick: (event) => state.dispatch(actions.showConfigPage()),
+      }),
+
+    ])
+
+  )
 }
 
 App.prototype.renderPrimary = function(state){
@@ -231,6 +222,18 @@ App.prototype.renderPrimary = function(state){
    }
 }
 
+App.prototype.toggleMetamaskActive = function(){
+  if (!this.props.isUnlocked) {
+    // currently inactive: redirect to password box
+    var passwordBox = document.querySelector('input[type=password]')
+    if (!passwordBox) return
+    passwordBox.focus()
+  } else {
+    // currently active: deactivate
+    this.props.dispatch(actions.lockMetamask(false))
+  }
+}
+
 App.prototype.hasPendingTxs = function() {
   var state = this.props
   var unconfTxs = state.unconfTxs

ui/app/css/index.css

@@ -18,6 +18,11 @@ html, body {
   color: #4D4D4D;
   font-weight: 300;
   line-height: 1.4em;
+  background: #F7F7F7;
+}
+
+input:focus {
+  outline: none;
 }
 
 #app-content {
@@ -47,17 +52,7 @@ button:active {
   transform: scale(0.95);
 }
 
-button.primary {
-  margin: 10px;
-  padding: 6px;
-  border: none;
-  border-radius: 3px;
-  background: #F7861C;
-  font-weight: 500;
-  color: white;
-}
-
-input, textarea {
+/*input, textarea {
   width: 300px;
   padding: 6px;
   border-radius: 6px;
@@ -65,7 +60,7 @@ input, textarea {
   outline: none;
   border: 1px solid #F5A623;
   background: #FAF6F0;
-}
+}*/
 
 a {
   text-decoration: none;
@@ -84,6 +79,17 @@ app
   color: #909090;
 }
 
+button.primary {
+  margin: 10px;
+  padding: 8px 12px;
+  background: #F7861C;
+  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
+  color: white;
+  font-size: 1.1em;
+  font-family: 'Transat Standard';
+  text-transform: uppercase;
+}
+
 button.btn-thin {
   border: 1px solid;
   border-color: #4D4D4D;
@@ -115,7 +121,7 @@ h2.page-subtitle {
 }
 
 .app-primary {
-  background: #F7F7F7;
+
 }
 
 .app-footer {
@@ -217,23 +223,41 @@ app sections
   margin: -2px 8px 0px -8px;
 }
 
-.unlock-screen label {
-  color: #F3C83E;
-  font-weight: 500;
+.unlock-screen #metamask-mascot-container {
+  margin-top: 24px;
+}
+
+.unlock-screen h1 {
+  margin-top: -28px;
+  margin-bottom: 42px;
 }
 
 .unlock-screen input[type=password] {
-  width: 60%;
-  height: 22px;
-  padding: 2px;
-  border-radius: 4px;
-  border: 2px solid #F3C83E;
-  background: #FAF6F0;
+  width: 260px;
+  height: 36px;
+  margin-bottom: 24px;
+  padding: 8px;
 }
 
-.unlock-screen input[type=password]:focus {
-  outline: none;
-  border: 3px solid #F3C83E;
+/* Webkit */
+.password-box::-webkit-input-placeholder {
+  text-align: center;
+  font-size: 1.2em;
+}
+/* Firefox 18- */
+.password-box:-moz-placeholder {
+  text-align: center;
+  font-size: 1.2em;
+}
+/* Firefox 19+ */
+.password-box::-moz-placeholder {
+  text-align: center;
+  font-size: 1.2em;
+}
+/* IE */
+.password-box:-ms-input-placeholder {
+  text-align: center;
+  font-size: 1.2em;
 }
 
 /* accounts */
@@ -251,7 +275,6 @@ app sections
 }
 
 .accounts-list-option:hover {
-  background: pink;
   transform: scale(1.1);
 }
 
@@ -346,157 +369,3 @@ app sections
   background: #FAF6F0;
 }
 
-
-/*
-react toggle
-*/
-
-/* overrides */
-
-.react-toggle-track-check {
-  display: none;
-}
-.react-toggle-track-x {
-  display: none;
-}
-
-/* modified original */
-
-.react-toggle {
-  display: inline-block;
-  position: relative;
-  cursor: pointer;
-  background-color: transparent;
-  border: 0;
-  padding: 0;
-
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.react-toggle-screenreader-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.react-toggle--disabled {
-  opacity: 0.5;
-  -webkit-transition: opacity 0.25s;
-  transition: opacity 0.25s;
-}
-
-.react-toggle-track {
-  width: 50px;
-  height: 24px;
-  padding: 0;
-  border-radius: 30px;
-  background-color: #4D4D4D;
-  -webkit-transition: all 0.2s ease;
-  -moz-transition: all 0.2s ease;
-  transition: all 0.2s ease;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: #000000;
-}
-
-.react-toggle--checked .react-toggle-track {
-  background-color: rgb(255, 174, 41);
-}
-
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background-color: rgb(243, 151, 0);
-}
-
-.react-toggle-track-check {
-  position: absolute;
-  width: 14px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin-top: auto;
-  margin-bottom: auto;
-  line-height: 0;
-  left: 8px;
-  opacity: 0;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-check {
-  opacity: 1;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle-track-x {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin-top: auto;
-  margin-bottom: auto;
-  line-height: 0;
-  right: 10px;
-  opacity: 1;
-  -webkit-transition: opacity 0.25s ease;
-  -moz-transition: opacity 0.25s ease;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-x {
-  opacity: 0;
-}
-
-.react-toggle-thumb {
-  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 22px;
-  height: 22px;
-  border: 1px solid #4D4D4D;
-  border-radius: 50%;
-  background-color: #FAFAFA;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  -webkit-transition: all 0.25s ease;
-  -moz-transition: all 0.25s ease;
-  transition: all 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-thumb {
-  left: 27px;
-  border-color: #828282;
-}
-/*
-      .react-toggle--focus .react-toggle-thumb {
-        -webkit-box-shadow: 0px 0px 3px 2px #0099E0;
-        -moz-box-shadow: 0px 0px 3px 2px #0099E0;
-        box-shadow: 0px 0px 2px 3px #0099E0;
-      }
-
-      .react-toggle:active .react-toggle-thumb {
-        -webkit-box-shadow: 0px 0px 5px 5px #0099E0;
-        -moz-box-shadow: 0px 0px 5px 5px #0099E0;
-        box-shadow: 0px 0px 5px 5px #0099E0;
-      }

ui/app/css/lib.css

@@ -5,7 +5,7 @@
 }
 
 .color-forest {
-  color: #08525D; 
+  color: #0A5448; 
 }
 
 /* lib */

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

@@ -46,12 +46,12 @@ InitializeMenuScreen.prototype.renderMenu = function() {
 
     h('.initialize-screen.flex-column.flex-center.flex-grow', [
 
-      h('h2.page-subtitle', 'Welcome!'),
-
       h(Mascot, {
         animationEventEmitter: this.animationEventEmitter,
       }),
 
+      h('h2.page-subtitle', 'MetaMask'),
+
       h('button.btn-thin', {
         onClick: this.showCreateVault.bind(this),
       }, 'Create New Vault'),

ui/app/unlock.js

@@ -29,19 +29,25 @@ UnlockScreen.prototype.render = function() {
 
     h('.unlock-screen.flex-column.flex-center.flex-grow', [
 
-      h('h2.page-subtitle', 'Welcome!'),
-
       h(Mascot, {
         animationEventEmitter: this.animationEventEmitter,
       }),
 
-      h('label', {
-        htmlFor: 'password-box',
-      }, 'Enter Password:'),
+      h('h1', {
+        style: {
+          fontSize: '1.4em',
+          textTransform: 'uppercase',
+          color: '#7F8082',
+        },
+      }, 'MetaMask'),
 
-      h('input', {
+      h('input.password-box', {
         type: 'password',
         id: 'password-box',
+        placeholder: 'enter password',
+        style: {
+
+        },
         onKeyPress: this.onKeyPress.bind(this),
         onInput: this.inputChanged.bind(this),
       }),