From f0e2c80cbc93970593c1baac0caeab2bf4ba7fb1 Mon Sep 17 00:00:00 2001
From: dhruvv173 <dhruvv173@gmail.com>
Date: Mon, 8 May 2023 16:46:24 +0530
Subject: [PATCH 1/2] Changes to nfts-detection-notice.js

---
 .../nfts-detection-notice.js                  | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/ui/components/app/nfts-detection-notice/nfts-detection-notice.js b/ui/components/app/nfts-detection-notice/nfts-detection-notice.js
index ab7b6365adf8..0ffa849476da 100644
--- a/ui/components/app/nfts-detection-notice/nfts-detection-notice.js
+++ b/ui/components/app/nfts-detection-notice/nfts-detection-notice.js
@@ -2,11 +2,11 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import Box from '../../ui/box';
 import Dialog from '../../ui/dialog';
-import Typography from '../../ui/typography/typography';
+import { Text } from '../../component-library';
 import {
-  TypographyVariant,
-  TEXT_ALIGN,
-  FONT_WEIGHT,
+  TextVariant,
+  TextAlign,
+  FontWeight,
   DISPLAY,
   TextColor,
 } from '../../../helpers/constants/design-system';
@@ -32,22 +32,24 @@ export default function NftsDetectionNotice() {
             />
           </Box>
           <Box paddingLeft={2}>
-            <Typography
+            <Text
               color={TextColor.textDefault}
-              align={TEXT_ALIGN.LEFT}
-              variant={TypographyVariant.H7}
-              fontWeight={FONT_WEIGHT.BOLD}
+              align={TextAlign.Left}
+              variant={TextVariant.bodySm}
+              as="h6"
+              fontWeight={FontWeight.Bold}
             >
               {t('newNFTsDetected')}
-            </Typography>
-            <Typography
+            </Text>
+            <Text
               color={TextColor.textDefault}
-              align={TEXT_ALIGN.LEFT}
-              variant={TypographyVariant.H7}
-              boxProps={{ marginBottom: 4 }}
+              align={TextAlign.Left}
+              variant={TextVariant.bodySm}
+              as="h6"
+              marginBottom={4}
             >
               {t('newNFTDetectedMessage')}
-            </Typography>
+            </Text>
             <Button
               type="link"
               onClick={(e) => {

From cbf0e07c1e589a1916bb10b3779ba48d1f8a3184 Mon Sep 17 00:00:00 2001
From: georgewrmarshall <george.marshall@consensys.net>
Date: Tue, 9 May 2023 17:04:46 +1000
Subject: [PATCH 2/2] Adding story

---
 .../nfts-detection-notice.stories.js                   | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 ui/components/app/nfts-detection-notice/nfts-detection-notice.stories.js

diff --git a/ui/components/app/nfts-detection-notice/nfts-detection-notice.stories.js b/ui/components/app/nfts-detection-notice/nfts-detection-notice.stories.js
new file mode 100644
index 000000000000..808a6d720ae8
--- /dev/null
+++ b/ui/components/app/nfts-detection-notice/nfts-detection-notice.stories.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import NftsDetectionNotice from '.';
+
+export default {
+  title: 'Components/App/NftsDetectionNotice',
+};
+
+export const DefaultStory = () => <NftsDetectionNotice />;
+
+DefaultStory.storyName = 'Default';