Skip to content

Commit b018c81

Browse files
jpurijpuri
authored
fix: Fix icon alignment in signature pages message section (#29284)
## **Description** Fix icon alignment in signature pages message section. ## **Related issues** Fixes: #28793 ## **Manual testing steps** 1. Go to test dapp 2. Submit permit 3. Check expand and copy icons position in message section ## **Screenshots/Recordings** <img width="360" alt="Screenshot 2024-12-17 at 9 06 53 PM" src="https://github.com/user-attachments/assets/48961c2a-b5c6-4b38-b005-0accb4ff3f3d" /> ## **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.
1 parent 26f7c5a commit b018c81

File tree

10 files changed

+38
-39
lines changed

10 files changed

+38
-39
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
3737
<button
3838
aria-label="copy-button"
3939
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
40-
style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
40+
style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
4141
>
4242
<span
4343
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

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

+1-2
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
117117
{copyEnabled && (
118118
<CopyIcon
119119
copyText={copyText ?? ''}
120-
style={{ right: isCollapsible ? 32 : 4, top: 4 }}
120+
style={{ right: isCollapsible ? 32 : 4 }}
121121
color={IconColor.iconMuted}
122122
/>
123123
)}
@@ -130,7 +130,6 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
130130
cursor: 'pointer',
131131
position: 'absolute',
132132
right: 8,
133-
top: 4,
134133
}}
135134
onClick={() => setExpanded(!expanded)}
136135
data-testid="sectionCollapseButton"

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -570,7 +570,7 @@ exports[`Info renders info section for personal sign request 1`] = `
570570
<button
571571
aria-label="copy-button"
572572
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
573-
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
573+
style="cursor: pointer; position: absolute; right: 32px; top: 2px;"
574574
>
575575
<span
576576
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -581,7 +581,7 @@ exports[`Info renders info section for personal sign request 1`] = `
581581
aria-label="collapse-button"
582582
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
583583
data-testid="sectionCollapseButton"
584-
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
584+
style="cursor: pointer; position: absolute; right: 8px;"
585585
>
586586
<span
587587
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -1019,7 +1019,7 @@ exports[`Info renders info section for typed sign request 1`] = `
10191019
<button
10201020
aria-label="copy-button"
10211021
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
1022-
style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
1022+
style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
10231023
>
10241024
<span
10251025
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -654,7 +654,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
654654
<button
655655
aria-label="copy-button"
656656
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
657-
style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
657+
style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
658658
>
659659
<span
660660
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ exports[`PersonalSignInfo handle reverse string properly 1`] = `
5858
<button
5959
aria-label="copy-button"
6060
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
61-
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
61+
style="cursor: pointer; position: absolute; right: 32px; top: 2px;"
6262
>
6363
<span
6464
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -69,7 +69,7 @@ exports[`PersonalSignInfo handle reverse string properly 1`] = `
6969
aria-label="collapse-button"
7070
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
7171
data-testid="sectionCollapseButton"
72-
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
72+
style="cursor: pointer; position: absolute; right: 8px;"
7373
>
7474
<span
7575
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -162,7 +162,7 @@ exports[`PersonalSignInfo renders correctly for personal sign request 1`] = `
162162
<button
163163
aria-label="copy-button"
164164
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
165-
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
165+
style="cursor: pointer; position: absolute; right: 32px; top: 2px;"
166166
>
167167
<span
168168
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -173,7 +173,7 @@ exports[`PersonalSignInfo renders correctly for personal sign request 1`] = `
173173
aria-label="collapse-button"
174174
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
175175
data-testid="sectionCollapseButton"
176-
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
176+
style="cursor: pointer; position: absolute; right: 8px;"
177177
>
178178
<span
179179
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

‎ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
99
<button
1010
aria-label="copy-button"
1111
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
12-
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
12+
style="cursor: pointer; position: absolute; right: 32px; top: 2px;"
1313
>
1414
<span
1515
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -20,7 +20,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
2020
aria-label="collapse-button"
2121
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
2222
data-testid="sectionCollapseButton"
23-
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
23+
style="cursor: pointer; position: absolute; right: 8px;"
2424
>
2525
<span
2626
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -53,7 +53,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
5353
<button
5454
aria-label="copy-button"
5555
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
56-
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
56+
style="cursor: pointer; position: absolute; right: 32px; top: 2px;"
5757
>
5858
<span
5959
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -64,7 +64,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
6464
aria-label="collapse-button"
6565
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
6666
data-testid="sectionCollapseButton"
67-
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
67+
style="cursor: pointer; position: absolute; right: 8px;"
6868
>
6969
<span
7070
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

‎ui/pages/confirmations/components/confirm/info/shared/transaction-data/__snapshots__/transaction-data.test.tsx.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
1313
<button
1414
aria-label="copy-button"
1515
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
16-
style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
16+
style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
1717
>
1818
<span
1919
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -1024,7 +1024,7 @@ exports[`TransactionData renders decoded data with no names 1`] = `
10241024
<button
10251025
aria-label="copy-button"
10261026
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
1027-
style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
1027+
style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
10281028
>
10291029
<span
10301030
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -1246,7 +1246,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
12461246
<button
12471247
aria-label="copy-button"
12481248
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
1249-
style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
1249+
style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
12501250
>
12511251
<span
12521252
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -2314,7 +2314,7 @@ exports[`TransactionData renders raw hexadecimal if no decoded data 1`] = `
23142314
<button
23152315
aria-label="copy-button"
23162316
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
2317-
style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
2317+
style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
23182318
>
23192319
<span
23202320
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

‎ui/pages/confirmations/components/confirm/info/typed-sign-v1/__snapshots__/typed-sign-v1.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ exports[`TypedSignInfo correctly renders typed sign data request 1`] = `
5858
<button
5959
aria-label="copy-button"
6060
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
61-
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
61+
style="cursor: pointer; position: absolute; right: 32px; top: 2px;"
6262
>
6363
<span
6464
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -69,7 +69,7 @@ exports[`TypedSignInfo correctly renders typed sign data request 1`] = `
6969
aria-label="collapse-button"
7070
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
7171
data-testid="sectionCollapseButton"
72-
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
72+
style="cursor: pointer; position: absolute; right: 8px;"
7373
>
7474
<span
7575
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

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

+7-7
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,7 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `
339339
<button
340340
aria-label="copy-button"
341341
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
342-
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
342+
style="cursor: pointer; position: absolute; right: 32px; top: 2px;"
343343
>
344344
<span
345345
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -350,7 +350,7 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `
350350
aria-label="collapse-button"
351351
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
352352
data-testid="sectionCollapseButton"
353-
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
353+
style="cursor: pointer; position: absolute; right: 8px;"
354354
>
355355
<span
356356
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -714,7 +714,7 @@ exports[`TypedSignInfo correctly renders permit sign type with no deadline 1`] =
714714
<button
715715
aria-label="copy-button"
716716
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
717-
style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
717+
style="cursor: pointer; position: absolute; right: 32px; top: 2px;"
718718
>
719719
<span
720720
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -725,7 +725,7 @@ exports[`TypedSignInfo correctly renders permit sign type with no deadline 1`] =
725725
aria-label="collapse-button"
726726
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
727727
data-testid="sectionCollapseButton"
728-
style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
728+
style="cursor: pointer; position: absolute; right: 8px;"
729729
>
730730
<span
731731
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -888,7 +888,7 @@ exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
888888
<button
889889
aria-label="copy-button"
890890
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
891-
style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
891+
style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
892892
>
893893
<span
894894
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -1754,7 +1754,7 @@ exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
17541754
<button
17551755
aria-label="copy-button"
17561756
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
1757-
style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
1757+
style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
17581758
>
17591759
<span
17601760
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -2243,7 +2243,7 @@ exports[`TypedSignInfo should render message for typed sign v4 request 1`] = `
22432243
<button
22442244
aria-label="copy-button"
22452245
class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
2246-
style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
2246+
style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
22472247
>
22482248
<span
22492249
class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

0 commit comments

Comments
 (0)