Skip to content

Commit 0a031af

Browse files
lwin-kyawlwin-kyaw
committed
fix: updated create-password.test snapshot
1 parent 1b7b8b2 commit 0a031af

File tree

1 file changed

+133
-143
lines changed

1 file changed

+133
-143
lines changed

‎ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap

Lines changed: 133 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -2,177 +2,167 @@
22

33
exports[`Onboarding Create Password Render should match snapshot 1`] = `
44
<div>
5-
<div
6-
class="create-password"
5+
<form
6+
class="mm-box create-password mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column mm-box--justify-content-space-between mm-box--height-full"
77
data-testid="create-password"
88
>
9-
<form
10-
class="create-password__form"
9+
<div
10+
class="mm-box"
1111
>
1212
<div
13-
class="create-password__content"
13+
class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-flex-start mm-box--width-full"
1414
>
15-
<div
16-
class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-flex-start mm-box--width-full"
15+
<button
16+
aria-label="back"
17+
class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
18+
data-testid="create-password-back-button"
19+
type="button"
1720
>
18-
<button
19-
aria-label="back"
20-
class="mm-box mm-button-icon mm-button-icon--size-md mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
21-
data-testid="create-password-back-button"
22-
>
23-
<span
24-
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
25-
style="mask-image: url('./images/icons/arrow-left.svg');"
26-
/>
27-
</button>
28-
</div>
29-
<div
30-
class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-flex-start mm-box--width-full"
21+
<span
22+
class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
23+
style="mask-image: url('./images/icons/arrow-left.svg');"
24+
/>
25+
</button>
26+
</div>
27+
<div
28+
class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-flex-start mm-box--width-full"
29+
>
30+
<p
31+
class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
3132
>
32-
<p
33-
class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
34-
>
35-
Step 1 of 3
36-
</p>
37-
<h2
38-
class="mm-box mm-text mm-text--heading-lg mm-box--color-text-default"
39-
>
40-
Create password
41-
</h2>
42-
</div>
33+
Step 1 of 3
34+
</p>
35+
<h2
36+
class="mm-box mm-text mm-text--heading-lg mm-box--color-text-default"
37+
>
38+
Create password
39+
</h2>
40+
</div>
41+
<div
42+
class="mm-box"
43+
>
4344
<div
44-
class="mm-box"
45+
class="mm-box mm-form-text-field mm-box--display-flex mm-box--flex-direction-column"
4546
>
47+
<label
48+
class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md mm-text--font-weight-medium mm-box--margin-bottom-1 mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
49+
for="create-password-new"
50+
>
51+
New password
52+
</label>
4653
<div
47-
class="mm-box mm-form-text-field mm-box--display-flex mm-box--flex-direction-column"
54+
class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--focused mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-4 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-width-1 box--border-style-solid"
4855
>
49-
<label
50-
class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md mm-text--font-weight-medium mm-box--margin-bottom-1 mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
51-
for="create-password-new"
52-
>
53-
New password
54-
</label>
55-
<div
56-
class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--focused mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-4 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-width-1 box--border-style-solid"
56+
<input
57+
autocomplete="on"
58+
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-2 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
59+
data-testid="create-password-new-input"
60+
focused="true"
61+
id="create-password-new"
62+
placeholder="Enter a strong password"
63+
type="password"
64+
value=""
65+
/>
66+
<button
67+
aria-label="Show Password"
68+
class="mm-box mm-button-icon mm-button-icon--size-lg mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
69+
data-testid="show-password"
70+
type="button"
5771
>
58-
<input
59-
autocomplete="off"
60-
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-2 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
61-
data-testid="create-password-new-input"
62-
focused="true"
63-
id="create-password-new"
64-
placeholder="Enter a strong password"
65-
type="password"
66-
value=""
72+
<span
73+
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
74+
style="mask-image: url('./images/icons/eye.svg');"
6775
/>
68-
<button
69-
aria-label="show password"
70-
class="mm-box mm-button-icon mm-button-icon--size-lg mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
71-
data-testid="show-password"
72-
>
73-
<span
74-
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
75-
style="mask-image: url('./images/icons/eye.svg');"
76-
/>
77-
</button>
78-
</div>
79-
<div
80-
class="mm-box mm-text mm-help-text mm-form-text-field__help-text mm-text--body-xs mm-box--margin-top-1 mm-box--color-text-default"
81-
>
82-
<div
83-
class="mm-box mm-text mm-text--inherit mm-box--color-text-default"
84-
>
85-
Password not long enough
86-
</div>
87-
</div>
76+
</button>
8877
</div>
78+
</div>
79+
<div
80+
class="mm-box mm-form-text-field mm-form-text-field--disabled mm-box--margin-top-4 mm-box--display-flex mm-box--flex-direction-column"
81+
>
82+
<label
83+
class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md mm-text--font-weight-medium mm-box--margin-bottom-1 mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
84+
for="create-password-confirm"
85+
>
86+
Confirm password
87+
</label>
8988
<div
90-
class="mm-box mm-form-text-field mm-form-text-field--disabled mm-box--margin-top-4 mm-box--display-flex mm-box--flex-direction-column"
89+
class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--disabled mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-4 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-width-1 box--border-style-solid"
9190
>
92-
<label
93-
class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md mm-text--font-weight-medium mm-box--margin-bottom-1 mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
94-
for="create-password-confirm"
95-
>
96-
Confirm password
97-
</label>
98-
<div
99-
class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--disabled mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-4 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-width-1 box--border-style-solid"
91+
<input
92+
autocomplete="on"
93+
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-input--disabled mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-2 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
94+
data-testid="create-password-confirm-input"
95+
disabled=""
96+
focused="false"
97+
id="create-password-confirm"
98+
placeholder="Re-enter your password"
99+
type="password"
100+
value=""
101+
/>
102+
<button
103+
aria-label="Show Password"
104+
class="mm-box mm-button-icon mm-button-icon--size-lg mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
105+
data-testid="show-confirm-password"
106+
type="button"
100107
>
101-
<input
102-
autocomplete="off"
103-
class="mm-box mm-text mm-input mm-input--disable-state-styles mm-input--disabled mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-2 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
104-
data-testid="create-password-confirm-input"
105-
disabled=""
106-
focused="false"
107-
id="create-password-confirm"
108-
placeholder="Re-enter your password"
109-
type="password"
110-
value=""
108+
<span
109+
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
110+
style="mask-image: url('./images/icons/eye.svg');"
111111
/>
112-
<button
113-
aria-label="show password"
114-
class="mm-box mm-button-icon mm-button-icon--size-lg mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
115-
data-testid="show-confirm-password"
116-
>
117-
<span
118-
class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
119-
style="mask-image: url('./images/icons/eye.svg');"
120-
/>
121-
</button>
122-
</div>
123-
112+
</button>
124113
</div>
114+
125115
</div>
126116
</div>
117+
</div>
118+
<div
119+
class="mm-box"
120+
>
127121
<div
128-
class="create-password__footer"
122+
class="mm-box create-password__terms-container mm-box--margin-bottom-4 mm-box--justify-content-space-between mm-box--align-items-center"
129123
>
130-
<div
131-
class="mm-box create-password__terms-container mm-box--margin-bottom-4 mm-box--justify-content-space-between mm-box--align-items-center"
124+
<label
125+
class="mm-box mm-text mm-checkbox mm-text--body-md mm-box--display-inline-flex mm-box--align-items-flex-start mm-box--color-text-default"
132126
>
133-
<label
134-
class="mm-box mm-text mm-checkbox mm-text--body-md mm-box--display-inline-flex mm-box--align-items-flex-start mm-box--color-text-default"
127+
<span
128+
class="mm-checkbox__input-wrapper"
135129
>
136-
<span
137-
class="mm-checkbox__input-wrapper"
130+
<input
131+
class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-2 mm-box--display-flex mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
132+
data-testid="create-password-terms"
133+
type="checkbox"
134+
/>
135+
</span>
136+
<span>
137+
<p
138+
class="mm-box mm-text mm-text--body-sm mm-box--margin-left-1 mm-box--color-text-default"
138139
>
139-
<input
140-
class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-2 mm-box--display-flex mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
141-
data-testid="create-password-terms"
142-
type="checkbox"
143-
/>
144-
</span>
145-
<span>
146-
<p
147-
class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-text-default"
140+
MetaMask can’t recover this password.
141+
 
142+
<a
143+
href="https://support.metamask.io/getting-started/user-guide-secret-recovery-phrase-password-and-private-keys/"
144+
rel="noopener noreferrer"
145+
target="_blank"
148146
>
149-
MetaMask can’t recover this password.
150-
 
151-
<a
152-
href="https://support.metamask.io/getting-started/user-guide-secret-recovery-phrase-password-and-private-keys/"
153-
rel="noopener noreferrer"
154-
target="_blank"
147+
<span
148+
class="create-password__link-text"
155149
>
156-
<span
157-
class="create-password__link-text"
158-
>
159-
Learn more.
160-
</span>
161-
</a>
162-
</p>
163-
</span>
164-
</label>
165-
</div>
166-
<button
167-
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled create-password__form--submit-button mm-button-primary mm-button-primary--disabled 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--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
168-
data-testid="create-password-submit"
169-
data-theme="light"
170-
disabled=""
171-
>
172-
Confirm
173-
</button>
150+
Learn more.
151+
</span>
152+
</a>
153+
</p>
154+
</span>
155+
</label>
174156
</div>
175-
</form>
176-
</div>
157+
<button
158+
class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled create-password__form--submit-button mm-button-primary mm-button-primary--disabled 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--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-xl"
159+
data-testid="create-password-submit"
160+
data-theme="light"
161+
disabled=""
162+
>
163+
Confirm
164+
</button>
165+
</div>
166+
</form>
177167
</div>
178168
`;

0 commit comments

Comments
 (0)