Dark Mode: Network display fix (#14159)

ui/components/app/app-header/app-header.component.js

@@ -122,8 +122,6 @@ export default class AppHeader extends PureComponent {
             {!hideNetworkIndicator && (
               <div className="app-header__network-component-wrapper">
                 <NetworkDisplay
-                  colored={false}
-                  outline
                   onClick={(event) => this.handleNetworkIndicatorClick(event)}
                   disabled={disabled || disableNetworkIndicator}
                 />

ui/components/app/network-display/index.scss

@@ -11,34 +11,6 @@
     cursor: not-allowed;
   }
 
-  &--colored {
-    background-color: lighten(rgb(125, 128, 130), 45%);
-  }
-
-  &--mainnet {
-    background-color: lighten($blue-lagoon, 68%);
-  }
-
-  &--ropsten {
-    background-color: lighten($crimson, 45%);
-  }
-
-  &--kovan {
-    background-color: lighten($purple, 65%);
-  }
-
-  &--rinkeby {
-    background-color: lighten($tulip-tree, 35%);
-  }
-
-  &--goerli {
-    background-color: lighten($dodger-blue, 35%);
-  }
-
-  &--localhost {
-    background-color: lighten($blue-lagoon, 68%);
-  }
-
   &.chip {
     margin: 0;
     max-width: 100%;

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

@@ -20,8 +20,6 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import { isNetworkLoading } from '../../../selectors';
 
 export default function NetworkDisplay({
-  colored,
-  outline,
   indicatorSize,
   disabled,
   labelProps,
@@ -40,7 +38,7 @@ export default function NetworkDisplay({
 
   return (
     <Chip
-      borderColor={outline ? COLORS.BORDER_MUTED : COLORS.TRANSPARENT}
+      borderColor={onClick ? COLORS.BORDER_DEFAULT : COLORS.BORDER_MUTED}
       onClick={onClick}
       leftIcon={
         <LoadingIndicator
@@ -64,16 +62,18 @@ export default function NetworkDisplay({
           />
         </LoadingIndicator>
       }
-      rightIcon={<IconCaretDown size={16} className="network-display__icon" />}
+      rightIcon={
+        onClick ? (
+          <IconCaretDown size={16} className="network-display__icon" />
+        ) : null
+      }
       label={
         networkType === NETWORK_TYPE_RPC
           ? networkNickname ?? t('privateNetwork')
           : t(networkType)
       }
       className={classnames('network-display', {
-        'network-display--colored': colored,
         'network-display--disabled': disabled,
-        [`network-display--${networkType}`]: colored && networkType,
         'network-display--clickable': typeof onClick === 'function',
       })}
       labelProps={{
@@ -84,22 +84,37 @@ export default function NetworkDisplay({
   );
 }
 NetworkDisplay.propTypes = {
-  colored: PropTypes.bool,
+  /**
+   * The size of the indicator
+   */
   indicatorSize: PropTypes.oneOf(Object.values(SIZES)),
+  /**
+   * The label props of the label can use most of the Typography props
+   */
   labelProps: Chip.propTypes.labelProps,
+  /**
+   * The target network
+   */
   targetNetwork: PropTypes.shape({
     type: PropTypes.oneOf([
-      ...Object.values(NETWORK_TYPE_TO_ID_MAP),
+      ...Object.keys(NETWORK_TYPE_TO_ID_MAP),
       NETWORK_TYPE_RPC,
     ]),
     nickname: PropTypes.string,
   }),
-  outline: PropTypes.bool,
+  /**
+   * Whether the NetworkDisplay is disabled
+   */
   disabled: PropTypes.bool,
+  /**
+   * The onClick event handler of the NetworkDisplay
+   * if it is not passed it is assumed that the NetworkDisplay
+   * should not be interactive and removes the caret and changes the border color
+   * of the NetworkDisplay
+   */
   onClick: PropTypes.func,
 };
 
 NetworkDisplay.defaultProps = {
-  colored: true,
   indicatorSize: SIZES.LG,
 };

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

@@ -1,34 +1,93 @@
 import React from 'react';
+
+import {
+  NETWORK_TYPE_TO_ID_MAP,
+  NETWORK_TYPE_RPC,
+} from '../../../../shared/constants/network';
+import { SIZES } from '../../../helpers/constants/design-system';
+
 import NetworkDisplay from '.';
 
 export default {
   title: 'Components/App/NetworkDisplay',
   id: __filename,
   argTypes: {
-    colored: {
-      control: 'boolean',
-    },
     indicatorSize: {
-      control: 'oneOf(Object.values(SIZES))',
+      control: 'select',
+      options: Object.values(SIZES),
     },
     labelProps: {
-      control: 'labelProps',
-    },
-    targetNetwork: {
       control: 'object',
     },
-    outline: {
-      control: 'boolean',
+    targetNetwork: {
+      control: 'select',
+      options: [...Object.keys(NETWORK_TYPE_TO_ID_MAP), NETWORK_TYPE_RPC],
     },
     disabled: {
       control: 'boolean',
     },
     onClick: {
       action: 'onClick',
+      description:
+        'The onClick event handler of the NetworkDisplay. If it is not passed it is assumed that the NetworkDisplay SHOULD NOT be interactive and removes the caret and changes the border color of the NetworkDisplay to border-muted',
     },
   },
+  args: {
+    targetNetwork: 'ropsten',
+  },
 };
 
-export const DefaultStory = (args) => <NetworkDisplay {...args} />;
+export const DefaultStory = (args) => (
+  <NetworkDisplay
+    {...args}
+    targetNetwork={{
+      type: args.targetNetwork,
+      nickname: args.targetNetwork,
+    }}
+  />
+);
 
 DefaultStory.storyName = 'Default';
+
+export const TargetNetwork = (args) => {
+  const targetNetworkArr = [
+    ...Object.keys(NETWORK_TYPE_TO_ID_MAP),
+    NETWORK_TYPE_RPC,
+  ];
+  return (
+    <>
+      {Object.values(targetNetworkArr).map((variant) => (
+        <NetworkDisplay
+          {...args}
+          key={variant}
+          targetNetwork={{
+            type: variant,
+            nickname: variant,
+          }}
+        />
+      ))}
+    </>
+  );
+};
+
+export const DisplayOnly = (args) => {
+  const targetNetworkArr = [
+    ...Object.keys(NETWORK_TYPE_TO_ID_MAP),
+    NETWORK_TYPE_RPC,
+  ];
+  return (
+    <>
+      {Object.values(targetNetworkArr).map((variant) => (
+        <NetworkDisplay
+          {...args}
+          key={variant}
+          targetNetwork={{
+            type: variant,
+            nickname: variant,
+          }}
+          onClick={undefined}
+        />
+      ))}
+    </>
+  );
+};

ui/components/app/signature-request/index.scss

@@ -17,7 +17,6 @@
   flex: 1;
 
   .network-display {
-    padding: 0;
     justify-content: flex-end;
     margin-left: auto;
   }

ui/components/app/signature-request/signature-request-header/signature-request-header.component.js

@@ -17,7 +17,7 @@ export default class SignatureRequestHeader extends PureComponent {
           {fromAccount ? <AccountListItem account={fromAccount} /> : null}
         </div>
         <div className="signature-request-header--network">
-          <NetworkDisplay colored={false} />
+          <NetworkDisplay />
         </div>
       </div>
     );

ui/components/app/signature-request/signature-request-header/signature-request-header.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import SignatureRequestHeader from '.';
+
+export default {
+  title: 'Components/App/SignatureRequest/SignatureRequestHeader',
+  id: __filename,
+};
+
+export const DefaultStory = () => <SignatureRequestHeader />;
+
+DefaultStory.storyName = 'Default';

ui/css/design-system/deprecated-colors.scss

@@ -9,10 +9,4 @@ $malibu-blue: #7ac9fd;
 $alto: #dedede;
 $black: #000;
 $white: #fff;
-$blue-lagoon: #038789;
-$crimson: #e91550;
-$purple: #690496;
-$tulip-tree: #ebb33f;
-$dodger-blue: #3099f2;
 $monzo: #d0021b;
-$dusty-gray: #9b9b9b;

ui/pages/confirmation/confirmation.js

@@ -166,7 +166,7 @@ export default function ConfirmationPage() {
                 setCurrentPendingConfirmation(currentPendingConfirmation - 1)
               }
             >
-              <i className="fas fa-chevron-left"></i>
+              <i className="fas fa-chevron-left" />
             </button>
           )}
           <button
@@ -178,7 +178,7 @@ export default function ConfirmationPage() {
               setCurrentPendingConfirmation(currentPendingConfirmation + 1)
             }
           >
-            <i className="fas fa-chevron-right"></i>
+            <i className="fas fa-chevron-right" />
           </button>
         </div>
       )}
@@ -186,7 +186,6 @@ export default function ConfirmationPage() {
         {templatedValues.networkDisplay ? (
           <Box justifyContent="center">
             <NetworkDisplay
-              colored={false}
               indicatorSize={SIZES.XS}
               labelProps={{ color: COLORS.TEXT_DEFAULT }}
             />