m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Replacing deprecated components in ConfirmationWarningModal (#20416)

Browse Source 
* Replacing deprecated components in ConfirmationWarningModal

* Layout and semantic html updates to align with design system conventions

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
jainex 2023-08-16 03:27:34 +05:30 committed by GitHub
parent d368f517e2
commit cde910faec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 80 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js
View File

@ -2,102 +2,107 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import Popover from '../../ui/popover';
import Box from '../../ui/box';
import Button from '../../ui/button';
import { import {
Display, Display,
FlexDirection, FlexDirection,
FontWeight, FontWeight,
JustifyContent,
TextVariant, TextVariant,
AlignItems, AlignItems,
IconColor, IconColor,
TextAlign,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { Icon, IconName, IconSize, Text } from '../../component-library';
import {
Box,
Button,
BUTTON_SIZES,
BUTTON_VARIANT,
Icon,
IconName,
IconSize,
Modal,
ModalContent,
ModalHeader,
ModalOverlay,
Text,
} from '../../component-library';
const ConfirmationWarningModal = ({ onSubmit, onCancel }) => { const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
const t = useI18nContext(); const t = useI18nContext();
return ( return (
<Popover <Modal
isOpen
onClose={onCancel}
className="confirmation-warning-modal__content" className="confirmation-warning-modal__content"
footer={ >
<Box <ModalOverlay />
display={Display.Flex} <ModalContent>
flexDirection={FlexDirection.Column} <ModalHeader
justifyContent={JustifyContent.spaceBetween} childrenWrapperProps={{
className="confirmation-warning-modal__footer" display: Display.Flex,
flexDirection: FlexDirection.Column,
alignItems: AlignItems.center,
gap: 4,
}}
> >
<Button <Icon
className="confirmation-warning-modal__footer__approve-button" name={IconName.Danger}
type="danger-primary" color={IconColor.errorDefault}
onClick={onSubmit} size={IconSize.Xl}
/>
<Text
variant={TextVariant.headingSm}
as="h4"
fontWeight={FontWeight.Bold}
textAlign={TextAlign.Center}
> >
{t('approveButtonText')} {t('addEthereumChainWarningModalTitle')}
</Button> </Text>
</ModalHeader>
<Box marginBottom={4}>
<Text marginTop={4} variant={TextVariant.bodySm}>
{t('addEthereumChainWarningModalHeader', [
<strong key="part-2">
{t('addEthereumChainWarningModalHeaderPartTwo')}
</strong>,
])}
</Text>
<Text marginTop={4} variant={TextVariant.bodySm}>
{t('addEthereumChainWarningModalListHeader')}
</Text>
<ul>
<Text as="li" marginTop={2} variant={TextVariant.bodySm}>
{t('addEthereumChainWarningModalListPointOne')}
</Text>
<Text as="li" marginTop={2} variant={TextVariant.bodySm}>
{t('addEthereumChainWarningModalListPointTwo')}
</Text>
<Text as="li" marginTop={2} variant={TextVariant.bodySm}>
{t('addEthereumChainWarningModalListPointThree')}
</Text>
</ul>
</Box>
<Box display={Display.Flex} gap={4}>
<Button <Button
className="confirmation-warning-modal__footer__cancel-button" variant={BUTTON_VARIANT.SECONDARY}
type="secondary"
onClick={onCancel} onClick={onCancel}
block
size={BUTTON_SIZES.LG}
> >
{t('reject')} {t('reject')}
</Button> </Button>
<Button
variant={BUTTON_VARIANT.PRIMARY}
onClick={onSubmit}
danger
block
size={BUTTON_SIZES.LG}
>
{t('approveButtonText')}
</Button>
</Box> </Box>
} </ModalContent>
> </Modal>
<Box
display={Display.Flex}
flexDirection={FlexDirection.Row}
alignItems={AlignItems.center}
padding={3}
margin={0}
className="confirmation-warning-modal__content__header"
>
<Icon
name={IconName.Danger}
color={IconColor.errorDefault}
className="confirmation-warning-modal__content__header__warning-icon"
size={IconSize.Xl}
/>
<Text
variant={TextVariant.headingSm}
as="h4"
fontWeight={FontWeight.Bold}
>
{t('addEthereumChainWarningModalTitle')}
</Text>
</Box>
<Box marginLeft={6} marginRight={6} marginTop={0} marginBottom={3}>
<Text marginTop={4} variant={TextVariant.bodySm} as="h6">
{t('addEthereumChainWarningModalHeader', [
<strong key="part-2">
{t('addEthereumChainWarningModalHeaderPartTwo')}
</strong>,
])}
</Text>
<Text marginTop={4} variant={TextVariant.bodySm} as="h6">
{t('addEthereumChainWarningModalListHeader')}
</Text>
<ul>
<li>
<Text marginTop={2} variant={TextVariant.bodySm} as="h6">
{t('addEthereumChainWarningModalListPointOne')}
</Text>
</li>
<li>
<Text marginTop={2} variant={TextVariant.bodySm} as="h6">
{t('addEthereumChainWarningModalListPointTwo')}
</Text>
</li>
<li>
<Text marginTop={2} variant={TextVariant.bodySm} as="h6">
{t('addEthereumChainWarningModalListPointThree')}
</Text>
</li>
</ul>
</Box>
</Popover>
); );
}; };

14
ui/components/app/confirmation-warning-modal/index.scss
View File

@ -9,19 +9,5 @@
li { li {
display: list-item; display: list-item;
} }
&__header {
border-bottom: 1px solid var(--color-border-muted);
&__warning-icon {
padding-top: 7px;
margin-right: 10px;
}
}
}
&__footer {
width: 100%;
height: 100px;
} }
} }