1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js

54 lines
1.3 KiB
JavaScript
Raw Normal View History

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 {
TextColor,
DISPLAY,
TypographyVariant,
} from '../../../helpers/constants/design-system';
import {
Icon,
ICON_NAMES,
ICON_SIZES,
} from '../../component-library/icon/deprecated';
export const CustomSpendingCapTooltip = ({
tooltipContentText,
tooltipIcon,
}) => (
<Box display={DISPLAY.INLINE_BLOCK}>
<Tooltip
interactive
position="top"
html={
<Typography
variant={TypographyVariant.H7}
margin={3}
color={TextColor.textAlternative}
className="form-field__heading-title__tooltip"
>
{tooltipContentText}
</Typography>
}
>
{tooltipIcon ? (
UX: Icon: Remove fa-exclamation-triangle usages (#17691) * UX: Icon: WIP: Remove fa-exclamation-triangle usages * Swap the rest of the icons * Fix color import * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/app/add-network/add-network.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/ui/review-spending-cap/review-spending-cap.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Fix lint * Fix alignment and sizes * Use IconColor * Update ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/ui/review-spending-cap/review-spending-cap.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Fix imports * Use IconColor --------- Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: Danica Shen <zhaodanica@gmail.com>
2023-02-23 22:20:07 +01:00
<Icon
name={ICON_NAMES.DANGER}
className="form-field__heading-title__tooltip__warning-icon"
size={ICON_SIZES.AUTO}
style={{ 'vertical-align': 'bottom' }}
/>
) : (
tooltipIcon !== '' && <Icon name={ICON_NAMES.QUESTION} />
)}
</Tooltip>
</Box>
);
CustomSpendingCapTooltip.propTypes = {
tooltipContentText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
tooltipIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
};