m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

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

Browse Source
This commit is contained in:
Brad Decker 2021-02-01 12:10:19 -06:00 committed by GitHub
parent e6f4c89945
commit 9269615b26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 70 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/app/components/app/asset-list-item/asset-list-item.js
View File

@ -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

3
ui/app/components/ui/account-mismatch-warning/account-mismatch-warning.component.js
View File

@ -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>
)

3
ui/app/components/ui/icon-border/icon-border.scss
View File

@ -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;

19
ui/app/components/ui/icon/icon.stories.js
View File

@ -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)}
/>
)

8
ui/app/components/ui/icon/index.scss
View File

@ -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;
}
}

29
ui/app/components/ui/icon/info-icon-inverted.component.js Normal file
View File

@ -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)),
}

11
ui/app/components/ui/icon/info-icon.component.js
View File

@ -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 (
<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)),
}

7
ui/app/helpers/constants/design-system.js
View File

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