From 49e08f9013572e7168f258000ae20b35f337f969 Mon Sep 17 00:00:00 2001 From: kumavis Date: Fri, 13 May 2016 18:07:47 -0700 Subject: [PATCH] ui - redesign - unlock menu --- ui/app/app.js | 89 ++++++------- ui/app/css/index.css | 229 +++++++-------------------------- ui/app/css/lib.css | 4 +- ui/app/first-time/init-menu.js | 4 +- ui/app/unlock.js | 18 ++- 5 files changed, 111 insertions(+), 233 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index bd4249956..68d34e52f 100644 --- a/ui/app/app.js +++ b/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 diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 18d921700..860491a3d 100644 --- a/ui/app/css/index.css +++ b/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; - } diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css index 22e578ec6..c366a5d5f 100644 --- a/ui/app/css/lib.css +++ b/ui/app/css/lib.css @@ -5,7 +5,7 @@ } .color-forest { - color: #08525D; + color: #0A5448; } /* lib */ @@ -175,4 +175,4 @@ hr.horizontal-line { border-top: 1px solid #ccc; margin: 1em 0; padding: 0; -} \ No newline at end of file +} diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index 6ea2eec90..2d54e7e19 100644 --- a/ui/app/first-time/init-menu.js +++ b/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'), diff --git a/ui/app/unlock.js b/ui/app/unlock.js index 8aac1b1ff..512906c67 100644 --- a/ui/app/unlock.js +++ b/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), }),