m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01: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-default-image/index';
@import 'nft-options/index';
@import 'nfts-detection-notice/index';
@import 'connected-accounts-list/index';
@import 'connected-accounts-permissions/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;
}
}
}

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

@ -1,19 +1,7 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import Box from '../../ui/box';
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 { BannerAlert } from '../../component-library';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Button from '../../ui/button';
import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes';
export default function NftsDetectionNotice() {
@ -21,48 +9,16 @@ export default function NftsDetectionNotice() {
const history = useHistory();
return (
<Box className="nfts-detection-notice">
<Dialog type="message" className="nfts-detection-notice__message">
<Box display={DISPLAY.FLEX}>
<Box paddingTop={1}>
<Icon
name={IconName.Info}
className="info-circle"
color={IconColor.primaryDefault}
/>
</Box>
<Box paddingLeft={2}>
<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) => {
<BannerAlert
className="nfts-detection-notice"
title={t('newNFTsDetected')}
actionButtonLabel={t('selectNFTPrivacyPreference')}
actionButtonOnClick={(e) => {
e.preventDefault();
history.push(`${EXPERIMENTAL_ROUTE}#autodetect-nfts`);
}}
className="nfts-detection-notice__message__link"
>
{t('selectNFTPrivacyPreference')}
</Button>
</Box>
</Box>
</Dialog>
</Box>
{t('newNFTDetectedMessage')}
</BannerAlert>
);
}