add inverted info icon, and update props (#10305)

ui/app/components/app/asset-list-item/asset-list-item.js

@@ -12,6 +12,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext'
 import { useMetricEvent } from '../../../hooks/useMetricEvent'
 import { updateSendToken } from '../../../store/actions'
 import { SEND_ROUTE } from '../../../helpers/constants/routes'
+import { SEVERITIES } from '../../../helpers/constants/design-system'
 
 const AssetListItem = ({
   className,
@@ -43,13 +44,13 @@ const AssetListItem = ({
       position="bottom"
       html={warning}
     >
-      <InfoIcon severity="warning" />
+      <InfoIcon severity={SEVERITIES.WARNING} />
     </Tooltip>
   ) : null
 
   const midContent = warning ? (
     <>
-      <InfoIcon severity="warning" />
+      <InfoIcon severity={SEVERITIES.WARNING} />
       <div className="asset-list-item__warning">{warning}</div>
     </>
   ) : null

ui/app/components/ui/account-mismatch-warning/account-mismatch-warning.component.js

@@ -5,6 +5,7 @@ import Tooltip from '../tooltip'
 import { getSelectedAccount } from '../../../selectors'
 import InfoIcon from '../icon/info-icon.component'
 import { useI18nContext } from '../../../hooks/useI18nContext'
+import { SEVERITIES } from '../../../helpers/constants/design-system'
 
 export default function AccountMismatchWarning({ address }) {
   const selectedAccount = useSelector(getSelectedAccount)
@@ -21,7 +22,7 @@ export default function AccountMismatchWarning({ address }) {
       containerClassName="account-mismatch-warning__tooltip-container"
     >
       <div className="account-mismatch-warning__tooltip-container-icon">
-        <InfoIcon severity="warning" />
+        <InfoIcon severity={SEVERITIES.WARNING} />
       </div>
     </Tooltip>
   )

ui/app/components/ui/icon-border/icon-border.scss

@@ -1,8 +1,7 @@
-
 .icon-border {
   border-radius: 50%;
   border: 1px solid #f2f3f4;
-  background: #fff;
+  background: #ececf0;
   display: flex;
   justify-content: center;
   align-items: center;

ui/app/components/ui/icon/icon.stories.js

@@ -1,11 +1,14 @@
 import React from 'react'
-import { color, number } from '@storybook/addon-knobs'
+import { color, number, select } from '@storybook/addon-knobs'
+import { SEVERITIES } from '../../../helpers/constants/design-system'
 import Approve from './approve-icon.component'
 import Copy from './copy-icon.component'
 import Interaction from './interaction-icon.component'
 import Preloader from './preloader'
 import Receive from './receive-icon.component'
 import Send from './send-icon.component'
+import InfoIcon from './info-icon.component'
+import InfoIconInverted from './info-icon-inverted.component'
 
 export default {
   title: 'Icon',
@@ -36,3 +39,17 @@ export const preloader = () => <Preloader size={number('size', 40)} />
 export const PaperAirplane = () => (
   <PaperAirplane color={color('color', '#2F80ED')} size={number('size', 40)} />
 )
+
+export const info = () => (
+  <InfoIcon
+    severity={select('severity', SEVERITIES, SEVERITIES.INFO)}
+    size={number('size', 40)}
+  />
+)
+
+export const infoInverted = () => (
+  <InfoIconInverted
+    severity={select('severity', SEVERITIES, SEVERITIES.INFO)}
+    size={number('size', 40)}
+  />
+)

ui/app/components/ui/icon/index.scss

@@ -2,18 +2,18 @@
   margin: 0 4px;
 
   &--success {
-    fill: $accent-green;
+    fill: $success-1;
   }
 
   &--info {
-    fill: $primary-blue;
+    fill: $primary-1;
   }
 
   &--warning {
-    fill: $accent-yellow;
+    fill: $alert-3;
   }
 
   &--danger {
-    fill: $accent-red;
+    fill: $error-1;
   }
 }

ui/app/components/ui/icon/info-icon-inverted.component.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import { SEVERITIES } from '../../../helpers/constants/design-system'
+
+export default function InfoIconInverted({ severity }) {
+  const className = classnames('info-icon', {
+    'info-icon--success': severity === SEVERITIES.SUCCESS,
+    'info-icon--warning': severity === SEVERITIES.WARNING,
+    'info-icon--danger': severity === SEVERITIES.DANGER,
+    'info-icon--info': severity === SEVERITIES.INFO,
+  })
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M15.75 8C15.75 3.75 12.25 0.25 8 0.25C3.71875 0.25 0.25 3.75 0.25 8C0.25 12.2812 3.71875 15.75 8 15.75C12.25 15.75 15.75 12.2812 15.75 8ZM8 9.5625C8.78125 9.5625 9.4375 10.2188 9.4375 11C9.4375 11.8125 8.78125 12.4375 8 12.4375C7.1875 12.4375 6.5625 11.8125 6.5625 11C6.5625 10.2188 7.1875 9.5625 8 9.5625ZM6.625 4.40625C6.59375 4.1875 6.78125 4 7 4H8.96875C9.1875 4 9.375 4.1875 9.34375 4.40625L9.125 8.65625C9.09375 8.875 8.9375 9 8.75 9H7.21875C7.03125 9 6.875 8.875 6.84375 8.65625L6.625 4.40625Z" />
+    </svg>
+  )
+}
+
+InfoIconInverted.propTypes = {
+  severity: PropTypes.oneOf(Object.values(SEVERITIES)),
+}

ui/app/components/ui/icon/info-icon.component.js

@@ -1,13 +1,14 @@
 import React from 'react'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
+import { SEVERITIES } from '../../../helpers/constants/design-system'
 
 export default function InfoIcon({ severity }) {
   const className = classnames('info-icon', {
-    'info-icon--success': severity === 'success',
+    'info-icon--success': severity === SEVERITIES.SUCCESS,
-    'info-icon--warning': severity === 'warning',
+    'info-icon--warning': severity === SEVERITIES.WARNING,
-    'info-icon--danger': severity === 'danger',
+    'info-icon--danger': severity === SEVERITIES.DANGER,
-    'info-icon--info': severity === 'info',
+    'info-icon--info': severity === SEVERITIES.INFO,
   })
   return (
     <svg
@@ -23,5 +24,5 @@ export default function InfoIcon({ severity }) {
 }
 
 InfoIcon.propTypes = {
-  severity: PropTypes.oneOf(['success', 'info', 'warning', 'danger']),
+  severity: PropTypes.oneOf(Object.values(SEVERITIES)),
 }

ui/app/helpers/constants/design-system.js

@@ -154,3 +154,10 @@ export const FONT_WEIGHT = {
   800: 800,
   900: 900,
 }
+
+export const SEVERITIES = {
+  DANGER: 'danger',
+  WARNING: 'warning',
+  INFO: 'info',
+  SUCCESS: 'success',
+}