From 32a3f5ad7b8d30c1d4843152e575770b189146ea Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 8 Jul 2019 15:28:35 -0230 Subject: Address various UI styling issues (#6744) * Add loading spinner to pending tx status label. * Add border around account icon in top right * Change style of settings toggle buttons; wrap with local components * Eliminate large space after settings labels when no description * Remove network form from advanced tab of settings * Keep new account container height to contents when in full screen --- .../advanced-tab/advanced-tab.component.js | 166 +-------------------- .../tests/advanced-tab-component.test.js | 2 +- ui/app/pages/settings/index.scss | 2 +- .../security-tab/security-tab.component.js | 10 +- .../settings-tab/settings-tab.component.js | 7 +- 5 files changed, 19 insertions(+), 168 deletions(-) (limited to 'ui/app/pages') diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js index 3d27fe349..105cd89f9 100644 --- a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js @@ -1,8 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import validUrl from 'valid-url' import { exportAsFile } from '../../../helpers/utils/util' -import ToggleButton from 'react-toggle-button' +import ToggleButton from '../../../components/ui/toggle-button' import TextField from '../../../components/ui/text-field' import Button from '../../../components/ui/button' import { MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes' @@ -29,155 +28,7 @@ export default class AdvancedTab extends PureComponent { setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired, } - state = { - newRpc: '', - chainId: '', - showOptions: false, - ticker: '', - nickname: '', - } - - renderNewRpcUrl () { - const { t } = this.context - const { newRpc, chainId, ticker, nickname } = this.state - - return ( -
-
- { t('newNetwork') } -
-
-
- this.setState({ newRpc: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - fullWidth - margin="dense" - /> - this.setState({ chainId: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - style={{ - display: this.state.showOptions ? null : 'none', - }} - fullWidth - margin="dense" - /> - this.setState({ ticker: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - style={{ - display: this.state.showOptions ? null : 'none', - }} - fullWidth - margin="dense" - /> - this.setState({ nickname: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - style={{ - display: this.state.showOptions ? null : 'none', - }} - fullWidth - margin="dense" - /> -
- { - e.preventDefault() - this.setState({ showOptions: !this.state.showOptions }) - }} - > - { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') } - - -
-
-
-
- ) - } - - validateRpc (newRpc, chainId, ticker = 'ETH', nickname) { - const { setRpcTarget, displayWarning } = this.props - if (validUrl.isWebUri(newRpc)) { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', - action: 'Custom RPC', - name: 'Success', - }, - customVariables: { - networkId: newRpc, - chainId, - }, - }) - if (!!chainId && Number.isNaN(parseInt(chainId))) { - return displayWarning(`${this.context.t('invalidInput')} chainId`) - } - - setRpcTarget(newRpc, chainId, ticker, nickname) - } else { - this.context.metricsEvent({ - eventOpts: { - category: 'Settings', - action: 'Custom RPC', - name: 'Error', - }, - customVariables: { - networkId: newRpc, - chainId, - }, - }) - const appendedRpc = `http://${newRpc}` - - if (validUrl.isWebUri(appendedRpc)) { - displayWarning(this.context.t('uriErrorMsg')) - } else { - displayWarning(this.context.t('invalidRPC')) - } - } - } + state = { autoLogoutTimeLimit: this.props.autoLogoutTimeLimit } renderMobileSync () { const { t } = this.context @@ -293,8 +144,8 @@ export default class AdvancedTab extends PureComponent { setHexDataFeatureFlag(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> @@ -319,8 +170,8 @@ export default class AdvancedTab extends PureComponent { setAdvancedInlineGasFeatureFlag(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> @@ -348,8 +199,8 @@ export default class AdvancedTab extends PureComponent { setShowFiatConversionOnTestnetsPreference(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> @@ -407,7 +258,6 @@ export default class AdvancedTab extends PureComponent { { warning &&
{ warning }
} { this.renderStateLogs() } { this.renderMobileSync() } - { this.renderNewRpcUrl() } { this.renderResetAccount() } { this.renderAdvancedGasInputInline() } { this.renderHexDataOptIn() } diff --git a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js index f81329533..31cdd747c 100644 --- a/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js +++ b/ui/app/pages/settings/advanced-tab/tests/advanced-tab-component.test.js @@ -16,7 +16,7 @@ describe('AdvancedTab Component', () => { } ) - assert.equal(root.find('.settings-page__content-row').length, 8) + assert.equal(root.find('.settings-page__content-row').length, 7) }) it('should update autoLogoutTimeLimit', () => { diff --git a/ui/app/pages/settings/index.scss b/ui/app/pages/settings/index.scss index c516a84bb..d98a48c2f 100644 --- a/ui/app/pages/settings/index.scss +++ b/ui/app/pages/settings/index.scss @@ -142,7 +142,7 @@ min-width: 0; display: flex; flex-direction: column; - min-height: 71px; + margin-bottom: 20px; @media screen and (max-width: 575px) { height: initial; diff --git a/ui/app/pages/settings/security-tab/security-tab.component.js b/ui/app/pages/settings/security-tab/security-tab.component.js index 01a28bac7..0d367abfb 100644 --- a/ui/app/pages/settings/security-tab/security-tab.component.js +++ b/ui/app/pages/settings/security-tab/security-tab.component.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { exportAsFile } from '../../../helpers/utils/util' -import ToggleButton from 'react-toggle-button' +import ToggleButton from '../../../components/ui/toggle-button' import { REVEAL_SEED_ROUTE } from '../../../helpers/constants/routes' import Button from '../../../components/ui/button' @@ -140,8 +140,8 @@ export default class SecurityTab extends PureComponent { setPrivacyMode(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> @@ -166,8 +166,8 @@ export default class SecurityTab extends PureComponent { setParticipateInMetaMetrics(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> diff --git a/ui/app/pages/settings/settings-tab/settings-tab.component.js b/ui/app/pages/settings/settings-tab/settings-tab.component.js index 57e80be0d..f8daa98f9 100644 --- a/ui/app/pages/settings/settings-tab/settings-tab.component.js +++ b/ui/app/pages/settings/settings-tab/settings-tab.component.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import infuraCurrencies from '../../../helpers/constants/infura-conversion.json' import SimpleDropdown from '../../../components/app/dropdowns/simple-dropdown' -import ToggleButton from 'react-toggle-button' +import ToggleButton from '../../../components/ui/toggle-button' import locales from '../../../../../app/_locales/index.json' const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -105,6 +105,7 @@ export default class SettingsTab extends PureComponent { renderBlockieOptIn () { + const { t } = this.context const { useBlockie, setUseBlockie } = this.props return ( @@ -117,8 +118,8 @@ export default class SettingsTab extends PureComponent { setUseBlockie(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> -- cgit