Refine settings menu

This commit is contained in:
Victor Baranov 2019-08-11 23:43:11 +03:00
parent 5279197871
commit 9d93dacf07
3 changed files with 81 additions and 101 deletions

View File

@ -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())

View File

@ -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;
}

View File

@ -171,7 +171,6 @@ hr.horizontal-line {
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}