From dba5bb01a0d1a1867cffecbc72edfa074350cdcd Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 20 Apr 2023 17:19:24 +0100
Subject: [PATCH] account & network dropdown tweaks

---
 README.md                                     |   4 +
 .../account-menu/account-menu.component.js    | 198 ++----------------
 ui/components/app/account-menu/index.scss     |  40 +---
 .../app/dropdowns/network-dropdown.js         | 133 +++---------
 ui/components/app/network-display/index.scss  |   3 -
 .../app/network-display/network-display.js    |  39 +---
 ui/components/ui/chip/chip.js                 |   7 +-
 ui/helpers/constants/design-system.ts         |  12 +-
 8 files changed, 70 insertions(+), 366 deletions(-)

diff --git a/README.md b/README.md
index 5fde01191..ff92c69a3 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,10 @@
 
 > 🦊 Minimalized version of MetaMask for my own personal use without the myriad of banners & buttons I will never use, and without that terrible Roboto typeface.
 
+<img align="left" width="250" alt="Screenshot 2023-04-20 at 17 04 11" src="https://user-images.githubusercontent.com/90316/233423656-d8e29bdd-f2ba-4723-b8c1-7349bd17bd14.png">
+
+<img width="250" alt="Screenshot 2023-04-20 at 17 04 26" src="https://user-images.githubusercontent.com/90316/233423678-d59cce20-72de-4331-ac9a-09e6b882dca9.png">
+
 <img width="250" alt="Screenshot 2023-04-05 at 19 58 35" src="https://user-images.githubusercontent.com/90316/230178834-31b92326-70d8-4ff0-82d3-c0c03f53f1e9.png">
 
 **Don't blindly trust me and double check the changes before installing this in your own browser.**
diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js
index 7c0b98bc3..a0f0632cf 100644
--- a/ui/components/app/account-menu/account-menu.component.js
+++ b/ui/components/app/account-menu/account-menu.component.js
@@ -1,41 +1,26 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { debounce } from 'lodash';
 import Fuse from 'fuse.js';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import classnames from 'classnames';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
