fix: design related fixes in confirmation pages (#29137)

## **Description** Small design related fixes in re-designed confirmation pages ## **Related issues** Fixes: MetaMask/MetaMask-planning#3478 ## **Manual testing steps** 1. Go to test dapp 2. Submit transaction pages and check design fixes ## **Screenshots/Recordings** <img width="345" alt="Screenshot 2024-12-12 at 6 52 03 PM" src="https://github.com/user-attachments/assets/36065b32-42eb-4a55-9a67-21d04bdde8e5" /> ## **Pre-merge author checklist** - [X] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.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/main/.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.
MetaMask · Dec 12, 2024 · 49a7c82 · 49a7c82
1 parent 5c1c4b2
commit 49a7c82
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 176 deletions.
diff --git a/ui/components/app/confirm/info/row/text.tsx b/ui/components/app/confirm/info/row/text.tsx
@@ -53,18 +53,6 @@ export const ConfirmInfoRowText: React.FC<ConfirmInfoRowTextProps> = ({
       gap={2}
       minWidth={BlockSize.Zero}
     >
-      {tooltip ? (
-        <Tooltip
-          position="bottom"
-          title={tooltip}
-          wrapperStyle={{ minWidth: 0 }}
-          interactive
-        >
-          <InfoText text={text} />
-        </Tooltip>
-      ) : (
-        <InfoText text={text} />
-      )}
       {isEditable ? (
         <ButtonIcon
           className={editIconClassName || undefined}
@@ -74,10 +62,22 @@ export const ConfirmInfoRowText: React.FC<ConfirmInfoRowTextProps> = ({
           onClick={onEditClick}
           size={ButtonIconSize.Sm}
           // to reset the button padding
-          style={{ marginLeft: '-4px' }}
+          style={{ marginRight: '-4px' }}
           data-testid={editIconDataTestId}
         />
       ) : null}
+      {tooltip ? (
+        <Tooltip
+          position="bottom"
+          title={tooltip}
+          wrapperStyle={{ minWidth: 0 }}
+          interactive
+        >
+          <InfoText text={text} />
+        </Tooltip>
+      ) : (
+        <InfoText text={text} />
+      )}
     </Box>
   );
 };
diff --git a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
@@ -92,18 +92,6 @@ exports[`Info renders info section for approve request 1`] = `
       <div
         class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-          data-testid="first-gas-field"
-        >
-          0.0001 ETH
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
-          data-testid="native-currency"
-        >
-          $0.08
-        </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="edit-gas-fee-icon"
@@ -117,6 +105,18 @@ exports[`Info renders info section for approve request 1`] = `
             class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
           />
         </button>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
+          data-testid="first-gas-field"
+        >
+          0.0001 ETH
+        </p>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
+          data-testid="native-currency"
+        >
+          $0.08
+        </p>
       </div>
     </div>
     <div
@@ -439,18 +439,6 @@ exports[`Info renders info section for contract interaction request 1`] = `
       <div
         class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-          data-testid="first-gas-field"
-        >
-          0.0001 ETH
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
-          data-testid="native-currency"
-        >
-          $0.04
-        </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="edit-gas-fee-icon"
@@ -464,6 +452,18 @@ exports[`Info renders info section for contract interaction request 1`] = `
             class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
           />
         </button>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
+          data-testid="first-gas-field"
+        >
+          0.0001 ETH
+        </p>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
+          data-testid="native-currency"
+        >
+          $0.04
+        </p>
       </div>
     </div>
     <div
@@ -810,18 +810,6 @@ exports[`Info renders info section for setApprovalForAll request 1`] = `
       <div
         class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-          data-testid="first-gas-field"
-        >
-          0.0001 ETH
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
-          data-testid="native-currency"
-        >
-          $0.08
-        </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="edit-gas-fee-icon"
@@ -835,6 +823,18 @@ exports[`Info renders info section for setApprovalForAll request 1`] = `
             class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
           />
         </button>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
+          data-testid="first-gas-field"
+        >
+          0.0001 ETH
+        </p>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
+          data-testid="native-currency"
+        >
+          $0.08
+        </p>
       </div>
     </div>
     <div

diff --git a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
@@ -414,23 +414,23 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
       <div
         class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-          style="white-space: pre-wrap;"
-        >
-          1000 
-        </p>
         <button
           aria-label="Edit"
           class="mm-box mm-button-icon mm-button-icon--size-sm edit-spending-cap-btn mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-lg"
           data-testid="edit-spending-cap-icon"
-          style="margin-left: -4px;"
+          style="margin-right: -4px;"
         >
           <span
             class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
             style="mask-image: url('./images/icons/edit.svg');"
           />
         </button>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          style="white-space: pre-wrap;"
+        >
+          1000 
+        </p>
       </div>
     </div>
   </div>
@@ -475,18 +475,6 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
       <div
         class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-          data-testid="first-gas-field"
-        >
-          0.0001 ETH
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
-          data-testid="native-currency"
-        >
-          $0.08
-        </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="edit-gas-fee-icon"
@@ -500,6 +488,18 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
             class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
           />
         </button>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
+          data-testid="first-gas-field"
+        >
+          0.0001 ETH
+        </p>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
+          data-testid="native-currency"
+        >
+          $0.08
+        </p>
       </div>
     </div>
     <div

diff --git a/...ons/components/confirm/info/approve/spending-cap/__snapshots__/spending-cap.test.tsx.snap b/...ons/components/confirm/info/approve/spending-cap/__snapshots__/spending-cap.test.tsx.snap
@@ -74,23 +74,23 @@ exports[`<SpendingCap /> renders component 1`] = `
       <div
         class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center mm-box--min-width-0"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-          style="white-space: pre-wrap;"
-        >
-          1000 
-        </p>
         <button
           aria-label="Edit"
           class="mm-box mm-button-icon mm-button-icon--size-sm edit-spending-cap-btn mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-lg"
           data-testid="edit-spending-cap-icon"
-          style="margin-left: -4px;"
+          style="margin-right: -4px;"
         >
           <span
             class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
             style="mask-image: url('./images/icons/edit.svg');"
           />
         </button>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
+          style="white-space: pre-wrap;"
+        >
+          1000 
+        </p>
       </div>
     </div>
   </div>

diff --git a/...ents/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap b/...ents/confirm/info/base-transaction-info/__snapshots__/base-transaction-info.test.tsx.snap
@@ -276,18 +276,6 @@ exports[`<BaseTransactionInfo /> renders component for contract interaction requ
       <div
         class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-          data-testid="first-gas-field"
-        >
-          0.0001 ETH
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
-          data-testid="native-currency"
-        >
-          $0.04
-        </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="edit-gas-fee-icon"
@@ -301,6 +289,18 @@ exports[`<BaseTransactionInfo /> renders component for contract interaction requ
             class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
           />
         </button>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
+          data-testid="first-gas-field"
+        >
+          0.0001 ETH
+        </p>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
+          data-testid="native-currency"
+        >
+          $0.04
+        </p>
       </div>
     </div>
     <div

diff --git a/...tions/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap b/...tions/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap
@@ -321,18 +321,6 @@ exports[`NativeTransferInfo renders correctly 1`] = `
       <div
         class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-          data-testid="first-gas-field"
-        >
-          0.0001 ETH
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
-          data-testid="native-currency"
-        >
-          $0.08
-        </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="edit-gas-fee-icon"
@@ -346,6 +334,18 @@ exports[`NativeTransferInfo renders correctly 1`] = `
             class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
           />
         </button>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
+          data-testid="first-gas-field"
+        >
+          0.0001 ETH
+        </p>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
+          data-testid="native-currency"
+        >
+          $0.08
+        </p>
       </div>
     </div>
     <div

diff --git a/...components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap b/...components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap
@@ -349,18 +349,6 @@ exports[`NFTTokenTransferInfo renders correctly 1`] = `
       <div
         class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--text-align-center"
       >
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
-          data-testid="first-gas-field"
-        >
-          0.0001 ETH
-        </p>
-        <p
-          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
-          data-testid="native-currency"
-        >
-          $0.08
-        </p>
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
           data-testid="edit-gas-fee-icon"
@@ -374,6 +362,18 @@ exports[`NFTTokenTransferInfo renders correctly 1`] = `
             class="mm-box mm-text mm-text--inherit mm-box--color-primary-default"
           />
         </button>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-1 mm-box--color-text-default"
+          data-testid="first-gas-field"
+        >
+          0.0001 ETH
+        </p>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
+          data-testid="native-currency"
+        >
+          $0.08
+        </p>
       </div>
     </div>
     <div