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

5 files changed, 19 insertions, 168 deletions

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 (
-      <div className="settings-page__content-row">
-        <div className="settings-page__content-item">
-          <span>{ t('newNetwork') }</span>
-        </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <TextField
-              type="text"
-              id="new-rpc"
-              placeholder={t('rpcUrl')}
-              value={newRpc}
-              onChange={e => this.setState({ newRpc: e.target.value })}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }
-              }}
-              fullWidth
-              margin="dense"
-            />
-            <TextField
-              type="text"
-              id="chainid"
-              placeholder={t('optionalChainId')}
-              value={chainId}
-              onChange={e => 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"
-            />
-            <TextField
-              type="text"
-              id="ticker"
-              placeholder={t('optionalSymbol')}
-              value={ticker}
-              onChange={e => 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"
-            />
-            <TextField
-              type="text"
-              id="nickname"
-              placeholder={t('optionalNickname')}
-              value={nickname}
-              onChange={e => 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"
-            />
-            <div className="flex-row flex-align-center space-between">
-              <span className="settings-tab__advanced-link"
-                    onClick={e => {
-                      e.preventDefault()
-                      this.setState({ showOptions: !this.state.showOptions })
-                    }}
-              >
-                { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') }
-              </span>
-              <button
-                className="button btn-primary settings-tab__rpc-save-button"
-                onClick={e => {
-                  e.preventDefault()
-                  this.validateRpc(newRpc, chainId, ticker, nickname)
-                }}
-              >
-                { t('save') }
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  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 {
             <ToggleButton
               value={sendHexData}
               onToggle={value => setHexDataFeatureFlag(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
@@ -319,8 +170,8 @@ export default class AdvancedTab extends PureComponent {
             <ToggleButton
               value={advancedInlineGas}
               onToggle={value => setAdvancedInlineGasFeatureFlag(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
@@ -348,8 +199,8 @@ export default class AdvancedTab extends PureComponent {
             <ToggleButton
               value={showFiatInTestnets}
               onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
@@ -407,7 +258,6 @@ export default class AdvancedTab extends PureComponent {
         { warning && <div className="settings-tab__error">{ warning }</div> }
         { 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 {
             <ToggleButton
               value={privacyMode}
               onToggle={value => setPrivacyMode(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
@@ -166,8 +166,8 @@ export default class SecurityTab extends PureComponent {
             <ToggleButton
               value={participateInMetaMetrics}
               onToggle={value => setParticipateInMetaMetrics(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>
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 {
             <ToggleButton
               value={useBlockie}
               onToggle={value => setUseBlockie(!value)}
-              activeLabel=""
-              inactiveLabel=""
+              offLabel={t('off')}
+              onLabel={t('on')}
             />
           </div>
         </div>