From c9f420234fe56158011fb9f4938db6ae765a18e3 Mon Sep 17 00:00:00 2001
From: Dhruv <79097544+dhruvv173@users.noreply.github.com>
Date: Mon, 15 May 2023 23:26:20 +0530
Subject: [PATCH] Changes to gas-items-details (#19075)

---
 .../gas-details-item-title.js                    | 16 ++++++++--------
 .../gas-details-item-title.stories.js            | 10 ++++++++++
 .../gas-details-item/gas-details-item.stories.js | 10 ++++++++++
 3 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.stories.js
 create mode 100644 ui/components/app/gas-details-item/gas-details-item.stories.js

diff --git a/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js b/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js
index 00a25e36e704..9e7c267dd483 100644
--- a/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js
+++ b/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { TypographyVariant } from '../../../../helpers/constants/design-system';
+import { TextVariant } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { getIsMainnet } from '../../../../selectors';
 import Box from '../../../ui/box';
 import InfoTooltip from '../../../ui/info-tooltip/info-tooltip';
-import Typography from '../../../ui/typography/typography';
+import { Text } from '../../../component-library';
 
 const GasDetailsItemTitle = () => {
   const t = useI18nContext();
@@ -21,15 +21,15 @@ const GasDetailsItemTitle = () => {
       <InfoTooltip
         contentText={
           <>
-            <Typography variant={TypographyVariant.H7}>
+            <Text variant={TextVariant.bodySm} as="h6">
               {t('transactionDetailGasTooltipIntro', [
                 isMainnet ? t('networkNameEthereum') : '',
               ])}
-            </Typography>
-            <Typography variant={TypographyVariant.H7}>
+            </Text>
+            <Text variant={TextVariant.bodySm} as="h6">
               {t('transactionDetailGasTooltipExplanation')}
-            </Typography>
-            <Typography variant={TypographyVariant.H7}>
+            </Text>
+            <Text variant={TextVariant.bodySm} as="h6">
               <a
                 href="https://community.metamask.io/t/what-is-gas-why-do-transactions-take-so-long/3172"
                 target="_blank"
@@ -37,7 +37,7 @@ const GasDetailsItemTitle = () => {
               >
                 {t('transactionDetailGasTooltipConversion')}
               </a>
-            </Typography>
+            </Text>
           </>
         }
         position="bottom"
diff --git a/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.stories.js b/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.stories.js
new file mode 100644
index 000000000000..33978b4074ac
--- /dev/null
+++ b/ui/components/app/gas-details-item/gas-details-item-title/gas-details-item-title.stories.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import GasDetailsItemTitle from '.';
+
+export default {
+  title: 'Components/App/GasDetailsItemTitle',
+};
+
+export const DefaultStory = () => <GasDetailsItemTitle />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/gas-details-item/gas-details-item.stories.js b/ui/components/app/gas-details-item/gas-details-item.stories.js
new file mode 100644
index 000000000000..f676c77860f0
--- /dev/null
+++ b/ui/components/app/gas-details-item/gas-details-item.stories.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import GasDetailsItem from '.';
+
+export default {
+  title: 'Components/App/GasDetailsItem',
+};
+
+export const DefaultStory = () => <GasDetailsItem />;
+
+DefaultStory.storyName = 'Default';