Refine settings menu
This commit is contained in:
parent
5279197871
commit
9d93dacf07
|
@ -108,10 +108,10 @@ class ConfigScreen extends Component {
|
||||||
width: 'inherit',
|
width: 'inherit',
|
||||||
flex: '1 0 auto',
|
flex: '1 0 auto',
|
||||||
height: '32px',
|
height: '32px',
|
||||||
margin: '20px 20px 0 0',
|
|
||||||
borderRadius: '3px',
|
borderRadius: '3px',
|
||||||
border: '1px solid #e2e2e2',
|
border: '1px solid #e2e2e2',
|
||||||
padding: '10px',
|
padding: '10px',
|
||||||
|
marginBottom: '20px',
|
||||||
},
|
},
|
||||||
onKeyPress: (event) => {
|
onKeyPress: (event) => {
|
||||||
if (event.key === 'Enter') {
|
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'),
|
h('hr.horizontal-line'),
|
||||||
|
|
||||||
this.currentConversionInformation(metamaskState, state),
|
this.currentConversionInformation(metamaskState, state),
|
||||||
|
|
||||||
h('hr.horizontal-line', {
|
h('hr.horizontal-line'),
|
||||||
style: {
|
|
||||||
marginTop: '20px',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
|
|
||||||
h('div', {
|
h('div', [
|
||||||
style: {
|
h('p.config-title', `State logs`),
|
||||||
marginTop: '20px',
|
h('p.config-description', `State logs contain your public account addresses and sent transactions.`),
|
||||||
},
|
h('button.btn-spread', {
|
||||||
}, [
|
|
||||||
h('p', {
|
|
||||||
style: {
|
|
||||||
fontFamily: 'Nunito Regular',
|
|
||||||
fontSize: '14px',
|
|
||||||
lineHeight: '18px',
|
|
||||||
},
|
|
||||||
}, `State logs contain your public account addresses and sent transactions.`),
|
|
||||||
h('br'),
|
|
||||||
h('button', {
|
|
||||||
style: {
|
style: {
|
||||||
alignSelf: 'center',
|
alignSelf: 'center',
|
||||||
},
|
},
|
||||||
|
@ -174,18 +157,12 @@ class ConfigScreen extends Component {
|
||||||
}, 'Download State Logs'),
|
}, 'Download State Logs'),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('hr.horizontal-line', {
|
h('hr.horizontal-line'),
|
||||||
style: {
|
|
||||||
marginTop: '20px',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
|
|
||||||
h('div', {
|
h('div', [
|
||||||
style: {
|
h('p.config-title', `Seed words`),
|
||||||
marginTop: '20px',
|
h('p.config-description', `Reveal seed words.`),
|
||||||
},
|
h('button.btn-spread', {
|
||||||
}, [
|
|
||||||
h('button', {
|
|
||||||
style: {
|
style: {
|
||||||
alignSelf: 'center',
|
alignSelf: 'center',
|
||||||
},
|
},
|
||||||
|
@ -196,56 +173,42 @@ class ConfigScreen extends Component {
|
||||||
}, 'Reveal Seed Words'),
|
}, 'Reveal Seed Words'),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
h('hr.horizontal-line', {
|
h('hr.horizontal-line'),
|
||||||
style: {
|
|
||||||
marginTop: '20px',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
|
|
||||||
h('p', {
|
h('p.config-title', `Provider`),
|
||||||
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('div', {
|
h('div', {
|
||||||
style: {
|
style: {
|
||||||
marginTop: '20px',
|
display: 'table',
|
||||||
},
|
}
|
||||||
}, [
|
}, [
|
||||||
|
h('div', {
|
||||||
h('p', {
|
|
||||||
style: {
|
style: {
|
||||||
fontFamily: 'Nunito Regular',
|
display: 'table-cell',
|
||||||
fontSize: '14px',
|
}},[
|
||||||
lineHeight: '18px',
|
h('p.config-description', 'Switch to Decentralized Provider (Pocket)')
|
||||||
},
|
|
||||||
}, [
|
|
||||||
'Resetting is for developer use only. ',
|
|
||||||
]),
|
]),
|
||||||
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: {
|
style: {
|
||||||
alignSelf: 'center',
|
alignSelf: 'center',
|
||||||
},
|
},
|
||||||
|
@ -255,16 +218,9 @@ class ConfigScreen extends Component {
|
||||||
},
|
},
|
||||||
}, 'Reset Account'),
|
}, 'Reset Account'),
|
||||||
|
|
||||||
h('hr.horizontal-line', {
|
h('p.config-description', 'Changing of password'),
|
||||||
style: {
|
|
||||||
marginTop: '20px',
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
|
|
||||||
h('button', {
|
h('button.btn-spread', {
|
||||||
style: {
|
|
||||||
alignSelf: 'center',
|
|
||||||
},
|
|
||||||
onClick (event) {
|
onClick (event) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
state.dispatch(actions.confirmChangePassword())
|
state.dispatch(actions.confirmChangePassword())
|
||||||
|
@ -330,9 +286,9 @@ class ConfigScreen extends Component {
|
||||||
const currentCurrency = metamaskState.currentCurrency
|
const currentCurrency = metamaskState.currentCurrency
|
||||||
const conversionDate = metamaskState.conversionDate
|
const conversionDate = metamaskState.conversionDate
|
||||||
return h('div', [
|
return h('div', [
|
||||||
h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, 'Current Conversion'),
|
h('div.config-title', 'Current Conversion'),
|
||||||
h('span', {style: { fontWeight: 'bold', paddingRight: '10px', fontSize: '13px'}}, `Updated ${Date(conversionDate)}`),
|
h('div.config-description', `Updated ${Date(conversionDate)}`),
|
||||||
h('select#currentCurrency', {
|
h('select.config-select-currency#currentCurrency', {
|
||||||
onChange (event) {
|
onChange (event) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
const element = document.getElementById('currentCurrency')
|
const element = document.getElementById('currentCurrency')
|
||||||
|
@ -360,9 +316,9 @@ class ConfigScreen extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
return h('div', [
|
return h('div', [
|
||||||
h('span', {style: { fontWeight: 'bold', paddingRight: '10px'}}, title),
|
h('div.config-title', title),
|
||||||
h('span', value),
|
h('div.config-description', value),
|
||||||
provider.type === 'rpc' && h('button', {
|
provider.type === 'rpc' && h('button.btn-spread', {
|
||||||
onClick (event) {
|
onClick (event) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
state.dispatch(actions.showDeleteRPC())
|
state.dispatch(actions.showDeleteRPC())
|
||||||
|
|
|
@ -117,6 +117,11 @@ button, input[type="submit"] {
|
||||||
/*box-shadow: 0px 5px 10px 0px rgba(92, 52, 162, 0.3);*/
|
/*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 {
|
.btn-green, input[type="submit"].btn-green {
|
||||||
background: #60db97;
|
background: #60db97;
|
||||||
}
|
}
|
||||||
|
@ -1195,3 +1200,23 @@ div.message-container > div:first-child {
|
||||||
input[disabled],textarea[disabled] {
|
input[disabled],textarea[disabled] {
|
||||||
background: #FFFADE
|
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;
|
||||||
|
}
|
|
@ -171,7 +171,6 @@ hr.horizontal-line {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: 1px solid #ccc;
|
border-top: 1px solid #ccc;
|
||||||
margin: 1em 0;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue