diff --git a/ui/app/components/app/asset-list-item/asset-list-item.js b/ui/app/components/app/asset-list-item/asset-list-item.js
index b5164e39c..b09fb3c3f 100644
--- a/ui/app/components/app/asset-list-item/asset-list-item.js
+++ b/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}
>
-
+
) : null
const midContent = warning ? (
<>
-
+
{warning}
>
) : null
diff --git a/ui/app/components/ui/account-mismatch-warning/account-mismatch-warning.component.js b/ui/app/components/ui/account-mismatch-warning/account-mismatch-warning.component.js
index 4e7e9c966..6fcb10e15 100644
--- a/ui/app/components/ui/account-mismatch-warning/account-mismatch-warning.component.js
+++ b/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"
>
-
+
)
diff --git a/ui/app/components/ui/icon-border/icon-border.scss b/ui/app/components/ui/icon-border/icon-border.scss
index cd18ccc6e..5028617e6 100644
--- a/ui/app/components/ui/icon-border/icon-border.scss
+++ b/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;
diff --git a/ui/app/components/ui/icon/icon.stories.js b/ui/app/components/ui/icon/icon.stories.js
index 11209a32a..ff750bc5d 100644
--- a/ui/app/components/ui/icon/icon.stories.js
+++ b/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 = () =>
export const PaperAirplane = () => (
)
+
+export const info = () => (
+
+)
+
+export const infoInverted = () => (
+
+)
diff --git a/ui/app/components/ui/icon/index.scss b/ui/app/components/ui/icon/index.scss
index 4e7e9c782..253f90b8f 100644
--- a/ui/app/components/ui/icon/index.scss
+++ b/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;
}
}
diff --git a/ui/app/components/ui/icon/info-icon-inverted.component.js b/ui/app/components/ui/icon/info-icon-inverted.component.js
new file mode 100644
index 000000000..df057aa07
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+InfoIconInverted.propTypes = {
+ severity: PropTypes.oneOf(Object.values(SEVERITIES)),
+}
diff --git a/ui/app/components/ui/icon/info-icon.component.js b/ui/app/components/ui/icon/info-icon.component.js
index e177e5b33..3d2ec7e7d 100644
--- a/ui/app/components/ui/icon/info-icon.component.js
+++ b/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--warning': severity === 'warning',
- 'info-icon--danger': severity === 'danger',
- 'info-icon--info': severity === 'info',
+ '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 (