1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js

44 lines
1.1 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import Box from '../../ui/box';
import Typography from '../../ui/typography';
import Tooltip from '../../ui/tooltip';
import {
COLORS,
DISPLAY,
TYPOGRAPHY,
} from '../../../helpers/constants/design-system';
export const CustomSpendingCapTooltip = ({
tooltipContentText,
tooltipIcon,
}) => (
<Box display={DISPLAY.INLINE_BLOCK}>
<Tooltip
interactive
position="top"
html={
<Typography
variant={TYPOGRAPHY.H7}
margin={3}
color={COLORS.TEXT_ALTERNATIVE}
className="form-field__heading-title__tooltip"
>
{tooltipContentText}
</Typography>
}
>
{tooltipIcon ? (
<i className="fa fa-exclamation-triangle form-field__heading-title__tooltip__warning-icon" />
) : (
tooltipIcon !== '' && <i className="fa fa-question-circle" />
)}
</Tooltip>
</Box>
);
CustomSpendingCapTooltip.propTypes = {
tooltipContentText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
tooltipIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
};