Finish network settings redesign

ui/app/components/app/dropdowns/network-dropdown.js

@@ -7,8 +7,13 @@ import * as actions from '../../../store/actions'
 import {
   openAlert as displayInvalidCustomNetworkAlert,
 } from '../../../ducks/alerts/invalid-custom-network'
-import { NETWORKS_FORM_ROUTE } from '../../../helpers/constants/routes'
+import {
-import { isPrefixedFormattedHexString } from '../../../../../app/scripts/lib/util'
+  NETWORKS_ROUTE,
+  NETWORKS_FORM_ROUTE,
+} from '../../../helpers/constants/routes'
+import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../app/scripts/lib/enums'
+import { getEnvironmentType, isPrefixedFormattedHexString } from '../../../../../app/scripts/lib/util'
+
 import { Dropdown, DropdownMenuItem } from './components/dropdown'
 import NetworkDropdownIcon from './components/network-dropdown-icon'
 
@@ -44,6 +49,9 @@ function mapDispatchToProps (dispatch) {
     setNetworksTabAddMode: (isInAddMode) => {
       dispatch(actions.setNetworksTabAddMode(isInAddMode))
     },
+    setSelectedSettingsRpcUrl: (url) => {
+      dispatch(actions.setSelectedSettingsRpcUrl(url))
+    },
     displayInvalidCustomNetworkAlert: (networkName) => {
       dispatch(displayInvalidCustomNetworkAlert(networkName))
     },
@@ -67,6 +75,7 @@ class NetworkDropdown extends Component {
     setRpcTarget: PropTypes.func.isRequired,
     hideNetworkDropdown: PropTypes.func.isRequired,
     setNetworksTabAddMode: PropTypes.func.isRequired,
+    setSelectedSettingsRpcUrl: PropTypes.func.isRequired,
     frequentRpcListDetail: PropTypes.array.isRequired,
     networkDropdownOpen: PropTypes.bool.isRequired,
     history: PropTypes.object.isRequired,
@@ -176,7 +185,11 @@ class NetworkDropdown extends Component {
   }
 
   render () {
-    const { provider: { type: providerType, rpcUrl: activeNetwork }, setNetworksTabAddMode } = this.props
+    const {
+      provider: { type: providerType, rpcUrl: activeNetwork },
+      setNetworksTabAddMode,
+      setSelectedSettingsRpcUrl,
+    } = this.props
     const rpcListDetail = this.props.frequentRpcListDetail
     const isOpen = this.props.networkDropdownOpen
     const dropdownMenuItemStyle = {
@@ -337,8 +350,13 @@ class NetworkDropdown extends Component {
         <DropdownMenuItem
           closeMenu={() => this.props.hideNetworkDropdown()}
           onClick={() => {
+            this.props.history.push(
+              getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN
+                ? NETWORKS_ROUTE
+                : NETWORKS_FORM_ROUTE,
+            )
+            setSelectedSettingsRpcUrl('')
             setNetworksTabAddMode(true)
-            this.props.history.push(NETWORKS_FORM_ROUTE)
           }}
           style={dropdownMenuItemStyle}
         >

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

@@ -100,26 +100,23 @@
     max-width: 343px;
 
     @media screen and (max-width: 575px) {
+      flex: 1;
+      overflow-y: auto;
       max-width: 100vw;
       width: 100vw;
     }
   }
 
-  &__add-network-button-wrapper {
+  &__networks-list-popup-footer {
-    display: none;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 23px;
+    padding-bottom: 23px;
+    border-top: 1px solid #d8d8d8;
 
-    @media screen and (max-width: 575px) {
+    .button {
-      width: 100%;
+      width: 178px;
-      display: flex;
-      padding-top: 23px;
-      padding-bottom: 23px;
-      justify-content: center;
-      align-items: center;
-      border-top: 1px solid #d8d8d8;
-
-      .button {
-        width: 178px;
-      }
     }
   }
 

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

@@ -238,7 +238,7 @@ export default class NetworksTab extends PureComponent {
           {this.renderNetworksTabContent()}
           {!isFullScreen && !shouldRenderNetworkForm
             ? (
-              <div className="networks-tab__add-network-button-wrapper">
+              <div className="networks-tab__networks-list-popup-footer">
                 <Button
                   type="primary"
                   onClick={(event) => {

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

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Switch, Route, matchPath } from 'react-router-dom'
+import { Switch, Route, Redirect, matchPath } from 'react-router-dom'
 import classnames from 'classnames'
 import TabBar from '../../components/app/tab-bar'
 import {
@@ -35,7 +35,8 @@ class SettingsPage extends PureComponent {
     currentPath: PropTypes.string,
     history: PropTypes.object,
     isAddressEntryPage: PropTypes.bool,
-    isPopupView: PropTypes.bool,
+    isPopup: PropTypes.bool,
+    isFullScreen: PropTypes.bool,
     pathnameI18nKey: PropTypes.string,
     initialBreadCrumbRoute: PropTypes.string,
     breadCrumbTextKey: PropTypes.string,
@@ -86,13 +87,13 @@ class SettingsPage extends PureComponent {
 
   renderTitle () {
     const { t } = this.context
-    const { isPopupView, pathnameI18nKey, addressName } = this.props
+    const { isPopup, pathnameI18nKey, addressName } = this.props
 
     let titleText
 
-    if (isPopupView && addressName) {
+    if (isPopup && addressName) {
       titleText = addressName
-    } else if (pathnameI18nKey && isPopupView) {
+    } else if (pathnameI18nKey && isPopup) {
       titleText = t(pathnameI18nKey)
     } else {
       titleText = t('settings')
@@ -109,7 +110,7 @@ class SettingsPage extends PureComponent {
     const { t } = this.context
     const {
       currentPath,
-      isPopupView,
+      isPopup,
       isAddressEntryPage,
       pathnameI18nKey,
       addressName,
@@ -121,7 +122,7 @@ class SettingsPage extends PureComponent {
 
     let subheaderText
 
-    if (isPopupView && isAddressEntryPage) {
+    if (isPopup && isAddressEntryPage) {
       subheaderText = t('settings')
     } else if (initialBreadCrumbKey) {
       subheaderText = t(initialBreadCrumbKey)
@@ -178,6 +179,8 @@ class SettingsPage extends PureComponent {
   }
 
   renderContent () {
+    const { isFullScreen } = this.props
+
     return (
       <Switch>
         <Route
@@ -205,11 +208,9 @@ class SettingsPage extends PureComponent {
           path={NETWORKS_ROUTE}
           component={NetworksTab}
         />
-        <Route
+        <Route exact path={NETWORKS_FORM_ROUTE}>
-          exact
+          {isFullScreen ? <Redirect to={NETWORKS_ROUTE} /> : NetworksTab}
-          path={NETWORKS_FORM_ROUTE}
+        </Route>
-          component={NetworksTab}
-        />
         <Route
           exact
           path={SECURITY_ROUTE}

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

@@ -3,7 +3,10 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { getAddressBookEntryName } from '../../selectors'
 import { isValidAddress } from '../../helpers/utils/util'
-import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
+import {
+  ENVIRONMENT_TYPE_POPUP,
+  ENVIRONMENT_TYPE_FULLSCREEN,
+} from '../../../../app/scripts/lib/enums'
 import { getEnvironmentType } from '../../../../app/scripts/lib/util'
 import { getMostRecentOverviewPage } from '../../ducks/history/history'
 
@@ -53,7 +56,8 @@ const mapStateToProps = (state, ownProps) => {
   const isEditMyAccountsContactPage = Boolean(pathname.match(CONTACT_MY_ACCOUNTS_EDIT_ROUTE))
   const isNetworksFormPage = Boolean(pathname.match(NETWORKS_FORM_ROUTE))
 
-  const isPopupView = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+  const isPopup = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+  const isFullScreen = getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN
   const pathnameI18nKey = ROUTES_TO_I18N_KEYS[pathname]
 
   let backRoute = SETTINGS_ROUTE
@@ -85,7 +89,8 @@ const mapStateToProps = (state, ownProps) => {
     isMyAccountsPage,
     backRoute,
     currentPath: pathname,
-    isPopupView,
+    isPopup,
+    isFullScreen,
     pathnameI18nKey,
     addressName,
     initialBreadCrumbRoute,