diff options
Diffstat (limited to 'ui')
| -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, 101 insertions, 54 deletions
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index d456d125a..c41ba61fd 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -70,43 +70,54 @@ AccountDetailScreen.prototype.render = function () { // large identicon and addresses h('.identicon-wrapper.select-none', [ h(Identicon, { - diameter: 48, + diameter: 62, 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: '100%', + width: '15em', justifyContent: 'space-between', alignItems: 'baseline', }, }, [ - // balance - h(EthBalance, { - value: account && account.balance, + // address + + h('div', { style: { - lineHeight: '7px', + overflow: 'hidden', + textOverflow: 'ellipsis', + paddingTop: '3px', + width: '5em', + fontSize: '13px', + fontFamily: 'Montserrat Light', + textRendering: 'geometricPrecision', marginTop: '10px', + marginBottom: '15px', + color: '#AEAEAE', }, - }), + }, ethUtil.toChecksumAddress(selected)), // copy and export @@ -160,18 +171,33 @@ AccountDetailScreen.prototype.render = function () { ]), ]), ]), + + // account ballence + ]), ]), h('.flex-row', { style: { - justifyContent: 'flex-end', + justifyContent: 'space-between', + alignItems: 'flex-start', }, }, [ + + 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 7da03cdd1..9538a6b93 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -114,6 +114,7 @@ App.prototype.renderAppBar = function () { alignItems: 'center', visibility: props.isUnlocked ? 'visible' : 'none', background: props.isUnlocked ? 'white' : 'none', + height: '36px', position: 'relative', zIndex: 2, }, @@ -126,6 +127,14 @@ 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, @@ -140,9 +149,8 @@ App.prototype.renderAppBar = function () { // metamask name h('h1', { style: { - position: 'absolute', - left: '50%', - transform: 'translateX(-50%)', + position: 'relative', + left: '9px', }, }, 'MetaMask'), diff --git a/ui/app/components/editable-label.js b/ui/app/components/editable-label.js index 14c0294a2..41936f5e0 100644 --- a/ui/app/components/editable-label.js +++ b/ui/app/components/editable-label.js @@ -11,18 +11,40 @@ function EditableLabel () { } EditableLabel.prototype.render = function () { - return h('div.name-label', { - contentEditable: true, - style: { - outline: 'none', - marginTop: '0.5rem', - }, - onInput: (event) => this.saveText(), - }, this.props.children) + 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() + } } EditableLabel.prototype.saveText = function () { - var text = findDOMNode(this).textContent.trim() + var container = findDOMNode(this) + var text = container.querySelector('.editable-label input').value 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 8211867cb..6d4871d02 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 = 32 + this.defaultDiameter = 46 } IdenticonComponent.prototype.render = function () { diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js index efab2c497..edbc074bb 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: true, + fixed: false, }, children) } diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index f6a4ed07e..7e1bedb05 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -79,9 +79,10 @@ 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 6ce426094..975a5289b 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.05); + transform: scale(1.1); } button:not([disabled]):active { transform: scale(0.95); @@ -112,7 +112,9 @@ button.btn-thin { font-size: 13px; } -.app-header {} +.app-header { + padding: 6px 8px; +} .app-header h1 { font-family: 'Montserrat Regular'; @@ -163,6 +165,9 @@ 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 ff3d91e7f..819d4a110 100644 --- a/ui/app/first-time/disclaimer.js +++ b/ui/app/first-time/disclaimer.js @@ -29,8 +29,7 @@ DisclaimerScreen.prototype.render = function () { style: { background: '#EBEBEB', color: '#AEAEAE', - marginTop: 0, - marginBottom: 0, + marginBottom: 24, width: '100%', fontSize: '20px', textAlign: 'center', @@ -43,8 +42,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; @@ -76,10 +75,10 @@ DisclaimerScreen.prototype.render = function () { } }, style: { - background: 'transparent', - height: '415px', - padding: '0 5px', - width: '100%', + background: 'rgb(235, 235, 235)', + height: '310px', + padding: '6px', + width: '80%', overflowY: 'scroll', }, }, [ @@ -92,12 +91,7 @@ DisclaimerScreen.prototype.render = function () { ]), h('button', { - style: { - width: '100%', - position: 'absolute', - bottom: 0, - left: 0, - }, + style: { marginTop: '18px' }, 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 ee0094f36..c41aecc48 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -114,10 +114,7 @@ InitializeMenuScreen.prototype.renderMenu = function (state) { h('button.primary', { onClick: this.createNewVaultAndKeychain.bind(this), style: { - position: 'absolute', - left: 0, - bottom: 0, - width: '100%', + margin: 12, }, }, 'Create'), diff --git a/ui/app/keychains/hd/create-vault-complete.js b/ui/app/keychains/hd/create-vault-complete.js index ae745430c..7272ebdbd 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: 0, + marginTop: 36, marginBottom: 8, width: '100%', fontSize: '20px', @@ -60,10 +60,8 @@ CreateVaultCompleteScreen.prototype.render = function () { h('button.primary', { onClick: () => this.confirmSeedWords(), style: { - position: 'absolute', - left: 0, - bottom: 0, - width: '100%', + margin: '24px', + fontSize: '0.9em', }, }, 'I\'ve copied it somewhere safe'), ]) diff --git a/ui/app/unlock.js b/ui/app/unlock.js index 7193a8b2d..17416766d 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -63,10 +63,7 @@ UnlockScreen.prototype.render = function () { h('button.primary.cursor-pointer', { onClick: this.onSubmit.bind(this), style: { - position: 'absolute', - bottom: 0, - left: 0, - width: '100%', + margin: 10, }, }, 'Unlock'), ]), @@ -75,12 +72,11 @@ 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.'), ]), ]) ) |