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/beta-header/index.js
George Marshall 739075662c
Migrating Icon to typescript and deprecating JS component (#18431)
* Migrating Icon to typescript and deprecating JS component

* gw suggestions (#18434)

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>
2023-04-04 09:48:04 -07:00

69 lines
1.6 KiB
JavaScript

import React from 'react';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Box from '../../ui/box/box';
import Typography from '../../ui/typography/typography';
import {
TypographyVariant,
Color,
BLOCK_SIZES,
DISPLAY,
AlignItems,
IconColor,
} from '../../../helpers/constants/design-system';
import { BETA_BUGS_URL } from '../../../helpers/constants/beta';
import { hideBetaHeader } from '../../../store/actions';
import { ButtonIcon } from '../../component-library';
import {
ICON_NAMES,
ICON_SIZES,
} from '../../component-library/icon/deprecated';
const BetaHeader = () => {
const t = useI18nContext();
return (
<Box
display={DISPLAY.FLEX}
width={BLOCK_SIZES.FULL}
backgroundColor={Color.warningDefault}
padding={2}
className="beta-header"
alignItems={AlignItems.center}
>
<Typography
variant={TypographyVariant.H7}
marginTop={0}
marginBottom={0}
className="beta-header__message"
color={Color.warningInverse}
>
{t('betaHeaderText', [
<a
href={BETA_BUGS_URL}
key="link"
target="_blank"
rel="noreferrer noopener"
>
{t('here')}
</a>,
])}
</Typography>
<ButtonIcon
iconName={ICON_NAMES.CLOSE}
size={ICON_SIZES.SM}
color={IconColor.warningInverse}
className="beta-header__button"
data-testid="beta-header-close"
onClick={() => {
hideBetaHeader();
}}
aria-label={t('close')}
/>
</Box>
);
};
export default BetaHeader;