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/edit-gas-display-education/edit-gas-display-education.component.js
2021-07-29 09:18:13 -05:00

53 lines
1.5 KiB
JavaScript

import React, { useContext } from 'react';
import Typography from '../../ui/typography/typography';
import {
COLORS,
TYPOGRAPHY,
FONT_WEIGHT,
} from '../../../helpers/constants/design-system';
import { I18nContext } from '../../../contexts/i18n';
export default function EditGasDisplayEducation() {
const t = useContext(I18nContext);
return (
<div className="edit-gas-display-education">
<Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
{t('editGasEducationModalIntro')}
</Typography>
<Typography
color={COLORS.BLACK}
variant={TYPOGRAPHY.h6}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('editGasHigh')}
</Typography>
<Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
{t('editGasEducationHighExplanation')}
</Typography>
<Typography
color={COLORS.BLACK}
variant={TYPOGRAPHY.h6}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('editGasMedium')}
</Typography>
<Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
{t('editGasEducationMediumExplanation')}
</Typography>
<Typography
color={COLORS.BLACK}
variant={TYPOGRAPHY.h6}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('editGasLow')}
</Typography>
<Typography tag="p" color={COLORS.UI4} variant={TYPOGRAPHY.H6}>
{t('editGasEducationLowExplanation')}
</Typography>
</div>
);
}