Part of #18714 and #17670: Changes to nfts-detection-notice.js (#19051)

* Changes to nfts-detection-notice.js * Adding story --------- Co-authored-by: georgewrmarshall <[email protected]>
MetaMask · May 15, 2023 · 5135b80 · payvint · May 15, 2023 · 5135b80
1 parent c9f4202
commit 5135b80
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 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
@@ -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,
   IconColor,
@@ -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) => {

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
@@ -0,0 +1,10 @@
+import React from 'react';
+import NftsDetectionNotice from '.';
+
+export default {
+  title: 'Components/App/NftsDetectionNotice',
+};
+
+export const DefaultStory = () => <NftsDetectionNotice />;
+
+DefaultStory.storyName = 'Default';