aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ui/app/app.js89
-rw-r--r--ui/app/css/index.css229
-rw-r--r--ui/app/css/lib.css4
-rw-r--r--ui/app/first-time/init-menu.js4
-rw-r--r--ui/app/unlock.js18
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),
}),
generated by cgit (git 2.34.1) at 2024-10-15 00:27:35 +0800