Fix/14856 network settings page (#14857)

* Removing other features code

* Improving acccessibility of check icon

* Fixing add network button footer in popover view

* Fixing unit tests

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

@@ -174,7 +174,7 @@ class NetworkDropdown extends Component {
             <div className="network-check__transparent">✓</div>
           )}
           <ColorIndicator
-            color={opts.isLocalHost ? 'localhost' : COLORS.TEXT_MUTED}
+            color={opts.isLocalHost ? 'localhost' : COLORS.ICON_MUTED}
             size={SIZES.LG}
             type={ColorIndicator.TYPES.FILLED}
           />

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

@@ -79,7 +79,7 @@ describe('Network Dropdown', () => {
       let found = false;
       while (!found) {
         if (
-          _wrapper.find(ColorIndicator).at(i).prop('color') === 'text-muted'
+          _wrapper.find(ColorIndicator).at(i).prop('color') === 'icon-muted'
         ) {
           i += 1;
         } else {

ui/components/app/network-display/network-display.js

@@ -48,9 +48,7 @@ export default function NetworkDisplay({
         >
           <ColorIndicator
             color={
-              networkType === NETWORK_TYPE_RPC
+              networkType === NETWORK_TYPE_RPC ? COLORS.ICON_MUTED : networkType
-                ? COLORS.ICON_DEFAULT
-                : networkType
             }
             size={indicatorSize}
             type={ColorIndicator.TYPES.FILLED}

ui/components/ui/color-indicator/color-indicator.js

@@ -6,7 +6,7 @@ import { COLORS, SIZES } from '../../../helpers/constants/design-system';
 export default function ColorIndicator({
   size = SIZES.SM,
   type = 'outlined',
-  color = COLORS.ICON_DEFAULT,
+  color = COLORS.ICON_MUTED,
   borderColor,
   iconClassName,
 }) {

ui/components/ui/text-field/index.scss

@@ -2,3 +2,9 @@
 .MuiInputBase-input {
   color: var(--color-text-default) !important;
 }
+
+.MuiFormHelperText-root.Mui-error {
+  @include H7;
+
+  color: var(--color-error-default) !important;
+}

ui/helpers/constants/design-system.js

@@ -11,6 +11,7 @@ export const COLORS = {
   TEXT_ALTERNATIVE: 'text-alternative',
   TEXT_MUTED: 'text-muted',
   ICON_DEFAULT: 'icon-default',
+  ICON_ALTERNATIVE: 'text-alternative',
   ICON_MUTED: 'icon-muted',
   BORDER_DEFAULT: 'border-default',
   BORDER_MUTED: 'border-muted',

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

@@ -7,31 +7,34 @@
   }
 
   &__content {
-    display: flex;
+    &--with-networks-list-popup-footer {
-    height: 100%;
+      // padding-bottom required to offset content from fixed footer: &__networks-list-popup-footer
-    max-width: 779px;
+      padding-bottom: 80px;
-    justify-content: space-between;
+      // isolation contains stacking context(z-index) of &__networks-list-popup-footer
-
+      isolation: isolate;
-    &__custom-image {
-      border: 1px solid var(--color-border-default);
-      margin-inline-start: 8px;
     }
 
-    &__check-icon {
+    @media screen and (min-width: $break-large) {
-      margin-inline-end: 10px;
+      display: grid;
-      color: var(--color-success-default);
+      grid-template-columns: 1fr 1fr;
+    }
 
-      &__transparent {
+    &__icon-check {
-        color: transparent;
+      max-width: 24px;
-        width: 16px;
+      flex: 0 0 24px;
-        margin-inline-end: 10px;
+    }
-      }
+
+    &__custom-image {
+      border: 1px solid var(--color-border-muted);
     }
 
     &__icon-with-fallback {
-      padding: 0 1px 2px 2px;
+      display: flex;
+      align-items: center;
+      padding: 0;
+      max-width: 24px;
+      flex: 0 0 24px;
       color: var(--color-text-alternative);
-      margin-inline-start: 8px;
 
       @each $variant, $color in design-system.$color-map {
         &--color-#{$variant} {
@@ -40,160 +43,90 @@
         }
       }
     }
-
-    @media screen and (max-width: $break-small) {
-      margin-top: 0;
-      flex-direction: column;
-      overflow-x: hidden;
-      align-items: center;
-    }
   }
 
   &__body {
-    padding-right: 24px;
-    height: 100%;
     display: flex;
     flex-direction: column;
 
-    @media screen and (max-width: $break-small) {
+    @media screen and (min-width: $break-large) {
-      padding: 0;
+      margin-inline-end: 16px;
+      margin-bottom: 24px;
     }
   }
 
   &__subheader {
-    @include H4;
+    display: none;
 
-    padding: 16px 4px;
+    @media screen and (min-width: $break-large) {
-    border-bottom: 1px solid var(--color-border-default);
+      @include H4;
-    height: 72px;
-    align-items: center;
-    display: flex;
-    flex-flow: row nowrap;
-  }
 
-  &__subheader--break {
+      padding: 16px 4px;
-    margin-inline-start: 10px;
+      border-bottom: 1px solid var(--color-border-default);
+      height: 72px;
+      align-items: center;
+      display: flex;
+      gap: 8px;
+      flex-flow: row nowrap;
+    }
   }
 
   &__sub-header-text {
     @include H4;
 
     color: var(--color-text-muted);
-    margin-right: 10px;
   }
 
   &__network-form {
-    display: flex;
+    padding: 16px 24px;
-    flex: 1 0;
+
-    flex-direction: column;
+    @media screen and (min-width: $break-large) {
-    justify-content: space-between;
+      padding: 16px;
-    max-height: 465px;
+    }
-    max-width: 400px;
-    margin-top: 24px;
-    padding-inline-start: 24px;
 
     .page-container__footer {
       border-top: none;
 
-      @media screen and (max-width: $break-small) {
-        width: 93%;
-      }
-
       footer {
         padding: 10px 0;
       }
     }
-
-    @media screen and (max-width: $break-small) {
-      display: flex;
-      flex: auto;
-      max-width: 100%;
-      max-height: 100%;
-      align-items: center;
-      width: 90%;
-      margin-top: 10px;
-      padding: 0;
-    }
-  }
-
-  &__add-network-form {
-    display: flex;
-    flex-direction: column;
-    max-height: 465px;
-  }
-
-  &__network-form-body {
-    display: grid;
-    grid-template-columns: 100%;
-    width: 95%;
-
-    &__view-only {
-      width: 100%;
-    }
-  }
-
-  &__add-network-form-body {
-    display: grid;
-    grid-template-columns: 48% 48%;
-    column-gap: 5%;
-    margin-top: 24px;
-    width: 100%;
   }
 
   &__networks-list {
-    flex: 0.5 0 auto;
+    display: flex;
-    max-width: 350px;
+    flex-direction: column;
-    border-right: 1px solid var(--color-border-muted);
+    gap: 16px;
+    padding: 16px 24px;
+
+    @media screen and (min-width: $break-large) {
+      padding: 16px;
+      min-width: 160px; // Allow network form to take priority in the grid on resize
+      border-right: 1px solid var(--color-border-muted);
+    }
 
     &__custom-search-network {
-      margin-top: 24px;
+      @include H6;
-    }
 
-    .MuiInput-input {
+      @media screen and (min-width: $break-large) {
-      font-size: 14px;
+        @include Paragraph;
-
-      @media screen and (max-width: $break-small) {
-        font-size: 12px;
       }
     }
-
-    .MuiTextField-root {
-      padding-inline-end: 16px;
-
-      #search-networks-helper-text {
-        color: var(--color-text-alternative);
-      }
-
-      @media screen and (max-width: $break-small) {
-        padding: 0 24px 0 24px;
-      }
-    }
-
-    &__label {
-      @media screen and (max-width: $break-small) {
-        margin-inline-start: 58px;
-      }
-    }
-
-    @media screen and (max-width: $break-small) {
-      flex: 1;
-      overflow-y: auto;
-      max-width: 100vw;
-      width: 100vw;
-      margin-top: 0;
-    }
   }
 
   &__networks-list-popup-footer {
-    width: 100%;
     display: flex;
     justify-content: center;
-    padding-top: 23px;
+    padding: 16px 24px;
-    padding-bottom: 23px;
     border-top: 1px solid var(--color-border-default);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: var(--color-background-default);
 
-    .button {
+    @media screen and (min-width: $break-large) {
-      width: 178px;
+      display: none;
     }
   }
 
@@ -218,39 +151,16 @@
 
   &__networks-list-item {
     display: flex;
-    padding: 12px 16px 12px 0;
+    gap: 4px;
-    position: relative;
+    padding-top: 4px;
-    align-items: center;
+    padding-bottom: 4px;
-    width: 311px;
-
-    .color-indicator {
-      &:hover {
-        cursor: pointer;
-      }
-
-      @media screen and (max-width: $break-small) {
-        margin: 0 4px 0 20px;
-      }
-    }
-
-    @media screen and (max-width: $break-small) {
-      padding: 12px 0 12px 24px;
-      max-width: 351px;
-    }
-  }
-
-  &__networks-list-item:last-of-type {
-    @media screen and (max-width: $break-small) {
-      border-bottom: none;
-    }
   }
 
   &__networks-list-name {
     @include Paragraph;
 
-    margin-left: 11px;
+    margin-left: 8px;
     color: var(--color-text-alternative);
-    width: 70%;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -291,34 +201,43 @@
   &__network-form-footer {
     display: flex;
     flex-flow: row nowrap;
-    padding: 0.75rem 0;
+    padding: 12px 0;
-    width: 95%;
-
-    @media screen and (max-width: $break-small) {
-      width: 93%;
-    }
 
     .btn--rounded {
       white-space: nowrap;
     }
 
     .btn-secondary {
-      margin-right: 0.375rem;
+      margin-left: auto;
     }
 
     .btn-primary {
-      margin-left: 0.375rem;
+      margin-left: 16px;
     }
 
     .btn-danger {
-      margin-right: 3.75rem;
+      margin-right: 16px;
+    }
+  }
+
+  &__add-network-form {
+    padding: 16px 24px;
+    grid-column: span 2; // spread both columns of grid layout
+
+    @media screen and (min-width: $break-large) {
+      max-width: 400px; // but only expand to 400px
+      padding: 16px;
+    }
+
+    &__alert {
+      margin-top: 0;
     }
   }
 
   &__add-network-form-footer {
     display: flex;
     flex-flow: row;
-    padding: 0.75rem 0;
+    padding: 12px 0;
     width: 60%;
 
     .btn-secondary {

ui/pages/settings/networks-tab/networks-form/networks-form.js

@@ -551,6 +551,7 @@ const NetworksForm = ({
           iconFillColor="var(--color-warning-default)"
           useIcon
           withRightButton
+          className="networks-tab__add-network-form__alert"
         />
       ) : null}
       <div

ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js

@@ -73,9 +73,17 @@ const NetworksListItem = ({
       }}
     >
       {isCurrentRpcTarget ? (
-        <IconCheck color="var(--color-success-default)" />
+        <IconCheck
+          className="networks-tab__content__icon-check"
+          color="var(--color-success-default)"
+          aria-label={t('active')}
+        />
       ) : (
-        <div className="networks-tab__content__check-icon__transparent">✓</div>
+        <IconCheck
+          className="networks-tab__content__icon-check"
+          color="transparent"
+          aria-hidden="true"
+        />
       )}
       {network.chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? (
         <Identicon

ui/pages/settings/networks-tab/networks-list/networks-list.js

@@ -66,7 +66,7 @@ const NetworksList = ({
       {searchQuery === '' && (
         <Typography
           variant={TYPOGRAPHY.H6}
-          margin={[6, 0, 0, 9]}
+          marginTop={4}
           color={COLORS.TEXT_ALTERNATIVE}
           className="networks-tab__networks-list__label"
         >

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

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -92,7 +93,12 @@ const NetworksTab = ({ addNewNetwork }) => {
       {isFullScreen ? (
         <NetworksFormSubheader addNewNetwork={addNewNetwork} />
       ) : null}
-      <div className="networks-tab__content">
+      <div
+        className={classnames('networks-tab__content', {
+          'networks-tab__content--with-networks-list-popup-footer':
+            !isFullScreen && !shouldRenderNetworkForm,
+        })}
+      >
         {addNewNetwork ? (
           <NetworksForm
             networksToRender={networksToRender}