Fix popup network form appearance; code style

ui/app/pages/settings/networks-tab/index.scss

@@ -25,29 +25,6 @@
     }
   }
 
-  &__back-button {
-    display: none;
-
-    @media screen and (max-width: 575px) {
-      display: block;
-      background-image: url('/images/caret-left-black.svg');
-      width: 18px;
-      height: 18px;
-      opacity: 0.5;
-      background-size: contain;
-      background-repeat: no-repeat;
-      background-position: center;
-      margin-right: 16px;
-      cursor: pointer;
-      position: absolute;
-      margin-left: 10px;
-
-      [dir='rtl'] & {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
   &__network-form {
     flex: 0.5 0 auto;
     max-width: 343px;
@@ -246,6 +223,10 @@
     flex-flow: row nowrap;
     margin: 0.75rem 0;
 
+    @media screen and (max-width: 575px) {
+      width: 93%;
+    }
+
     .btn-default {
       margin-right: 0.375rem;
     }

ui/app/pages/settings/networks-tab/networks-tab.component.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { SETTINGS_ROUTE } from '../../../helpers/constants/routes'
 import {
   ENVIRONMENT_TYPE_FULLSCREEN,
   ENVIRONMENT_TYPE_POPUP,
@@ -20,7 +19,6 @@ export default class NetworksTab extends PureComponent {
 
   static propTypes = {
     editRpc: PropTypes.func.isRequired,
-    history: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     networkIsSelected: PropTypes.bool,
     networksTabIsInAddMode: PropTypes.bool,
@@ -50,25 +48,12 @@ export default class NetworksTab extends PureComponent {
 
   renderSubHeader () {
     const {
-      networkIsSelected,
       setSelectedSettingsRpcUrl,
       setNetworksTabAddMode,
-      networksTabIsInAddMode,
-      networkDefaultedToProvider,
     } = this.props
 
     return (
       <div className="settings-page__sub-header">
-        <div
-          className="networks-tab__back-button"
-          onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode
-            ? () => {
-              setNetworksTabAddMode(false)
-              setSelectedSettingsRpcUrl('')
-            }
-            : () => this.props.history.push(SETTINGS_ROUTE)
-          }
-        />
         <span className="settings-page__sub-header-text">{ this.context.t('networks') }</span>
         <div className="networks-tab__add-network-header-button-wrapper">
           <Button

ui/app/pages/settings/networks-tab/networks-tab.container.js

@@ -32,7 +32,7 @@ const mapStateToProps = (state) => {
       rpcUrl: rpc.rpcUrl,
       chainId: rpc.chainId,
       ticker: rpc.ticker,
-      blockExplorerUrl: (rpc.rpcPrefs && rpc.rpcPrefs.blockExplorerUrl) || '',
+      blockExplorerUrl: (rpc.rpcPrefs?.blockExplorerUrl) || '',
     }
   })
 

ui/app/pages/settings/settings.container.js

@@ -14,27 +14,29 @@ import {
   CONTACT_LIST_ROUTE,
   CONTACT_ADD_ROUTE,
   CONTACT_EDIT_ROUTE,
-  CONTACT_VIEW_ROUTE,
   CONTACT_MY_ACCOUNTS_ROUTE,
   CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
   CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+  CONTACT_VIEW_ROUTE,
   GENERAL_ROUTE,
+  NETWORKS_ROUTE,
   SECURITY_ROUTE,
   SETTINGS_ROUTE,
 } from '../../helpers/constants/routes'
 import Settings from './settings.component'
 
 const ROUTES_TO_I18N_KEYS = {
-  [GENERAL_ROUTE]: 'general',
-  [ADVANCED_ROUTE]: 'advanced',
-  [SECURITY_ROUTE]: 'securityAndPrivacy',
   [ABOUT_US_ROUTE]: 'about',
+  [ADVANCED_ROUTE]: 'advanced',
   [ALERTS_ROUTE]: 'alerts',
-  [CONTACT_LIST_ROUTE]: 'contacts',
+  [GENERAL_ROUTE]: 'general',
   [CONTACT_ADD_ROUTE]: 'newContact',
   [CONTACT_EDIT_ROUTE]: 'editContact',
-  [CONTACT_VIEW_ROUTE]: 'viewContact',
+  [CONTACT_LIST_ROUTE]: 'contacts',
   [CONTACT_MY_ACCOUNTS_ROUTE]: 'myAccounts',
+  [CONTACT_VIEW_ROUTE]: 'viewContact',
+  [NETWORKS_ROUTE]: 'networks',
+  [SECURITY_ROUTE]: 'securityAndPrivacy',
 }
 
 const mapStateToProps = (state, ownProps) => {
@@ -51,7 +53,7 @@ const mapStateToProps = (state, ownProps) => {
   const isPopupView = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
   const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname]
 
-  let backRoute
+  let backRoute = SETTINGS_ROUTE
   if (isMyAccountsPage && isAddressEntryPage) {
     backRoute = CONTACT_MY_ACCOUNTS_ROUTE
   } else if (isEditContactPage) {
@@ -60,8 +62,6 @@ const mapStateToProps = (state, ownProps) => {
     backRoute = `${CONTACT_MY_ACCOUNTS_VIEW_ROUTE}/${pathNameTail}`
   } else if (isAddressEntryPage || isMyAccountsPage || isAddContactPage) {
     backRoute = CONTACT_LIST_ROUTE
-  } else {
-    backRoute = SETTINGS_ROUTE
   }
 
   let initialBreadCrumbRoute