-import {
-  MetaMetricsContextProp,
-  MetaMetricsEventAccountType,
-  MetaMetricsEventCategory,
-  MetaMetricsEventName,
-} from '../../../../shared/constants/metametrics';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import Identicon from '../../ui/identicon';
 import SiteIcon from '../../ui/site-icon';
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
-import {
-  PRIMARY,
-  ///: BEGIN:ONLY_INCLUDE_IN(beta,flask)
-  SUPPORT_REQUEST_LINK,
-  ///: END:ONLY_INCLUDE_IN
-} from '../../../helpers/constants/common';
+import { PRIMARY } from '../../../helpers/constants/common';
 import {
   SETTINGS_ROUTE,
   NEW_ACCOUNT_ROUTE,
   IMPORT_ACCOUNT_ROUTE,
   CONNECT_HARDWARE_ROUTE,
-  DEFAULT_ROUTE,
   ///: BEGIN:ONLY_INCLUDE_IN(flask)
   NOTIFICATIONS_ROUTE,
   ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/routes';
 import TextField from '../../ui/text-field';
 
-import Button from '../../ui/button';
 import SearchIcon from '../../ui/icon/search-icon';
-import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
 import { IconColor } from '../../../helpers/constants/design-system';
 import { Icon, IconName, IconSize } from '../../component-library';
 import KeyRingLabel from './keyring-label';
@@ -82,7 +67,6 @@ export default class AccountMenu extends Component {
     history: PropTypes.object,
     isAccountMenuOpen: PropTypes.bool,
     keyrings: PropTypes.array,
-    lockMetamask: PropTypes.func,
     selectedAddress: PropTypes.string,
     setSelectedAccount: PropTypes.func,
     toggleAccountMenu: PropTypes.func,
@@ -96,7 +80,6 @@ export default class AccountMenu extends Component {
   accountsRef;
 
   state = {
-    shouldShowScrollButton: false,
     searchQuery: '',
   };
 
@@ -113,22 +96,13 @@ export default class AccountMenu extends Component {
     ],
   });
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     const { isAccountMenuOpen: prevIsAccountMenuOpen } = prevProps;
-    const { searchQuery: prevSearchQuery } = prevState;
     const { isAccountMenuOpen } = this.props;
-    const { searchQuery } = this.state;
 
     if (!prevIsAccountMenuOpen && isAccountMenuOpen) {
-      this.setShouldShowScrollButton();
       this.resetSearchQuery();
     }
-
-    // recalculate on each search query change
-    // whether we can show scroll down button
-    if (isAccountMenuOpen && prevSearchQuery !== searchQuery) {
-      this.setShouldShowScrollButton();
-    }
   }
 
   renderAccountsSearch() {
@@ -208,16 +182,7 @@ export default class AccountMenu extends Component {
       return (
         <button
           className="account-menu__account account-menu__item--clickable"
-          onClick={() => {
-            this.context.trackEvent({
-              category: MetaMetricsEventCategory.Navigation,
-              event: MetaMetricsEventName.NavAccountSwitched,
-              properties: {
-                location: 'Main Menu',
-              },
-            });
-            setSelectedAccount(identity.address);
-          }}
+          onClick={() => setSelectedAccount(identity.address)}
           key={identity.address}
           data-testid="account-menu__account"
         >
@@ -263,52 +228,12 @@ export default class AccountMenu extends Component {
     this.setState({ searchQuery });
   }
 
-  setShouldShowScrollButton = () => {
-    if (!this.accountsRef) {
-      return;
-    }
-
-    const { scrollTop, offsetHeight, scrollHeight } = this.accountsRef;
-    const canScroll = scrollHeight > offsetHeight;
-    const atAccountListBottom = scrollTop + offsetHeight >= scrollHeight;
-    const shouldShowScrollButton = canScroll && !atAccountListBottom;
-
-    this.setState({ shouldShowScrollButton });
-  };
-
-  onScroll = debounce(this.setShouldShowScrollButton, 25);
-
-  handleScrollDown = (e) => {
-    e.stopPropagation();
-
-    const { scrollHeight } = this.accountsRef;
-    this.accountsRef.scroll({ left: 0, top: scrollHeight, behavior: 'smooth' });
-
-    this.setShouldShowScrollButton();
-  };
-
-  renderScrollButton() {
-    if (!this.state.shouldShowScrollButton) {
-      return null;
-    }
-
-    return (
-      <div
-        className="account-menu__scroll-button"
-        onClick={this.handleScrollDown}
-      >
-        <i className="fa fa-arrow-down" title={this.context.t('scrollDown')} />
-      </div>
-    );
-  }
-
   render() {
-    const { t, trackEvent } = this.context;
+    const { t } = this.context;
     const {
       shouldShowAccountsSearch,
       isAccountMenuOpen,
       toggleAccountMenu,
-      lockMetamask,
       history,
       ///: BEGIN:ONLY_INCLUDE_IN(flask)
       unreadNotificationsCount,
@@ -319,55 +244,24 @@ export default class AccountMenu extends Component {
       return null;
     }
 
-    let supportText = t('support');
-    let supportLink = SUPPORT_LINK;
-    ///: BEGIN:ONLY_INCLUDE_IN(beta,flask)
-    supportText = t('needHelpSubmitTicket');
-    supportLink = SUPPORT_REQUEST_LINK;
-    ///: END:ONLY_INCLUDE_IN
-
     return (
       <div className="account-menu">
         <div className="account-menu__close-area" onClick={toggleAccountMenu} />
-        <AccountMenuItem className="account-menu__header">
-          {t('myAccounts')}
-          <Button
-            className="account-menu__lock-button"
-            type="secondary"
-            onClick={() => {
-              lockMetamask();
-              history.push(DEFAULT_ROUTE);
-            }}
-          >
-            {t('lock')}
-          </Button>
-        </AccountMenuItem>
-        <div className="account-menu__divider" />
         <div className="account-menu__accounts-container">
           {shouldShowAccountsSearch ? this.renderAccountsSearch() : null}
           <div
             className="account-menu__accounts"
-            onScroll={this.onScroll}
             ref={(ref) => {
               this.accountsRef = ref;
             }}
           >
             {this.renderAccounts()}
           </div>
-          {this.renderScrollButton()}
         </div>
         <div className="account-menu__divider" />
         <AccountMenuItem
           onClick={() => {
             toggleAccountMenu();
-            trackEvent({
-              category: MetaMetricsEventCategory.Navigation,
-              event: MetaMetricsEventName.AccountAddSelected,
-              properties: {
-                account_type: MetaMetricsEventAccountType.Default,
-                location: 'Main Menu',
-              },
-            });
             history.push(NEW_ACCOUNT_ROUTE);
           }}
           icon={<Icon name={IconName.Add} color={IconColor.iconAlternative} />}
@@ -376,14 +270,6 @@ export default class AccountMenu extends Component {
         <AccountMenuItem
           onClick={() => {
             toggleAccountMenu();
-            trackEvent({
-              category: MetaMetricsEventCategory.Navigation,
-              event: MetaMetricsEventName.AccountAddSelected,
-              properties: {
-                account_type: MetaMetricsEventAccountType.Imported,
-                location: 'Main Menu',
-              },
-            });
             history.push(IMPORT_ACCOUNT_ROUTE);
           }}
           icon={
@@ -394,14 +280,6 @@ export default class AccountMenu extends Component {
         <AccountMenuItem
           onClick={() => {
             toggleAccountMenu();
-            trackEvent({
-              category: MetaMetricsEventCategory.Navigation,
-              event: MetaMetricsEventName.AccountAddSelected,
-              properties: {
-                account_type: MetaMetricsEventAccountType.Hardware,
-                location: 'Main Menu',
-              },
-            });
             if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
               global.platform.openExtensionInBrowser(CONNECT_HARDWARE_ROUTE);
             } else {
@@ -413,66 +291,32 @@ export default class AccountMenu extends Component {
           }
           text={t('connectHardwareWallet')}
         />
-        <div className="account-menu__divider" />
         {
           ///: BEGIN:ONLY_INCLUDE_IN(flask)
-          <>
-            <AccountMenuItem
-              onClick={() => {
-                toggleAccountMenu();
-                history.push(NOTIFICATIONS_ROUTE);
-              }}
-              icon={
-                <div className="account-menu__notifications">
-                  <Icon name={IconName.Notification} size={IconSize.Lg} />
-                  {unreadNotificationsCount > 0 && (
-                    <div className="account-menu__notifications__count">
-                      {unreadNotificationsCount}
-                    </div>
-                  )}
-                </div>
-              }
-              text={t('notifications')}
-            />
-            <div className="account-menu__divider" />
-          </>
+          <AccountMenuItem
+            onClick={() => {
+              toggleAccountMenu();
+              history.push(NOTIFICATIONS_ROUTE);
+            }}
+            icon={
+              <div className="account-menu__notifications">
+                <Icon name={IconName.Notification} size={IconSize.Lg} />
+                {unreadNotificationsCount > 0 && (
+                  <div className="account-menu__notifications__count">
+                    {unreadNotificationsCount}
+                  </div>
+                )}
+              </div>
+            }
+            text={t('notifications')}
+          />
           ///: END:ONLY_INCLUDE_IN
         }
-        <AccountMenuItem
-          onClick={() => {
-            trackEvent(
-              {
-                category: MetaMetricsEventCategory.Navigation,
-                event: MetaMetricsEventName.SupportLinkClicked,
-                properties: {
-                  url: supportLink,
-                },
-              },
-              {
-                contextPropsIntoEventProperties: [
-                  MetaMetricsContextProp.PageTitle,
-                ],
-              },
-            );
-            global.platform.openTab({ url: supportLink });
-          }}
-          icon={
-            <Icon name={IconName.Messages} color={IconColor.iconAlternative} />
-          }
-          text={supportText}
-        />
 
         <AccountMenuItem
           onClick={() => {
             toggleAccountMenu();
             history.push(SETTINGS_ROUTE);
-            this.context.trackEvent({
-              category: MetaMetricsEventCategory.Navigation,
-              event: MetaMetricsEventName.NavSettingsOpened,
-              properties: {
-                location: 'Main Menu',
-              },
-            });
           }}
           icon={
             <Icon
diff --git a/ui/components/app/account-menu/index.scss b/ui/components/app/account-menu/index.scss
index 00a6688df..a2bac18d7 100644
--- a/ui/components/app/account-menu/index.scss
+++ b/ui/components/app/account-menu/index.scss
@@ -6,7 +6,6 @@
   border-radius: 4px;
   background: var(--color-background-default);
   box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
-  min-width: 150px;
   color: var(--color-text-default);
 
   @include screen-sm-max {
@@ -26,7 +25,7 @@
   }
 
   &__item {
-    padding: 18px;
+    padding: 8px 16px;
     display: flex;
     flex-flow: row wrap;
     align-items: center;
@@ -36,11 +35,6 @@
     background: none;
     width: 100%;
 
-    @include screen-sm-max {
-      padding: 0 14px;
-      height: 40px;
-    }
-
     &--clickable {
       cursor: pointer;
 
@@ -184,18 +178,17 @@
   &__no-accounts {
     @include H6;
 
-    padding: 16px 14px;
+    padding: 16px;
   }
 
   &__account {
     display: flex;
     flex-flow: row nowrap;
-    padding: 14px;
+    padding: 8px 16px;
     flex: 0 0 auto;
     background: none;
     border: 0;
     width: 100%;
-    border-bottom: 1px solid var(--color-border-muted);
 
     .remove-account-icon {
       width: 15px;
@@ -233,7 +226,7 @@
   }
 
   &__name {
-    @include Paragraph;
+    @include H6;
 
     color: var(--color-text-default);
     text-overflow: ellipsis;
@@ -246,37 +239,16 @@
   &__balance {
     @include H6;
 
+    font-weight: 400;
     color: var(--color-text-alternative);
   }
 
   &__action {
-    @include Paragraph;
+    @include H6;
 
     cursor: pointer;
   }
 
-  &__scroll-button {
-    position: absolute;
-    bottom: 12px;
-    right: 12px;
-    height: 28px;
-    width: 28px;
-    border-radius: 14px;
-    border: 1px solid var(--color-border-default);
-    background: var(--color-background-alternative);
-    color: var(--color-icon-default);
-    z-index: 201;
-    cursor: pointer;
-    opacity: 0.8;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
   &__icon-list {
     display: flex;
   }
diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js
index 3a5b7d3e3..e2983cfb8 100644
--- a/ui/components/app/dropdowns/network-dropdown.js
+++ b/ui/components/app/dropdowns/network-dropdown.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
 import { pickBy } from 'lodash';
-import Button from '../../ui/button';
+import { Button } from '../../component-library/button';
 import * as actions from '../../../store/actions';
 import { openAlert as displayInvalidCustomNetworkAlert } from '../../../ducks/alerts/invalid-custom-network';
 import {
@@ -18,22 +18,17 @@ import {
 } from '../../../../shared/constants/network';
 import { isPrefixedFormattedHexString } from '../../../../shared/modules/network.utils';
 
-import ColorIndicator from '../../ui/color-indicator';
-import { IconColor, Size } from '../../../helpers/constants/design-system';
+import {
+  IconColor,
+  Color,
+  FontWeight,
+} from '../../../helpers/constants/design-system';
 import { getShowTestNetworks } from '../../../selectors';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
-import {
-  MetaMetricsEventCategory,
-  MetaMetricsEventName,
-  MetaMetricsNetworkEventSource,
-} from '../../../../shared/constants/metametrics';
-import {
-  ADD_POPULAR_CUSTOM_NETWORK,
-  ADVANCED_ROUTE,
-} from '../../../helpers/constants/routes';
+import { MetaMetricsNetworkEventSource } from '../../../../shared/constants/metametrics';
+import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import { Icon, IconName } from '../../component-library';
-
 import { Dropdown, DropdownMenuItem } from './dropdown';
 
 // classes from nodes of the toggle element.
@@ -47,9 +42,8 @@ const notToggleElementClassnames = [
 ];
 
 const DROP_DOWN_MENU_ITEM_STYLE = {
-  fontSize: '16px',
-  lineHeight: '20px',
-  padding: '16px',
+  fontSize: '0.875rem', // h6 size from SCSS design system
+  padding: '12px',
 };
 
 function mapStateToProps(state) {
@@ -109,31 +103,14 @@ class NetworkDropdown extends Component {
     shouldShowTestNetworks: PropTypes.bool,
     networkDropdownOpen: PropTypes.bool.isRequired,
     displayInvalidCustomNetworkAlert: PropTypes.func.isRequired,
-    // showConfirmDeleteNetworkModal: PropTypes.func.isRequired,
-    showTestnetMessageInDropdown: PropTypes.bool.isRequired,
-    hideTestNetMessage: PropTypes.func.isRequired,
     history: PropTypes.object,
     dropdownStyles: PropTypes.object,
-    hideElementsForOnboarding: PropTypes.bool,
     onAddClick: PropTypes.func,
     upsertNetworkConfiguration: PropTypes.func.isRequired,
   };
 
   handleClick(newProviderType) {
-    const {
-      provider: { type: providerType },
-      setProviderType,
-    } = this.props;
-    const { trackEvent } = this.context;
-
-    trackEvent({
-      category: MetaMetricsEventCategory.Navigation,
-      event: MetaMetricsEventName.NavNetworkSwitched,
-      properties: {
-        from_network: providerType,
-        to_network: newProviderType,
-      },
-    });
+    const { setProviderType } = this.props;
     setProviderType(newProviderType);
   }
 
@@ -142,7 +119,9 @@ class NetworkDropdown extends Component {
     return (
       <div className="network__add-network-button">
         <Button
-          type="secondary"
+          type="link"
+          startIconName={IconName.Add}
+          color={Color.primaryDefault}
           onClick={() => {
             if (onAddClick) {
               onAddClick();
@@ -162,7 +141,7 @@ class NetworkDropdown extends Component {
     );
   }
 
-  renderCustomRpcList(networkConfigurations, provider, opts = {}) {
+  renderCustomRpcList(networkConfigurations, provider) {
     return Object.entries(networkConfigurations).map(
       ([networkConfigurationId, networkConfiguration]) => {
         const { rpcUrl, chainId, nickname = '' } = networkConfiguration;
@@ -179,29 +158,19 @@ class NetworkDropdown extends Component {
                 this.props.displayInvalidCustomNetworkAlert(nickname || rpcUrl);
               }
             }}
-            style={{
-              fontSize: '16px',
-              lineHeight: '20px',
-              padding: '16px',
-            }}
+            style={DROP_DOWN_MENU_ITEM_STYLE}
           >
             {isCurrentRpcTarget ? (
               <Icon name={IconName.Check} color={IconColor.successDefault} />
             ) : (
               <div className="network-check__transparent">✓</div>
             )}
-            <ColorIndicator
-              color={opts.isLocalHost ? 'localhost' : IconColor.iconMuted}
-              size={Size.LG}
-              type={ColorIndicator.TYPES.FILLED}
-            />
             <span
               className="network-name-item"
               data-testid={`${nickname}-network-item`}
               style={{
-                color: isCurrentRpcTarget
-                  ? 'var(--color-text-default)'
-                  : 'var(--color-text-alternative)',
+                fontWeight: isCurrentRpcTarget ? FontWeight.Bold : null,
+                marginLeft: '8px',
               }}
             >
               {nickname || rpcUrl}
@@ -249,19 +218,12 @@ class NetworkDropdown extends Component {
         ) : (
           <div className="network-check__transparent">✓</div>
         )}
-        <ColorIndicator
-          color={network}
-          size={Size.LG}
-          type={ColorIndicator.TYPES.FILLED}
-        />
         <span
           className="network-name-item"
           data-testid={`${network}-network-item`}
           style={{
-            color:
-              providerType === network
-                ? 'var(--color-text-default)'
-                : 'var(--color-text-alternative)',
+            fontWeight: providerType === network ? FontWeight.Bold : null,
+            marginLeft: '8px',
           }}
         >
           {this.context.t(network)}
@@ -318,19 +280,12 @@ class NetworkDropdown extends Component {
         ) : (
           <div className="network-check__transparent">✓</div>
         )}
-        <ColorIndicator
-          color={network}
-          size={Size.LG}
-          type={ColorIndicator.TYPES.FILLED}
-        />
         <span
           className="network-name-item"
           data-testid={`${network}-network-item`}
           style={{
-            color:
-              provider.type === network
-                ? 'var(--color-text-default)'
-                : 'var(--color-text-alternative)',
+            fontWeight: provider.type === network ? FontWeight.Bold : null,
+            marginLeft: '8px',
           }}
         >
           {this.context.t(network)}
@@ -341,12 +296,8 @@ class NetworkDropdown extends Component {
 
   render() {
     const {
-      history,
-      hideElementsForOnboarding,
       hideNetworkDropdown,
       shouldShowTestNetworks,
-      showTestnetMessageInDropdown,
-      hideTestNetMessage,
       networkConfigurations,
     } = this.props;
 
@@ -362,7 +313,6 @@ class NetworkDropdown extends Component {
     );
 
     const isOpen = this.props.networkDropdownOpen;
-    const { t } = this.context;
 
     return (
       <Dropdown
@@ -384,47 +334,12 @@ class NetworkDropdown extends Component {
           this.props.dropdownStyles || {
             position: 'absolute',
             top: '58px',
-            width: '309px',
+            width: '250px',
             zIndex: '55',
           }
         }
-        innerStyle={{
-          padding: '16px 0',
-        }}
+        innerStyle={{ padding: '0 0 16px 0' }}
       >
-        <div className="network-dropdown-header">
-          {hideElementsForOnboarding ? null : (
-            <div className="network-dropdown-title">{t('networks')}</div>
-          )}
-          {hideElementsForOnboarding ? null : (
-            <div className="network-dropdown-divider" />
-          )}
-          {showTestnetMessageInDropdown && !hideElementsForOnboarding ? (
-            <div className="network-dropdown-content">
-              {t('toggleTestNetworks', [
-                <a
-                  href="#"
-                  key="advancedSettingsLink"
-                  className="network-dropdown-content--link"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    hideNetworkDropdown();
-                    history.push(`${ADVANCED_ROUTE}#show-testnets`);
-                  }}
-                >
-                  {t('showHide')}
-                </a>,
-              ])}
-              <Button
-                onClick={hideTestNetMessage}
-                className="network-dropdown-content--dismiss"
-              >
-                {t('dismiss')}
-              </Button>
-            </div>
-          ) : null}
-        </div>
-
         <div className="network-dropdown-list">
           {this.renderNetworkEntry(NETWORK_TYPES.MAINNET)}
 
diff --git a/ui/components/app/network-display/index.scss b/ui/components/app/network-display/index.scss
index 16755aa5f..0eda6e391 100644
--- a/ui/components/app/network-display/index.scss
+++ b/ui/components/app/network-display/index.scss
@@ -2,9 +2,6 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 0 10px;
-  border-radius: 4px;
-  min-height: 25px;
   user-select: none;
 
   &--disabled {
diff --git a/ui/components/app/network-display/network-display.js b/ui/components/app/network-display/network-display.js
index 57670908a..a66f396eb 100644
--- a/ui/components/app/network-display/network-display.js
+++ b/ui/components/app/network-display/network-display.js
@@ -8,12 +8,10 @@ import {
 } from '../../../../shared/constants/network';
 
 import LoadingIndicator from '../../ui/loading-indicator';
-import ColorIndicator from '../../ui/color-indicator';
 import {
   BorderColor,
-  IconColor,
-  Size,
-  TypographyVariant,
+  FontWeight,
+  Color,
 } from '../../../helpers/constants/design-system';
 import Chip from '../../ui/chip/chip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -21,7 +19,6 @@ import { isNetworkLoading } from '../../../selectors';
 import { Icon, IconName, IconSize } from '../../component-library';
 
 export default function NetworkDisplay({
-  indicatorSize,
   disabled,
   labelProps,
   targetNetwork,
@@ -39,31 +36,14 @@ export default function NetworkDisplay({
   return (
     <Chip
       dataTestId="network-display"
-      borderColor={
-        onClick ? BorderColor.borderDefault : BorderColor.borderMuted
-      }
+      borderColor={BorderColor.transparent}
       onClick={onClick}
       leftIcon={
         <LoadingIndicator
           alt={t('attemptingConnect')}
           title={t('attemptingConnect')}
           isLoading={networkIsLoading}
-        >
-          <ColorIndicator
-            color={
-              networkType === NETWORK_TYPES.RPC
-                ? IconColor.iconMuted
-                : networkType
-            }
-            size={indicatorSize}
-            type={ColorIndicator.TYPES.FILLED}
-            iconClassName={
-              networkType === NETWORK_TYPES.RPC && indicatorSize !== Size.XS
-                ? 'fa fa-question'
-                : undefined
-            }
-          />
-        </LoadingIndicator>
+        />
       }
       rightIcon={
         onClick ? <Icon name={IconName.ArrowDown} size={IconSize.Xs} /> : null
@@ -78,17 +58,14 @@ export default function NetworkDisplay({
         'network-display--clickable': typeof onClick === 'function',
       })}
       labelProps={{
-        variant: TypographyVariant.H7,
+        fontWeight: FontWeight.Medium,
+        color: Color.textDefault,
         ...labelProps,
       }}
     />
   );
 }
 NetworkDisplay.propTypes = {
-  /**
-   * The size of the indicator
-   */
-  indicatorSize: PropTypes.oneOf(Object.values(Size)),
   /**
    * The label props of the label can use most of the Typography props
    */
@@ -115,7 +92,3 @@ NetworkDisplay.propTypes = {
    */
   onClick: PropTypes.func,
 };
-
-NetworkDisplay.defaultProps = {
-  indicatorSize: Size.LG,
-};
diff --git a/ui/components/ui/chip/chip.js b/ui/components/ui/chip/chip.js
index 3fbfaf5dd..b7d4f0065 100644
--- a/ui/components/ui/chip/chip.js
+++ b/ui/components/ui/chip/chip.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { omit } from 'lodash';
-import Typography from '../typography';
+import { Text } from '../../component-library/text';
 import UrlIcon from '../url-icon';
 import {
   BackgroundColor,
@@ -57,15 +57,14 @@ export default function Chip({
         <UrlIcon className="chip__left-url-icon" url={leftIconUrl} />
       ) : null}
       {children ?? (
-        <Typography
+        <Text
           className="chip__label"
-          variant={TypographyVariant.H6}
           as="span"
           color={TextColor.textAlternative}
           {...labelProps}
         >
           {label}
-        </Typography>
+        </Text>
       )}
       {rightIcon ? <div className="chip__right-icon">{rightIcon}</div> : null}
     </div>
diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts
index 2d5f2deb7..796bb6345 100644
--- a/ui/helpers/constants/design-system.ts
+++ b/ui/helpers/constants/design-system.ts
@@ -331,15 +331,15 @@ export const TEXT_TRANSFORM = {
 };
 
 export enum FontWeight {
-  Bold = 'bold',
-  Medium = 'medium',
-  Normal = 'normal',
+  Bold = '600',
+  Medium = '500',
+  Normal = '400',
 }
 
 export const FONT_WEIGHT = {
-  BOLD: 'bold',
-  MEDIUM: 'medium',
-  NORMAL: 'normal',
+  BOLD: '600',
+  MEDIUM: '500',
+  NORMAL: '400',
 };
 
 export enum OverflowWrap {