mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
* Changes to set-approval-for-all-warnings * Suggested changes * Updating deprecated components, improving semantic html and fixing text css strong tag styles --------- Co-authored-by: georgewrmarshall <george.marshall@consensys.net> Co-authored-by: Garrett Bear <gwhisten@gmail.com>
This commit is contained in:
parent
05715dd981
commit
488f212d28
@ -13,10 +13,6 @@
|
||||
&__account {
|
||||
border-bottom: 1px solid var(--color-border-muted);
|
||||
}
|
||||
|
||||
&__bold {
|
||||
color: var(--color-text-default);
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
|
@ -4,19 +4,22 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
|
||||
import Popover from '../../ui/popover';
|
||||
import Box from '../../ui/box';
|
||||
import Button from '../../ui/button';
|
||||
import Typography from '../../ui/typography';
|
||||
|
||||
import {
|
||||
DISPLAY,
|
||||
FLEX_DIRECTION,
|
||||
FONT_WEIGHT,
|
||||
JustifyContent,
|
||||
TextColor,
|
||||
TypographyVariant,
|
||||
TextVariant,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import Identicon from '../../ui/identicon';
|
||||
import { shortenAddress } from '../../../helpers/utils/util';
|
||||
import { Icon, IconName } from '../../component-library';
|
||||
import {
|
||||
Icon,
|
||||
IconName,
|
||||
Text,
|
||||
Button,
|
||||
BUTTON_VARIANT,
|
||||
} from '../../component-library';
|
||||
|
||||
const SetApproveForAllWarning = ({
|
||||
collectionName,
|
||||
@ -35,17 +38,19 @@ const SetApproveForAllWarning = ({
|
||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
||||
justifyContent={JustifyContent.SPACE_BETWEEN}
|
||||
className="set-approval-for-all-warning__footer"
|
||||
gap={4}
|
||||
>
|
||||
<Button
|
||||
className="set-approval-for-all-warning__footer__approve-button"
|
||||
type="danger-primary"
|
||||
variant={BUTTON_VARIANT.PRIMARY}
|
||||
danger
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{t('approveButtonText')}
|
||||
</Button>
|
||||
<Button
|
||||
className="set-approval-for-all-warning__footer__cancel-button"
|
||||
type="secondary"
|
||||
variant={BUTTON_VARIANT.SECONDARY}
|
||||
onClick={onCancel}
|
||||
>
|
||||
{t('reject')}
|
||||
@ -65,12 +70,9 @@ const SetApproveForAllWarning = ({
|
||||
name={IconName.Danger}
|
||||
className="set-approval-for-all-warning__content__header__warning-icon"
|
||||
/>
|
||||
<Typography
|
||||
variant={TypographyVariant.H4}
|
||||
fontWeight={FONT_WEIGHT.BOLD}
|
||||
>
|
||||
<Text variant={TextVariant.headingSm} as="h4">
|
||||
{t('yourNFTmayBeAtRisk')}
|
||||
</Typography>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box
|
||||
display={DISPLAY.FLEX}
|
||||
@ -80,38 +82,34 @@ const SetApproveForAllWarning = ({
|
||||
>
|
||||
<Box display={DISPLAY.FLEX}>
|
||||
<Identicon address={senderAddress} diameter={32} />
|
||||
<Typography
|
||||
variant={TypographyVariant.H5}
|
||||
<Text
|
||||
variant={TextVariant.bodyMd}
|
||||
as="h5"
|
||||
marginLeft={2}
|
||||
className="set-approval-for-all-warning__content__account-name"
|
||||
>
|
||||
<b>{name}</b> {` (${shortenAddress(senderAddress)})`}
|
||||
</Typography>
|
||||
<strong>{name}</strong> {` (${shortenAddress(senderAddress)})`}
|
||||
</Text>
|
||||
</Box>
|
||||
{isERC721 && total && (
|
||||
<Typography>{`${t('total')}: ${total}`}</Typography>
|
||||
)}
|
||||
{isERC721 && total && <Text>{`${t('total')}: ${total}`}</Text>}
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
color={TextColor.textAlternative}
|
||||
<Text
|
||||
margin={4}
|
||||
marginTop={4}
|
||||
marginBottom={4}
|
||||
variant={TypographyVariant.H6}
|
||||
variant={TextVariant.bodySm}
|
||||
as="h6"
|
||||
>
|
||||
{t('nftWarningContent', [
|
||||
<strong
|
||||
key="non_custodial_bold"
|
||||
className="set-approval-for-all-warning__content__bold"
|
||||
>
|
||||
<strong key="non_custodial_bold">
|
||||
{t('nftWarningContentBold', [collectionName || ''])}
|
||||
</strong>,
|
||||
<strong key="non_custodial_grey">
|
||||
{t('nftWarningContentGrey')}
|
||||
</strong>,
|
||||
])}
|
||||
</Typography>
|
||||
</Text>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
@ -33,7 +33,7 @@ $text-variants: (
|
||||
color: var(--color-text-default);
|
||||
font-family: var(--font-family-sans);
|
||||
|
||||
> strong {
|
||||
strong {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user