diff options
| -rw-r--r-- | ui/app/account-detail.js | 44 | ||||
| -rw-r--r-- | ui/app/app.js | 14 | ||||
| -rw-r--r-- | ui/app/components/editable-label.js | 40 | ||||
| -rw-r--r-- | ui/app/components/identicon.js | 2 | ||||
| -rw-r--r-- | ui/app/components/tooltip.js | 2 | ||||
| -rw-r--r-- | ui/app/components/transaction-list.js | 3 | ||||
| -rw-r--r-- | ui/app/css/index.css | 9 | ||||
| -rw-r--r-- | ui/app/first-time/disclaimer.js | 20 | ||||
| -rw-r--r-- | ui/app/first-time/init-menu.js | 5 | ||||
| -rw-r--r-- | ui/app/keychains/hd/create-vault-complete.js | 8 | ||||
| -rw-r--r-- | ui/app/unlock.js | 8 |
11 files changed, 54 insertions, 101 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index c41ba61fd..d456d125a 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -70,54 +70,43 @@ AccountDetailScreen.prototype.render = function () { // large identicon and addresses h('.identicon-wrapper.select-none', [ h(Identicon, { - diameter: 62, + diameter: 48, address: selected, }), ]), h('flex-column', { style: { + width: '100%', lineHeight: '10px', marginLeft: '15px', }, }, [ h(EditableLabel, { textValue: identity ? identity.name : '', - state: { - isEditingLabel: false, - }, saveText: (text) => { props.dispatch(actions.saveAccountLabel(selected, text)) }, }, [ // What is shown when not editing + edit text: - h('label.editing-label', [h('.edit-text', 'edit')]), h('h2.font-medium.color-forest', {name: 'edit'}, identity && identity.name), ]), h('.flex-row', { style: { - width: '15em', + width: '100%', justifyContent: 'space-between', alignItems: 'baseline', }, }, [ - // address - - h('div', { + // balance + h(EthBalance, { + value: account && account.balance, style: { - overflow: 'hidden', - textOverflow: 'ellipsis', - paddingTop: '3px', - width: '5em', - fontSize: '13px', - fontFamily: 'Montserrat Light', - textRendering: 'geometricPrecision', + lineHeight: '7px', marginTop: '10px', - marginBottom: '15px', - color: '#AEAEAE', }, - }, ethUtil.toChecksumAddress(selected)), + }), // copy and export @@ -171,33 +160,18 @@ AccountDetailScreen.prototype.render = function () { ]), ]), ]), - - // account ballence - ]), ]), h('.flex-row', { style: { - justifyContent: 'space-between', - alignItems: 'flex-start', + justifyContent: 'flex-end', }, }, [ - - h(EthBalance, { - value: account && account.balance, - style: { - lineHeight: '7px', - marginTop: '10px', - }, - }), - h('button', { onClick: () => props.dispatch(actions.buyEthView(selected)), style: { marginBottom: '20px', marginRight: '8px', - position: 'absolute', - left: '219px', }, }, 'BUY'), diff --git a/ui/app/app.js b/ui/app/app.js index 9538a6b93..7da03cdd1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -114,7 +114,6 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: props.isUnlocked ? 'white' : 'none', - height: '36px', position: 'relative', zIndex: 2, }, @@ -127,14 +126,6 @@ App.prototype.renderAppBar = function () { alignItems: 'center', }, }, [ - - // mini logo - h('img', { - height: 24, - width: 24, - src: '/images/icon-128.png', - }), - h(NetworkIndicator, { network: this.props.network, provider: this.props.provider, @@ -149,8 +140,9 @@ App.prototype.renderAppBar = function () { // metamask name h('h1', { style: { - position: 'relative', - left: '9px', + position: 'absolute', + left: '50%', + transform: 'translateX(-50%)', }, }, 'MetaMask'), diff --git a/ui/app/components/editable-label.js b/ui/app/components/editable-label.js index 41936f5e0..14c0294a2 100644 --- a/ui/app/components/editable-label.js +++ b/ui/app/components/editable-label.js @@ -11,40 +11,18 @@ function EditableLabel () { } EditableLabel.prototype.render = function () { - const props = this.props - const state = this.state - - if (state && state.isEditingLabel) { - return h('div.editable-label', [ - h('input.sizing-input', { - defaultValue: props.textValue, - maxLength: '20', - onKeyPress: (event) => { - this.saveIfEnter(event) - }, - }), - h('button.editable-button', { - onClick: () => this.saveText(), - }, 'Save'), - ]) - } else { - return h('div.name-label', { - onClick: (event) => { - this.setState({ isEditingLabel: true }) - }, - }, this.props.children) - } -} - -EditableLabel.prototype.saveIfEnter = function (event) { - if (event.key === 'Enter') { - this.saveText() - } + return h('div.name-label', { + contentEditable: true, + style: { + outline: 'none', + marginTop: '0.5rem', + }, + onInput: (event) => this.saveText(), + }, this.props.children) } EditableLabel.prototype.saveText = function () { - var container = findDOMNode(this) - var text = container.querySelector('.editable-label input').value + var text = findDOMNode(this).textContent.trim() var truncatedText = text.substring(0, 20) this.props.saveText(truncatedText) this.setState({ isEditingLabel: false, textLabel: truncatedText }) diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 6d4871d02..8211867cb 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -12,7 +12,7 @@ inherits(IdenticonComponent, Component) function IdenticonComponent () { Component.call(this) - this.defaultDiameter = 46 + this.defaultDiameter = 32 } IdenticonComponent.prototype.render = function () { diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js index edbc074bb..efab2c497 100644 --- a/ui/app/components/tooltip.js +++ b/ui/app/components/tooltip.js @@ -17,6 +17,6 @@ Tooltip.prototype.render = function () { return h(ReactTooltip, { position: position || 'left', title, - fixed: false, + fixed: true, }, children) } diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index 7e1bedb05..f6a4ed07e 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -79,10 +79,9 @@ TransactionList.prototype.render = function () { height: '100%', }, }, [ - 'No transaction history.', + 'No transaction history', ]), ]), ]) ) } - diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 975a5289b..6ce426094 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -67,7 +67,7 @@ button.spaced { } button:not([disabled]):hover { - transform: scale(1.1); + transform: scale(1.05); } button:not([disabled]):active { transform: scale(0.95); @@ -112,9 +112,7 @@ button.btn-thin { font-size: 13px; } -.app-header { - padding: 6px 8px; -} +.app-header {} .app-header h1 { font-family: 'Montserrat Regular'; @@ -165,9 +163,6 @@ textarea.twelve-word-phrase { } .network-name { - position: absolute; - top: 8px; - left: 60px; width: 5.2em; line-height: 9px; text-rendering: geometricPrecision; diff --git a/ui/app/first-time/disclaimer.js b/ui/app/first-time/disclaimer.js index 819d4a110..ff3d91e7f 100644 --- a/ui/app/first-time/disclaimer.js +++ b/ui/app/first-time/disclaimer.js @@ -29,7 +29,8 @@ DisclaimerScreen.prototype.render = function () { style: { background: '#EBEBEB', color: '#AEAEAE', - marginBottom: 24, + marginTop: 0, + marginBottom: 0, width: '100%', fontSize: '20px', textAlign: 'center', @@ -42,8 +43,8 @@ DisclaimerScreen.prototype.render = function () { h('style', ` .markdown { - font-family: Times New Roman; overflow-x: hidden; + font-weight: lighter; } .markdown h1, .markdown h2, .markdown h3 { margin: 10px 0; @@ -75,10 +76,10 @@ DisclaimerScreen.prototype.render = function () { } }, style: { - background: 'rgb(235, 235, 235)', - height: '310px', - padding: '6px', - width: '80%', + background: 'transparent', + height: '415px', + padding: '0 5px', + width: '100%', overflowY: 'scroll', }, }, [ @@ -91,7 +92,12 @@ DisclaimerScreen.prototype.render = function () { ]), h('button', { - style: { marginTop: '18px' }, + style: { + width: '100%', + position: 'absolute', + bottom: 0, + left: 0, + }, disabled, onClick: () => this.props.dispatch(actions.agreeToDisclaimer()), }, disabled ? 'Scroll Down to Enable' : 'I Agree'), diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index c41aecc48..ee0094f36 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -114,7 +114,10 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { h('button.primary', { onClick: this.createNewVaultAndKeychain.bind(this), style: { - margin: 12, + position: 'absolute', + left: 0, + bottom: 0, + width: '100%', }, }, 'Create'), diff --git a/ui/app/keychains/hd/create-vault-complete.js b/ui/app/keychains/hd/create-vault-complete.js index 7272ebdbd..ae745430c 100644 --- a/ui/app/keychains/hd/create-vault-complete.js +++ b/ui/app/keychains/hd/create-vault-complete.js @@ -35,7 +35,7 @@ CreateVaultCompleteScreen.prototype.render = function () { style: { background: '#EBEBEB', color: '#AEAEAE', - marginTop: 36, + marginTop: 0, marginBottom: 8, width: '100%', fontSize: '20px', @@ -60,8 +60,10 @@ CreateVaultCompleteScreen.prototype.render = function () { h('button.primary', { onClick: () => this.confirmSeedWords(), style: { - margin: '24px', - fontSize: '0.9em', + position: 'absolute', + left: 0, + bottom: 0, + width: '100%', }, }, 'I\'ve copied it somewhere safe'), ]) diff --git a/ui/app/unlock.js b/ui/app/unlock.js index 17416766d..7193a8b2d 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -63,7 +63,10 @@ UnlockScreen.prototype.render = function () { h('button.primary.cursor-pointer', { onClick: this.onSubmit.bind(this), style: { - margin: 10, + position: 'absolute', + bottom: 0, + left: 0, + width: '100%', }, }, 'Unlock'), ]), @@ -72,11 +75,12 @@ UnlockScreen.prototype.render = function () { h('p.pointer', { onClick: () => this.props.dispatch(actions.goBackToInitView()), style: { + marginTop: '1rem', fontSize: '0.8em', color: 'rgb(247, 134, 28)', textDecoration: 'underline', }, - }, 'I forgot my password.'), + }, 'I forgot my password'), ]), ]) ) |