refactor: replace Typography with Text component in gas-timing.compon…

…ent.js (#27053)

## **Description**

This pull request replaces the `Typography` component with the new
`Text` component in the file
`ui/pages/confirmations/components/gas-timing/gas-timing.component.js`.
This change is part of the ongoing effort to migrate from the old
`Typography` component to the new `Text` component across the MetaMask
extension codebase.

The main improvements in this change are:
1. Consistency with the new design system
2. Better maintainability by using the latest component library
3. Improved performance due to the optimized `Text` component

Devin Run Link:
https://preview.devin.ai/devin/d0382f35dd004ffba790f08bbd5ffc9c

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27053?quickstart=1)

## **Related issues**

Partially Fixes:
#17670

## **Manual testing steps**

1. Go to the latest build of storybook in this PR
2. Navigate to the GasTiming component
3. Verify that the component renders correctly with the new Text
component
4. Check that all text styles and layouts are preserved

## **Screenshots/Recordings**

### **Before**

<img width="757" alt="Screenshot 2024-09-11 at 8 40 05 AM"
src="https://github.com/user-attachments/assets/ad1277fd-1e54-4a0d-a5d0-cc2ccb314c9a">

### **After**

<img width="1512" alt="Screenshot 2024-09-11 at 8 43 58 AM"
src="https://github.com/user-attachments/assets/e7d94fa3-caea-4af9-b525-ee5914dd9089">
<img width="1510" alt="Screenshot 2024-09-11 at 8 44 35 AM"
src="https://github.com/user-attachments/assets/84759078-fe2b-4cc1-be7e-29ef43eda8c5">


## **Pre-merge author checklist**

- [X] I've followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I've included tests if applicable
- [X] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


If you have any feedback, you can leave comments in the PR and I'll
address them in the app!

---------

Co-authored-by: georgewrmarshall <[email protected]>

ui/pages/confirmations/components/gas-timing/gas-timing.component.js

@@ -5,7 +5,6 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { GasEstimateTypes } from '../../../../../shared/constants/gas';
 import { Box, Text } from '../../../../components/component-library';
-import Typography from '../../../../components/ui/typography/typography';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
 import { I18nContext } from '../../../../contexts/i18n';
 import {
@@ -19,7 +18,6 @@ import {
   FontWeight,
   TextColor,
   TextVariant,
-  TypographyVariant,
 } from '../../../../helpers/constants/design-system';
 import {
   GAS_FORM_ERRORS,
@@ -114,13 +112,14 @@ export default function GasTiming({
     gasWarnings?.maxFee === GAS_FORM_ERRORS.MAX_FEE_TOO_LOW
   ) {
     return (
-      <Typography
-        variant={TypographyVariant.H7}
+      <Text
+        variant={TextVariant.bodySm}
         fontWeight={FontWeight.Bold}
+        color={TextColor.textAlternative}
         className={classNames('gas-timing', 'gas-timing--negative')}
       >
         {t('editGasTooLow')}
-      </Typography>
+      </Text>
     );
   }
 

ui/pages/confirmations/components/gas-timing/gas-timing.stories.tsx

@@ -4,6 +4,7 @@ import { Provider } from 'react-redux';
 import configureStore from '../../../../store/store';
 import GasTiming from './gas-timing.component';
 import mockState from '../../../../../test/data/mock-state.json';
+import { GAS_FORM_ERRORS } from '../../../../helpers/constants/gas';
 
 const storeMock = configureStore({
   metamask: {
@@ -33,8 +34,8 @@ const meta: Meta<typeof GasTiming> = {
     },
   },
   args: {
-    maxFeePerGas: 0,
-    maxPriorityFeePerGas: 0,
+    maxFeePerGas: '0',
+    maxPriorityFeePerGas: '0',
     gasWarnings: {},
   },
 };
@@ -45,3 +46,16 @@ type Story = StoryObj<typeof GasTiming>;
 export const DefaultStory: Story = {};
 
 DefaultStory.storyName = 'Default';
+
+export const GasTooLowStory: Story = {
+  args: {
+    maxFeePerGas: '1', // Simulate low gas fee
+    maxPriorityFeePerGas: '1', // Simulate low priority fee
+    gasWarnings: {
+      maxPriorityFee: GAS_FORM_ERRORS.MAX_PRIORITY_FEE_TOO_LOW,
+      maxFee: GAS_FORM_ERRORS.MAX_FEE_TOO_LOW,
+    },
+  },
+};
+
+GasTooLowStory.storyName = 'GasTooLow';

ui/pages/confirmations/components/index.scss

@@ -26,7 +26,6 @@
 @import 'edit-gas-fee-popover/edit-gas-tooltip/index';
 @import 'edit-gas-popover/index';
 @import 'gas-details-item/index';
-@import 'gas-timing/index';
 @import 'multilayer-fee-message/index';
 @import 'review-spending-cap/index';
 @import 'set-approval-for-all-warning/index';