m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 11:22:43 +02:00
Code

UX: Updated nfts detection notice to use Banner (#20053)

Browse Source 
* updated nfts detection notice to use banner

* removed unused css file

* updated global css file
This commit is contained in:
Nidhi Kumari 2023-07-17 21:28:36 +05:30 committed by GitHub
parent 0309858917
commit bdbaa03aca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/components/app/app-components.scss
View File

@ -16,7 +16,6 @@
@import 'nft-details/index'; @import 'nft-details/index';
@import 'nft-default-image/index'; @import 'nft-default-image/index';
@import 'nft-options/index'; @import 'nft-options/index';
@import 'nfts-detection-notice/index';
@import 'connected-accounts-list/index'; @import 'connected-accounts-list/index';
@import 'connected-accounts-permissions/index'; @import 'connected-accounts-permissions/index';
@import 'connected-sites-list/index'; @import 'connected-sites-list/index';

23
ui/components/app/nfts-detection-notice/index.scss
View File

@ -1,23 +0,0 @@
.nfts-detection-notice {
&__message {
position: relative;
padding: 0.75rem 0.75rem 1rem 0.75rem !important;
& &__close-button {
color: var(--color-icon-default);
background: none;
position: absolute;
cursor: pointer;
right: 8px;
}
a.nfts-detection-notice__message__link {
@include H7;
width: 100%;
padding: 0;
justify-content: flex-start;
font-weight: bold;
}
}
}

68
ui/components/app/nfts-detection-notice/nfts-detection-notice.js
View File

@ -1,19 +1,7 @@
import React from 'react'; import React from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import Box from '../../ui/box'; import { BannerAlert } from '../../component-library';
import Dialog from '../../ui/dialog';
import { Icon, IconName } from '../../component-library';
import { Text } from '../../component-library/text/deprecated';
import {
TextVariant,
TextAlign,
FontWeight,
DISPLAY,
TextColor,
IconColor,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
import Button from '../../ui/button';
import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes'; import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes';
export default function NftsDetectionNotice() { export default function NftsDetectionNotice() {
@ -21,48 +9,16 @@ export default function NftsDetectionNotice() {
const history = useHistory(); const history = useHistory();
return ( return (
<Box className="nfts-detection-notice"> <BannerAlert
<Dialog type="message" className="nfts-detection-notice__message"> className="nfts-detection-notice"
<Box display={DISPLAY.FLEX}> title={t('newNFTsDetected')}
<Box paddingTop={1}> actionButtonLabel={t('selectNFTPrivacyPreference')}
<Icon actionButtonOnClick={(e) => {
name={IconName.Info} e.preventDefault();
className="info-circle" history.push(`${EXPERIMENTAL_ROUTE}#autodetect-nfts`);
color={IconColor.primaryDefault} }}
/> >
</Box> {t('newNFTDetectedMessage')}
<Box paddingLeft={2}> </BannerAlert>
<Text
color={TextColor.textDefault}
align={TextAlign.Left}
variant={TextVariant.bodySm}
as="h6"
fontWeight={FontWeight.Bold}
>
{t('newNFTsDetected')}
</Text>
<Text
color={TextColor.textDefault}
align={TextAlign.Left}
variant={TextVariant.bodySm}
as="h6"
marginBottom={4}
>
{t('newNFTDetectedMessage')}
</Text>
<Button
type="link"
onClick={(e) => {
e.preventDefault();
history.push(`${EXPERIMENTAL_ROUTE}#autodetect-nfts`);
}}
className="nfts-detection-notice__message__link"
>
{t('selectNFTPrivacyPreference')}
</Button>
</Box>
</Box>
</Dialog>
</Box>
); );
} }