From 9d93dacf072e9f9c860308658e329a74b58e9fd3 Mon Sep 17 00:00:00 2001 From: Victor Baranov Date: Sun, 11 Aug 2019 23:43:11 +0300 Subject: [PATCH] Refine settings menu --- old-ui/app/config.js | 156 ++++++++++++++------------------------- old-ui/app/css/index.css | 25 +++++++ old-ui/app/css/lib.css | 1 - 3 files changed, 81 insertions(+), 101 deletions(-) diff --git a/old-ui/app/config.js b/old-ui/app/config.js index fe3a0e2cc..48e7f9dda 100644 --- a/old-ui/app/config.js +++ b/old-ui/app/config.js @@ -108,10 +108,10 @@ class ConfigScreen extends Component { width: 'inherit', flex: '1 0 auto', height: '32px', - margin: '20px 20px 0 0', borderRadius: '3px', border: '1px solid #e2e2e2', padding: '10px', + marginBottom: '20px', }, onKeyPress: (event) => { if (event.key === 'Enter') { @@ -121,44 +121,27 @@ class ConfigScreen extends Component { } }, }), - h('button', { - style: { - alignSelf: 'center', - marginTop: '20px', - }, - onClick: (event) => { - event.preventDefault() - const element = document.querySelector('input#new_rpc') - const newRpc = element.value - this.rpcValidation(newRpc, state) - }, - }, 'Save'), ]), + h('button.btn-spread', { + onClick: (event) => { + event.preventDefault() + const element = document.querySelector('input#new_rpc') + const newRpc = element.value + this.rpcValidation(newRpc, state) + }, + }, 'Save'), + h('hr.horizontal-line'), this.currentConversionInformation(metamaskState, state), - h('hr.horizontal-line', { - style: { - marginTop: '20px', - }, - }), + h('hr.horizontal-line'), - h('div', { - style: { - marginTop: '20px', - }, - }, [ - h('p', { - style: { - fontFamily: 'Nunito Regular', - fontSize: '14px', - lineHeight: '18px', - }, - }, `State logs contain your public account addresses and sent transactions.`), - h('br'), - h('button', { + h('div', [ + h('p.config-title', `State logs`), + h('p.config-description', `State logs contain your public account addresses and sent transactions.`), + h('button.btn-spread', { style: { alignSelf: 'center', }, @@ -174,18 +157,12 @@ class ConfigScreen extends Component { }, 'Download State Logs'), ]), - h('hr.horizontal-line', { - style: { - marginTop: '20px', - }, - }), + h('hr.horizontal-line'), - h('div', { - style: { - marginTop: '20px', - }, - }, [ - h('button', { + h('div', [ + h('p.config-title', `Seed words`), + h('p.config-description', `Reveal seed words.`), + h('button.btn-spread', { style: { alignSelf: 'center', }, @@ -196,56 +173,42 @@ class ConfigScreen extends Component { }, 'Reveal Seed Words'), ]), - h('hr.horizontal-line', { - style: { - marginTop: '20px', - }, - }), + h('hr.horizontal-line'), - h('p', { - style: { - fontFamily: 'Nunito Regular', - fontSize: '14px', - lineHeight: '18px', - }, - }, [ - 'Switch to Decentralized Provider (Pocket)', - ]), - - h('input', { - type:'checkbox', - name:'pocket-checkbox', - checked: this.state.dProvider, - onChange: (event) => { - event.preventDefault() - this.toggleProvider() - }, - }), - - h('hr.horizontal-line', { - style: { - marginTop: '20px', - }, - }), + h('p.config-title', `Provider`), h('div', { style: { - marginTop: '20px', - }, + display: 'table', + } }, [ - - h('p', { + h('div', { style: { - fontFamily: 'Nunito Regular', - fontSize: '14px', - lineHeight: '18px', - }, - }, [ - 'Resetting is for developer use only. ', + display: 'table-cell', + }},[ + h('p.config-description', 'Switch to Decentralized Provider (Pocket)') ]), - h('br'), + h('div', { style: { + display: 'table-cell', + }},[ + h('input', { + type:'checkbox', + name:'pocket-checkbox', + checked: this.state.dProvider, + onChange: (event) => { + event.preventDefault() + this.toggleProvider() + }, + }), + ]) + ]), - h('button', { + h('hr.horizontal-line'), + + h('div', [ + h('p.config-title', `Account`), + h('p.config-description', `Resetting is for developer use only.`), + h('button.btn-spread', { style: { alignSelf: 'center', }, @@ -255,16 +218,9 @@ class ConfigScreen extends Component { }, }, 'Reset Account'), - h('hr.horizontal-line', { - style: { - marginTop: '20px', - }, - }), + h('p.config-description', 'Changing of password'), - h('button', { - style: { - alignSelf: 'center', - }, + h('button.btn-spread', { onClick (event) { event.preventDefault() state.dispatch(actions.confirmChangePassword()) @@ -330,9 +286,9 @@ class ConfigScreen extends Component { const currentCurrency = metamaskState.currentCurrency const conversionDate = metamaskState.conversionDate return h('div', [ - h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, 'Current Conversion'), - h('span', {style: { fontWeight: 'bold', paddingRight: '10px', fontSize: '13px'}}, `Updated ${Date(conversionDate)}`), - h('select#currentCurrency', { + h('div.config-title', 'Current Conversion'), + h('div.config-description', `Updated ${Date(conversionDate)}`), + h('select.config-select-currency#currentCurrency', { onChange (event) { event.preventDefault() const element = document.getElementById('currentCurrency') @@ -360,9 +316,9 @@ class ConfigScreen extends Component { } return h('div', [ - h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, title), - h('span', value), - provider.type === 'rpc' && h('button', { + h('div.config-title', title), + h('div.config-description', value), + provider.type === 'rpc' && h('button.btn-spread', { onClick (event) { event.preventDefault() state.dispatch(actions.showDeleteRPC()) diff --git a/old-ui/app/css/index.css b/old-ui/app/css/index.css index 5f082cd77..370e20e59 100644 --- a/old-ui/app/css/index.css +++ b/old-ui/app/css/index.css @@ -117,6 +117,11 @@ button, input[type="submit"] { /*box-shadow: 0px 5px 10px 0px rgba(92, 52, 162, 0.3);*/ } +.btn-spread { + width: 100%; + margin-bottom: 20px; +} + .btn-green, input[type="submit"].btn-green { background: #60db97; } @@ -1195,3 +1200,23 @@ div.message-container > div:first-child { input[disabled],textarea[disabled] { background: #FFFADE } + +.config-title { + font-family: 'Nunito Semibold'; + color: #333333; + margin-bottom: 10px; +} + +.config-description { + font-family: 'Nunito Regular'; + font-size: 14px; + color: #888888; + line-height: 18px; + margin-bottom: 10px; +} + +.config-select-currency { + height: 32px; + width: 100%; + margin-bottom: 20px; +} \ No newline at end of file diff --git a/old-ui/app/css/lib.css b/old-ui/app/css/lib.css index b5c7cffe9..590cc895b 100644 --- a/old-ui/app/css/lib.css +++ b/old-ui/app/css/lib.css @@ -171,7 +171,6 @@ hr.horizontal-line { height: 1px; border: 0; border-top: 1px solid #ccc; - margin: 1em 0; padding: 0; }