Skip to content

Commit d9f52b4

Browse files
GuillaumeRxGuillaumeRx
committed
Revert "fix: Confirmation responsiveness inconsistencies (redesign, Snaps, multichain, permissions-connect, confirmations-page) (#31058)"
This reverts commit 3c68f3f.
1 parent 0e3a38e commit d9f52b4

File tree

72 files changed

+188
-471
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+188
-471
lines changed

‎.storybook/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
margin-top: auto !important;
1010
}
1111

12-
.snap-ui-renderer__content {
13-
margin-bottom: 0 !important;
12+
.snap-ui-renderer__container {
13+
padding-bottom: 0 !important;
1414
}
1515

1616
.snap-ui-renderer__panel {

‎test/e2e/snaps/test-snap-dialog.spec.js‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,6 @@ describe('Test Snap Dialog', function () {
4545
tag: 'button',
4646
});
4747

48-
// click and dismiss possible scroll element
49-
await driver.clickElementSafe('[data-testid="snap-install-scroll"]');
50-
5148
// wait for and click confirm
5249
await driver.waitForSelector({ text: 'Confirm' });
5350
await driver.clickElement({
@@ -151,9 +148,6 @@ describe('Test Snap Dialog', function () {
151148
// switch to dialog popup
152149
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
153150

154-
// click and dismiss possible scroll element
155-
await driver.clickElementSafe('[data-testid="snap-install-scroll"]');
156-
157151
// click cancel button and wait for window to close
158152
await driver.clickElementAndWaitForWindowToClose({
159153
text: 'Cancel',
@@ -200,9 +194,6 @@ describe('Test Snap Dialog', function () {
200194
// switch to dialog popup
201195
await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
202196

203-
// click and dismiss possible scroll element
204-
await driver.clickElementSafe('[data-testid="snap-install-scroll"]');
205-
206197
// click cancel button and wait for window to close
207198
await driver.clickElementAndWaitForWindowToClose({
208199
text: 'Cancel',
@@ -227,9 +218,6 @@ describe('Test Snap Dialog', function () {
227218
// fill '2323' in form field
228219
await driver.pasteIntoField('#custom-input', '2323');
229220

230-
// click and dismiss possible scroll element
231-
await driver.clickElementSafe('[data-testid="snap-install-scroll"]');
232-
233221
// click confirm button and wait for window to close
234222
await driver.clickElementAndWaitForWindowToClose({
235223
text: 'Confirm',

‎ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`NFT Details should match minimal props and state snapshot 1`] = `
44
<div>
55
<div
6-
class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
6+
class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
77
data-testid="multichain-page"
88
>
99
<div

‎ui/components/app/assets/nfts/nft-details/__snapshots__/nft-full-image.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`NFT full image should match snapshot 1`] = `
66
class="mm-box main-container asset__container"
77
>
88
<div
9-
class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
9+
class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
1010
data-testid="multichain-page"
1111
>
1212
<div

‎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
@@ -31,7 +31,7 @@ exports[`ConfirmInfoRow should match snapshot 1`] = `
3131
exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
3232
<div>
3333
<div
34-
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
34+
class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
3535
style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
3636
>
3737
<button
@@ -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--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
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 & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import {
2323
TextColor,
2424
TextVariant,
2525
} from '../../../../../helpers/constants/design-system';
26-
import { SizeNumber } from '../../../../ui/box/box';
2726
import { CopyIcon } from './copy-icon';
2827

2928
export enum ConfirmInfoRowVariant {
@@ -91,9 +90,6 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
9190

9291
const isCollapsible = collapsed !== undefined;
9392

94-
const contentPaddingRight = ((copyEnabled ? 6 : 0) +
95-
(isCollapsible ? 6 : 0)) as SizeNumber;
96-
9793
return (
9894
<ConfirmInfoRowContext.Provider value={{ variant }}>
9995
<Box
@@ -109,7 +105,7 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
109105
marginTop={2}
110106
marginBottom={2}
111107
paddingLeft={2}
112-
paddingRight={2}
108+
paddingRight={copyEnabled ? 5 : 2}
113109
color={TEXT_COLORS[variant] as TextColor}
114110
style={{
115111
overflowWrap: OverflowWrap.Anywhere,
@@ -146,7 +142,6 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
146142
justifyContent={JustifyContent.center}
147143
alignItems={AlignItems.flexStart}
148144
color={color}
149-
paddingRight={contentPaddingRight || null}
150145
>
151146
<Box display={Display.Flex} alignItems={AlignItems.center}>
152147
<Text variant={TextVariant.bodyMdMedium} color={TextColor.inherit}>

‎ui/components/app/permission-page-container/index.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.permission-page-container-content {
2-
flex: '1 0 auto';
3-
}
4-
51
.permission-page-container-footer {
62
border-top: none !important;
73
}

‎ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ export default class PermissionPageContainerContent extends PureComponent {
6565
subjectType === SubjectType.Website ? getURLHost(origin) : origin;
6666
return (
6767
<Box
68-
className="permission-page-container-content"
6968
display={Display.Flex}
7069
flexDirection={FlexDirection.Column}
7170
justifyContent={JustifyContent.flexStart}

‎ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`SnapUIRenderer prefills interactive inputs with existing state 1`] = `
44
<div>
55
<div
66
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
7-
style="overflow-y: auto;"
7+
style="overflow-y: auto; margin-bottom: 0px;"
88
>
99
<div
1010
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -42,7 +42,7 @@ exports[`SnapUIRenderer re-focuses input after re-render 1`] = `
4242
<div>
4343
<div
4444
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
45-
style="overflow-y: auto;"
45+
style="overflow-y: auto; margin-bottom: 0px;"
4646
>
4747
<div
4848
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -96,7 +96,7 @@ exports[`SnapUIRenderer re-renders when the interface changes 1`] = `
9696
<div>
9797
<div
9898
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
99-
style="overflow-y: auto;"
99+
style="overflow-y: auto; margin-bottom: 0px;"
100100
>
101101
<div
102102
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -150,7 +150,7 @@ exports[`SnapUIRenderer re-syncs state when the interface changes 1`] = `
150150
<div>
151151
<div
152152
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
153-
style="overflow-y: auto;"
153+
style="overflow-y: auto; margin-bottom: 0px;"
154154
>
155155
<div
156156
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -204,7 +204,7 @@ exports[`SnapUIRenderer renders basic UI 1`] = `
204204
<div>
205205
<div
206206
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
207-
style="overflow-y: auto;"
207+
style="overflow-y: auto; margin-bottom: 0px;"
208208
>
209209
<div
210210
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -231,7 +231,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
231231
<div>
232232
<div
233233
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
234-
style="overflow-y: auto;"
234+
style="overflow-y: auto; margin-bottom: 80px;"
235235
>
236236
<div
237237
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -247,7 +247,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
247247
</div>
248248
<div
249249
class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
250-
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
250+
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
251251
>
252252
<button
253253
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
@@ -302,7 +302,7 @@ exports[`SnapUIRenderer supports address inputs 1`] = `
302302
<div>
303303
<div
304304
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
305-
style="overflow-y: auto;"
305+
style="overflow-y: auto; margin-bottom: 0px;"
306306
>
307307
<div
308308
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -340,7 +340,7 @@ exports[`SnapUIRenderer supports address inputs with a disabled prop 1`] = `
340340
<div>
341341
<div
342342
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
343-
style="overflow-y: auto;"
343+
style="overflow-y: auto; margin-bottom: 0px;"
344344
>
345345
<div
346346
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -379,7 +379,7 @@ exports[`SnapUIRenderer supports address inputs with a placeholder 1`] = `
379379
<div>
380380
<div
381381
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
382-
style="overflow-y: auto;"
382+
style="overflow-y: auto; margin-bottom: 0px;"
383383
>
384384
<div
385385
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -418,7 +418,7 @@ exports[`SnapUIRenderer supports address inputs with existing state 1`] = `
418418
<div>
419419
<div
420420
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
421-
style="overflow-y: auto;"
421+
style="overflow-y: auto; margin-bottom: 0px;"
422422
>
423423
<div
424424
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -499,7 +499,7 @@ exports[`SnapUIRenderer supports address inputs within a field 1`] = `
499499
<div>
500500
<div
501501
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
502-
style="overflow-y: auto;"
502+
style="overflow-y: auto; margin-bottom: 0px;"
503503
>
504504
<div
505505
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -543,7 +543,7 @@ exports[`SnapUIRenderer supports container backgrounds 1`] = `
543543
<div>
544544
<div
545545
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-default"
546-
style="overflow-y: auto;"
546+
style="overflow-y: auto; margin-bottom: 80px;"
547547
>
548548
<div
549549
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -559,7 +559,7 @@ exports[`SnapUIRenderer supports container backgrounds 1`] = `
559559
</div>
560560
<div
561561
class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
562-
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
562+
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
563563
>
564564
<button
565565
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
@@ -591,7 +591,7 @@ exports[`SnapUIRenderer supports file inputs 1`] = `
591591
<div>
592592
<div
593593
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
594-
style="overflow-y: auto;"
594+
style="overflow-y: auto; margin-bottom: 0px;"
595595
>
596596
<div
597597
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -654,7 +654,7 @@ exports[`SnapUIRenderer supports forms 1`] = `
654654
<div>
655655
<div
656656
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
657-
style="overflow-y: auto;"
657+
style="overflow-y: auto; margin-bottom: 0px;"
658658
>
659659
<div
660660
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -704,7 +704,7 @@ exports[`SnapUIRenderer supports forms with fields 1`] = `
704704
<div>
705705
<div
706706
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
707-
style="overflow-y: auto;"
707+
style="overflow-y: auto; margin-bottom: 0px;"
708708
>
709709
<div
710710
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -786,7 +786,7 @@ exports[`SnapUIRenderer supports interactive inputs 1`] = `
786786
<div>
787787
<div
788788
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
789-
style="overflow-y: auto;"
789+
style="overflow-y: auto; margin-bottom: 0px;"
790790
>
791791
<div
792792
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -824,7 +824,7 @@ exports[`SnapUIRenderer supports the contentBackgroundColor prop 1`] = `
824824
<div>
825825
<div
826826
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-default"
827-
style="overflow-y: auto;"
827+
style="overflow-y: auto; margin-bottom: 80px;"
828828
>
829829
<div
830830
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -840,7 +840,7 @@ exports[`SnapUIRenderer supports the contentBackgroundColor prop 1`] = `
840840
</div>
841841
<div
842842
class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
843-
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
843+
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
844844
>
845845
<button
846846
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
@@ -872,7 +872,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
872872
<div>
873873
<div
874874
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
875-
style="overflow-y: auto;"
875+
style="overflow-y: auto; margin-bottom: 80px;"
876876
>
877877
<div
878878
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -888,7 +888,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
888888
</div>
889889
<div
890890
class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
891-
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
891+
style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
892892
>
893893
<button
894894
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 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-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
@@ -929,7 +929,7 @@ exports[`SnapUIRenderer will render a matched address name 1`] = `
929929
<div>
930930
<div
931931
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
932-
style="overflow-y: auto;"
932+
style="overflow-y: auto; margin-bottom: 0px;"
933933
>
934934
<div
935935
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -1023,7 +1023,7 @@ exports[`SnapUIRenderer will render avatar when displayAvatar is true 1`] = `
10231023
<div>
10241024
<div
10251025
class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
1026-
style="overflow-y: auto;"
1026+
style="overflow-y: auto; margin-bottom: 0px;"
10271027
>
10281028
<div
10291029
class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"

‎ui/components/app/snaps/snap-ui-renderer/components/footer.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export const DEFAULT_FOOTER = {
2525
style: {
2626
boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
2727
height: '80px',
28+
position: 'fixed',
29+
bottom: 0,
2830
},
2931
},
3032
};

0 commit comments

Comments
 (0)