1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/app/edit-gas-display-education/edit-gas-display-education.component.js
George Marshall 092189cb5b
Adding polymorphic 'as' prop to Box component and updating Typography component to use the same (#15518)
* Adding polymorphic as prop to Box component

* Updating Typography component to use 'as' as the polymorphic prop instead of 'tag'

* Fixing linting
2022-08-10 12:42:42 -07:00

69 lines
1.6 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
as="p"
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
>
{t('editGasEducationModalIntro')}
</Typography>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.h6}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('editGasHigh')}
</Typography>
<Typography
as="p"
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
>
{t('editGasEducationHighExplanation')}
</Typography>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.h6}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('editGasMedium')}
</Typography>
<Typography
as="p"
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
>
{t('editGasEducationMediumExplanation')}
</Typography>
<Typography
color={COLORS.TEXT_DEFAULT}
variant={TYPOGRAPHY.h6}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('editGasLow')}
</Typography>
<Typography
as="p"
color={COLORS.TEXT_ALTERNATIVE}
variant={TYPOGRAPHY.H6}
>
{t('editGasEducationLowExplanation')}
</Typography>
</div>
);
}