Changes to gas-items-details (#19075)

MetaMask · May 15, 2023 · c9f4202 · c9f4202
1 parent 8a8c8fa
commit c9f4202
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
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
@@ -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,23 +21,23 @@ 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"
                 rel="noopener noreferrer"
               >
                 {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
@@ -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
@@ -0,0 +1,10 @@
+import React from 'react';
+import GasDetailsItem from '.';
+
+export default {
+  title: 'Components/App/GasDetailsItem',
+};
+
+export const DefaultStory = () => <GasDetailsItem />;
+
+DefaultStory.storyName = 'Default';