Standardize appearance of network settings

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

@@ -2,12 +2,15 @@
   &__content {
     margin-top: 24px;
     display: flex;
+    flex-direction: row;
     height: 100%;
     max-width: 739px;
     justify-content: space-between;
 
     @media screen and (max-width: 575px) {
       margin-top: 0;
+      flex-direction: column;
+      overflow-x: hidden;
     }
   }
 
@@ -78,20 +81,21 @@
 
   &__network-form-row {
     @media screen and (max-width: 575px) {
-      display: flex;
-      flex-direction: column;
       width: 93%;
     }
 
     &--warning {
       background-color: #fefae8;
       border: 1px solid #ffd33d;
-      width: 93%;
       border-radius: 5px;
       box-sizing: border-box;
       padding: 12px;
       margin: 12px 0;
       font-size: 12px;
+
+      @media screen and (max-width: 575px) {
+        width: 93%;
+      }
     }
   }
 
@@ -121,7 +125,6 @@
     @media screen and (max-width: 575px) {
       max-width: 100vw;
       width: 100vw;
-      overflow-y: scroll;
     }
   }
 
@@ -130,7 +133,7 @@
 
     @media screen and (max-width: 575px) {
       display: flex;
-      padding-top: 19px;
+      padding-top: 23px;
       padding-bottom: 23px;
       justify-content: center;
       align-items: center;

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

@@ -30,6 +30,7 @@ export default class NetworkForm extends PureComponent {
     blockExplorerUrl: PropTypes.string,
     rpcPrefs: PropTypes.object,
     rpcUrls: PropTypes.array,
+    isFullScreen: PropTypes.bool,
   }
 
   state = {
@@ -136,11 +137,12 @@ export default class NetworkForm extends PureComponent {
 
   onCancel = () => {
     const {
+      isFullScreen,
       networksTabIsInAddMode,
       onClear,
     } = this.props
 
-    if (networksTabIsInAddMode) {
+    if (networksTabIsInAddMode || !isFullScreen) {
       onClear()
     } else {
       this.resetForm()
@@ -327,6 +329,7 @@ export default class NetworkForm extends PureComponent {
       viewOnly,
       isCurrentRpcTarget,
       networksTabIsInAddMode,
+      isFullScreen,
     } = this.props
     const {
       networkName,
@@ -337,6 +340,8 @@ export default class NetworkForm extends PureComponent {
       errors,
     } = this.state
 
+    const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
+
     const isSubmitDisabled = (
       viewOnly ||
       this.stateIsUnchanged() ||
@@ -344,7 +349,18 @@ export default class NetworkForm extends PureComponent {
       !chainId ||
       Object.values(errors).some((x) => x)
     )
-    const deletable = !networksTabIsInAddMode && !isCurrentRpcTarget && !viewOnly
+
+    // The secondary button is either the form cancel button, or a "back"
+    // button. It is never disabled in the popup, and sometimes disabled in
+    // the fullscreen UI.
+    const secondaryButtonDisabled = (
+      isFullScreen && (viewOnly || this.stateIsUnchanged())
+    )
+    const secondaryButtonMessageKey = (
+      !isFullScreen && viewOnly
+        ? 'back'
+        : 'cancel'
+    )
 
     return (
       <div className="networks-tab__network-form">
@@ -397,9 +413,9 @@ export default class NetworkForm extends PureComponent {
           <Button
             type="default"
             onClick={this.onCancel}
-            disabled={viewOnly || this.stateIsUnchanged()}
+            disabled={secondaryButtonDisabled}
           >
-            { t('cancel') }
+            {t(secondaryButtonMessageKey)}
           </Button>
           <Button
             type="secondary"

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

@@ -2,7 +2,10 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { SETTINGS_ROUTE } from '../../../helpers/constants/routes'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
+import {
+  ENVIRONMENT_TYPE_FULLSCREEN,
+  ENVIRONMENT_TYPE_POPUP,
+} from '../../../../../app/scripts/lib/enums'
 import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
 import Button from '../../../components/ui/button'
 import LockIcon from '../../../components/ui/lock-icon'
@@ -32,8 +35,13 @@ export default class NetworksTab extends PureComponent {
     networkDefaultedToProvider: PropTypes.bool,
   }
 
-  UNSAFE_componentWillMount () {
+  state = {
-    this.props.setSelectedSettingsRpcUrl(null)
+    isFullScreen: getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN,
+    isPopup: getEnvironmentType() === ENVIRONMENT_TYPE_POPUP,
+  }
+
+  componentWillUnmount () {
+    this.props.setSelectedSettingsRpcUrl('')
   }
 
   isCurrentPath (pathname) {
@@ -56,7 +64,7 @@ export default class NetworksTab extends PureComponent {
           onClick={(networkIsSelected && !networkDefaultedToProvider) || networksTabIsInAddMode
             ? () => {
               setNetworksTabAddMode(false)
-              setSelectedSettingsRpcUrl(null)
+              setSelectedSettingsRpcUrl('')
             }
             : () => this.props.history.push(SETTINGS_ROUTE)
           }
@@ -67,7 +75,7 @@ export default class NetworksTab extends PureComponent {
             type="secondary"
             onClick={(event) => {
               event.preventDefault()
-              setSelectedSettingsRpcUrl(null)
+              setSelectedSettingsRpcUrl('')
               setNetworksTabAddMode(true)
             }}
           >
@@ -167,7 +175,7 @@ export default class NetworksTab extends PureComponent {
     )
   }
 
-  renderNetworksTabContent () {
+  renderNetworksTabContent (isPopup) {
     const { t } = this.context
     const {
       setRpcTarget,
@@ -190,12 +198,12 @@ export default class NetworksTab extends PureComponent {
       providerUrl,
       networksToRender,
     } = this.props
+    const { isFullScreen } = this.state
 
-    const envIsPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+    const shouldRenderNetworkForm = networksTabIsInAddMode || !isPopup || (isPopup && !networkDefaultedToProvider)
-    const shouldRenderNetworkForm = networksTabIsInAddMode || !envIsPopup || (envIsPopup && !networkDefaultedToProvider)
 
     return (
-      <div className="networks-tab__content">
+      <>
         { this.renderNetworksList() }
         {
           shouldRenderNetworkForm
@@ -210,7 +218,7 @@ export default class NetworksTab extends PureComponent {
                 ticker={ticker}
                 onClear={() => {
                   setNetworksTabAddMode(false)
-                  setSelectedSettingsRpcUrl(null)
+                  setSelectedSettingsRpcUrl('')
                 }}
                 showConfirmDeleteNetworkModal={showConfirmDeleteNetworkModal}
                 viewOnly={viewOnly}
@@ -218,39 +226,42 @@ export default class NetworksTab extends PureComponent {
                 networksTabIsInAddMode={networksTabIsInAddMode}
                 rpcPrefs={rpcPrefs}
                 blockExplorerUrl={blockExplorerUrl}
-                cancelText={t('cancel')}
+                isFullScreen={isFullScreen}
               />
             )
             : null
         }
-      </div>
+      </>
     )
   }
 
   render () {
     const { setNetworksTabAddMode, setSelectedSettingsRpcUrl, networkIsSelected, networksTabIsInAddMode } = this.props
+    const { isFullScreen, isPopup } = this.state
 
     return (
       <div className="networks-tab__body">
-        {this.renderSubHeader()}
+        {isFullScreen && this.renderSubHeader()}
-        {this.renderNetworksTabContent()}
+        <div className="networks-tab__content">
-        {!networkIsSelected && !networksTabIsInAddMode
+          {this.renderNetworksTabContent(isPopup)}
-          ? (
+          {!networkIsSelected && !networksTabIsInAddMode
-            <div className="networks-tab__add-network-button-wrapper">
+            ? (
-              <Button
+              <div className="networks-tab__add-network-button-wrapper">
-                type="primary"
+                <Button
-                onClick={(event) => {
+                  type="primary"
-                  event.preventDefault()
+                  onClick={(event) => {
-                  setSelectedSettingsRpcUrl(null)
+                    event.preventDefault()
-                  setNetworksTabAddMode(true)
+                    setSelectedSettingsRpcUrl('')
-                }}
+                    setNetworksTabAddMode(true)
-              >
+                  }}
-                { this.context.t('addNetwork') }
+                >
-              </Button>
+                  { this.context.t('addNetwork') }
-            </div>
+                </Button>
-          )
+              </div>
-          : null
+            )
-        }
+            : null
+          }
+        </div>
       </div>
     )
   }

ui/app/pages/settings/settings.component.js

@@ -57,7 +57,7 @@ class SettingsPage extends PureComponent {
       >
         <div className="settings-page__header">
           {
-            currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && (
+            currentPath !== SETTINGS_ROUTE && (
               <div
                 className="settings-page__back-button"
                 onClick={() => history.push(backRoute)}

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

@@ -8,12 +8,9 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import { getMostRecentOverviewPage } from '../../ducks/history/history'
 
 import {
+  ABOUT_US_ROUTE,
   ADVANCED_ROUTE,
-  SECURITY_ROUTE,
-  GENERAL_ROUTE,
   ALERTS_ROUTE,
-  ABOUT_US_ROUTE,
-  SETTINGS_ROUTE,
   CONTACT_LIST_ROUTE,
   CONTACT_ADD_ROUTE,
   CONTACT_EDIT_ROUTE,
@@ -21,6 +18,9 @@ import {
   CONTACT_MY_ACCOUNTS_ROUTE,
   CONTACT_MY_ACCOUNTS_EDIT_ROUTE,
   CONTACT_MY_ACCOUNTS_VIEW_ROUTE,
+  GENERAL_ROUTE,
+  SECURITY_ROUTE,
+  SETTINGS_ROUTE,
 } from '../../helpers/constants/routes'
 import Settings from './settings.component'