Skip to content

Commit 0765009

Browse files
dan437dan437
authored
feat: Update row key colors in Confirmations (#38553)
## **Description** Updates row key colors in Confirmations. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/38553?quickstart=1) ## **Changelog** CHANGELOG entry: Update row key colors in Confirmations ## **Related issues** Fixes: MetaMask/MetaMask-planning#5279 ## **Manual testing steps** 1. Trigger the Confirmations page for different scenarios (Send, dapp, Base network, etc.) 2. Click on "Show advanced details" button 3. Check that colors are updated according to the screenshots ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <img width="473" height="639" alt="image" src="https://github.com/user-attachments/assets/2c1b3964-a0d0-4388-8b03-43c3e0d93be8" /> <img width="487" height="572" alt="image" src="https://github.com/user-attachments/assets/846f3465-fa02-4395-a0f9-d1d62d119c49" /> ## **Pre-merge author checklist** - [ ] 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). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Set default label text color in confirmation info rows to `textAlternative` and update affected snapshots. > > - **UI**: > - **Confirmations Info Row**: Default label color now falls back to `TextColor.textAlternative` (`ui/components/app/confirm/info/row/row.tsx`). > - **Tests/Snapshots**: > - Updated snapshots across confirmation views to reflect the new label color on row keys (multiple files under `ui/pages/confirmations/components/confirm/**` and `ui/components/app/confirm/info/row/**`). > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit d773d38. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY --> --------- Signed-off-by: dan437 <[email protected]>
1 parent f1a8846 commit 0765009

File tree

24 files changed

+286
-286
lines changed

24 files changed

+286
-286
lines changed

‎ui/components/app/confirm/info/row/__snapshots__/expandable-row.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`ConfirmInfoExpandableRow should match snapshot 1`] = `
77
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
88
>
99
<div
10-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
10+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
1111
>
1212
<div
1313
class="mm-box mm-box--display-flex mm-box--align-items-center"

‎ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`ConfirmInfoRow should match snapshot 1`] = `
77
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
88
>
99
<div
10-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
10+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
1111
>
1212
<div
1313
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -45,7 +45,7 @@ exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
4545
/>
4646
</button>
4747
<div
48-
class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
48+
class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
4949
>
5050
<div
5151
class="mm-box mm-box--display-flex mm-box--align-items-center"

‎ui/components/app/confirm/info/row/row.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
153153
flexDirection={FlexDirection.Row}
154154
justifyContent={JustifyContent.center}
155155
alignItems={AlignItems.flexStart}
156-
color={color}
156+
color={color ?? TextColor.textAlternative}
157157
paddingRight={contentPaddingRight || null}
158158
onClick={onClick}
159159
className={onClick && 'hoverable'}

‎ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap‎

Lines changed: 27 additions & 27 deletions
Large diffs are not rendered by default.

‎ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
1111
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
1212
>
1313
<div
14-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
14+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
1515
>
1616
<div
1717
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -54,7 +54,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
5454
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
5555
>
5656
<div
57-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
57+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
5858
>
5959
<div
6060
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -438,7 +438,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
438438
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
439439
>
440440
<div
441-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
441+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
442442
>
443443
<div
444444
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -491,7 +491,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
491491
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
492492
>
493493
<div
494-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
494+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
495495
>
496496
<div
497497
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -561,7 +561,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
561561
/>
562562
</button>
563563
<div
564-
class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
564+
class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
565565
>
566566
<div
567567
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -583,7 +583,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
583583
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
584584
>
585585
<div
586-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
586+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
587587
>
588588
<div
589589
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -614,7 +614,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
614614
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
615615
>
616616
<div
617-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
617+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
618618
>
619619
<div
620620
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -670,7 +670,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
670670
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
671671
>
672672
<div
673-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
673+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
674674
>
675675
<div
676676
class="mm-box mm-box--display-flex mm-box--align-items-center"

‎ui/pages/confirmations/components/confirm/info/approve/approve-static-simulation/__snapshots__/approve-static-simulation.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ exports[`<ApproveStaticSimulation /> renders component when token is an NFT 1`]
1111
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
1212
>
1313
<div
14-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
14+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
1515
>
1616
<div
1717
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -54,7 +54,7 @@ exports[`<ApproveStaticSimulation /> renders component when token is an NFT 1`]
5454
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
5555
>
5656
<div
57-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
57+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
5858
>
5959
<div
6060
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -118,7 +118,7 @@ exports[`<ApproveStaticSimulation /> renders component when token is not an NFT
118118
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
119119
>
120120
<div
121-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
121+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
122122
>
123123
<div
124124
class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -161,7 +161,7 @@ exports[`<ApproveStaticSimulation /> renders component when token is not an NFT
161161
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
162162
>
163163
<div
164-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
164+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
165165
>
166166
<div
167167
class="mm-box mm-box--display-flex mm-box--align-items-center"

‎ui/pages/confirmations/components/confirm/info/native-transfer/__snapshots__/native-transfer.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ exports[`NativeTransferInfo renders correctly 1`] = `
266266
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
267267
>
268268
<div
269-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
269+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
270270
>
271271
<div
272272
class="mm-box mm-box--display-flex mm-box--align-items-center"

‎ui/pages/confirmations/components/confirm/info/nft-token-transfer/__snapshots__/nft-token-transfer.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -296,7 +296,7 @@ exports[`NFTTokenTransferInfo renders correctly 1`] = `
296296
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
297297
>
298298
<div
299-
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
299+
class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-alternative"
300300
>
301301
<div
302302
class="mm-box mm-box--display-flex mm-box--align-items-center"

0 commit comments

Comments
 (0)