diff --git a/ui/app/pages/settings/networks-tab/index.scss b/ui/app/pages/settings/networks-tab/index.scss index 455adb971..f0b66f62d 100644 --- a/ui/app/pages/settings/networks-tab/index.scss +++ b/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; diff --git a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js b/ui/app/pages/settings/networks-tab/network-form/network-form.component.js index f689c8ace..324c750b9 100644 --- a/ui/app/pages/settings/networks-tab/network-form/network-form.component.js +++ b/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 (
@@ -397,9 +413,9 @@ export default class NetworkForm extends PureComponent { -
- ) - : null - } + {isFullScreen && this.renderSubHeader()} +
+ {this.renderNetworksTabContent(isPopup)} + {!networkIsSelected && !networksTabIsInAddMode + ? ( +
+ +
+ ) + : null + } +
) } diff --git a/ui/app/pages/settings/settings.component.js b/ui/app/pages/settings/settings.component.js index d4372eed0..1b0462aa6 100644 --- a/ui/app/pages/settings/settings.component.js +++ b/ui/app/pages/settings/settings.component.js @@ -57,7 +57,7 @@ class SettingsPage extends PureComponent { >
{ - currentPath !== SETTINGS_ROUTE && currentPath !== NETWORKS_ROUTE && ( + currentPath !== SETTINGS_ROUTE && (
history.push(backRoute)} diff --git a/ui/app/pages/settings/settings.container.js b/ui/app/pages/settings/settings.container.js index 8336c0314..51895e4bc 100644 --- a/ui/app/pages/settings/settings.container.js +++ b/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'