Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 6c99b91

Browse files
floriandurosflorianduros
authored
Minor tweaks to UserSettings dialog (#12651)
* Make user settings dialog title looks like figma design * dialog: add title to close button * Update dialog snapshot * Update playwright snapshot
1 parent 7e7b55e commit 6c99b91

25 files changed

+175
-158
lines changed

‎playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png

-5.52 KB
Loading

‎playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png

-6.73 KB
Loading

‎playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png

-146 Bytes
Loading

‎playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png

-131 Bytes
Loading

‎playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png

-6.45 KB
Loading

‎res/css/views/dialogs/_UserSettingsDialog.pcss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,15 @@ limitations under the License.
2222
justify-content: center;
2323
}
2424

25+
.mx_UserSettingsDialog_title {
26+
/* Override default dialog font style */
27+
font: var(--cpd-font-heading-md-regular) !important;
28+
29+
.mx_UserSettingsDialog_title_strong {
30+
font: var(--cpd-font-heading-md-semibold);
31+
}
32+
}
33+
2534
/* ICONS */
2635
/* ========================================================== */
2736

‎src/components/views/dialogs/BaseDialog.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ export default class BaseDialog extends React.Component<IProps> {
128128
onClick={this.onCancelClick}
129129
className="mx_Dialog_cancelButton"
130130
aria-label={_t("dialog_close_label")}
131+
title={_t("dialog_close_label")}
131132
/>
132133
);
133134
}
@@ -184,8 +185,8 @@ export default class BaseDialog extends React.Component<IProps> {
184185
)}
185186
{this.props.headerButton}
186187
</div>
187-
{cancelButton}
188188
{this.props.children}
189+
{cancelButton}
189190
</FocusLock>
190191
</MatrixClientContext.Provider>
191192
);

‎src/components/views/dialogs/UserSettingsDialog.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ interface IProps {
5050

5151
function titleForTabID(tabId: UserTab): React.ReactNode {
5252
const subs = {
53-
strong: (sub: string) => <strong>{sub}</strong>,
53+
strong: (sub: string) => <span className="mx_UserSettingsDialog_title_strong">{sub}</span>,
5454
};
5555
switch (tabId) {
5656
case UserTab.General:
@@ -230,6 +230,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
230230
hasCancel={true}
231231
onFinished={props.onFinished}
232232
title={titleForTabID(activeTabId)}
233+
titleClass="mx_UserSettingsDialog_title"
233234
>
234235
<div className="mx_SettingsDialog_content">
235236
<TabbedView

‎test/components/structures/__snapshots__/MatrixChat-test.tsx.snap

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -334,12 +334,6 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
334334
Leave room
335335
</h1>
336336
</div>
337-
<div
338-
aria-label="Close dialog"
339-
class="mx_AccessibleButton mx_Dialog_cancelButton"
340-
role="button"
341-
tabindex="0"
342-
/>
343337
<div
344338
class="mx_Dialog_content"
345339
id="mx_Dialog_content"
@@ -369,6 +363,12 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
369363
</button>
370364
</span>
371365
</div>
366+
<div
367+
aria-label="Close dialog"
368+
class="mx_AccessibleButton mx_Dialog_cancelButton"
369+
role="button"
370+
tabindex="0"
371+
/>
372372
</div>
373373
`;
374374

@@ -390,12 +390,6 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
390390
Leave space
391391
</h1>
392392
</div>
393-
<div
394-
aria-label="Close dialog"
395-
class="mx_AccessibleButton mx_Dialog_cancelButton"
396-
role="button"
397-
tabindex="0"
398-
/>
399393
<div
400394
class="mx_Dialog_content"
401395
id="mx_Dialog_content"
@@ -425,5 +419,11 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
425419
</button>
426420
</span>
427421
</div>
422+
<div
423+
aria-label="Close dialog"
424+
class="mx_AccessibleButton mx_Dialog_cancelButton"
425+
role="button"
426+
tabindex="0"
427+
/>
428428
</div>
429429
`;

‎test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
2323
Download Element
2424
</h1>
2525
</div>
26-
<div
27-
aria-label="Close dialog"
28-
class="mx_AccessibleButton mx_Dialog_cancelButton"
29-
role="button"
30-
tabindex="0"
31-
/>
3226
<div
3327
class="mx_AppDownloadDialog_mobile"
3428
>
@@ -139,6 +133,12 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
139133
Google Play and the Google Play logo are trademarks of Google LLC.
140134
</p>
141135
</div>
136+
<div
137+
aria-label="Close dialog"
138+
class="mx_AccessibleButton mx_Dialog_cancelButton"
139+
role="button"
140+
tabindex="0"
141+
/>
142142
</div>
143143
<div
144144
data-focus-guard="true"
@@ -171,12 +171,6 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
171171
Download Element
172172
</h1>
173173
</div>
174-
<div
175-
aria-label="Close dialog"
176-
class="mx_AccessibleButton mx_Dialog_cancelButton"
177-
role="button"
178-
tabindex="0"
179-
/>
180174
<div
181175
class="mx_AppDownloadDialog_desktop"
182176
>
@@ -295,6 +289,12 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
295289
Google Play and the Google Play logo are trademarks of Google LLC.
296290
</p>
297291
</div>
292+
<div
293+
aria-label="Close dialog"
294+
class="mx_AccessibleButton mx_Dialog_cancelButton"
295+
role="button"
296+
tabindex="0"
297+
/>
298298
</div>
299299
<div
300300
data-focus-guard="true"
@@ -327,12 +327,6 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
327327
Download Element
328328
</h1>
329329
</div>
330-
<div
331-
aria-label="Close dialog"
332-
class="mx_AccessibleButton mx_Dialog_cancelButton"
333-
role="button"
334-
tabindex="0"
335-
/>
336330
<div
337331
class="mx_AppDownloadDialog_desktop"
338332
>
@@ -364,6 +358,12 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
364358
Google Play and the Google Play logo are trademarks of Google LLC.
365359
</p>
366360
</div>
361+
<div
362+
aria-label="Close dialog"
363+
class="mx_AccessibleButton mx_Dialog_cancelButton"
364+
role="button"
365+
tabindex="0"
366+
/>
367367
</div>
368368
<div
369369
data-focus-guard="true"
@@ -396,12 +396,6 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
396396
Download Element
397397
</h1>
398398
</div>
399-
<div
400-
aria-label="Close dialog"
401-
class="mx_AccessibleButton mx_Dialog_cancelButton"
402-
role="button"
403-
tabindex="0"
404-
/>
405399
<div
406400
class="mx_AppDownloadDialog_desktop"
407401
>
@@ -530,6 +524,12 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
530524
Google Play and the Google Play logo are trademarks of Google LLC.
531525
</p>
532526
</div>
527+
<div
528+
aria-label="Close dialog"
529+
class="mx_AccessibleButton mx_Dialog_cancelButton"
530+
role="button"
531+
tabindex="0"
532+
/>
533533
</div>
534534
<div
535535
data-focus-guard="true"

‎test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,6 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
2424
Changelog
2525
</h1>
2626
</div>
27-
<div
28-
aria-label="Close dialog"
29-
class="mx_AccessibleButton mx_Dialog_cancelButton"
30-
role="button"
31-
tabindex="0"
32-
/>
3327
<div
3428
class="mx_Dialog_content"
3529
id="mx_Dialog_content"
@@ -131,6 +125,12 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
131125
</button>
132126
</span>
133127
</div>
128+
<div
129+
aria-label="Close dialog"
130+
class="mx_AccessibleButton mx_Dialog_cancelButton"
131+
role="button"
132+
tabindex="0"
133+
/>
134134
</div>
135135
<div
136136
data-focus-guard="true"

‎test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,6 @@ exports[`ConfirmUserActionDialog renders 1`] = `
2424
Ban this
2525
</h1>
2626
</div>
27-
<div
28-
aria-label="Close dialog"
29-
class="mx_AccessibleButton mx_Dialog_cancelButton"
30-
role="button"
31-
tabindex="0"
32-
/>
3327
<div
3428
class="mx_Dialog_content"
3529
id="mx_Dialog_content"
@@ -85,6 +79,12 @@ exports[`ConfirmUserActionDialog renders 1`] = `
8579
</button>
8680
</span>
8781
</div>
82+
<div
83+
aria-label="Close dialog"
84+
class="mx_AccessibleButton mx_Dialog_cancelButton"
85+
role="button"
86+
tabindex="0"
87+
/>
8888
</div>
8989
<div
9090
data-focus-guard="true"

‎test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
2323
Developer Tools
2424
</h1>
2525
</div>
26-
<div
27-
aria-label="Close dialog"
28-
class="mx_AccessibleButton mx_Dialog_cancelButton"
29-
role="button"
30-
tabindex="0"
31-
/>
3226
<div
3327
class="mx_DevTools_label_left"
3428
>
@@ -39,6 +33,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
3933
>
4034
Room ID: !id
4135
<div
36+
aria-describedby="floating-ui-2"
4237
aria-label="Copy"
4338
class="mx_AccessibleButton mx_CopyableText_copyButton"
4439
role="button"
@@ -232,6 +227,12 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
232227
Back
233228
</button>
234229
</div>
230+
<div
231+
aria-label="Close dialog"
232+
class="mx_AccessibleButton mx_Dialog_cancelButton"
233+
role="button"
234+
tabindex="0"
235+
/>
235236
</div>
236237
<div
237238
data-focus-guard="true"

‎test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,6 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
1818
Export Chat
1919
</h1>
2020
</div>
21-
<div
22-
aria-label="Close dialog"
23-
class="mx_AccessibleButton mx_Dialog_cancelButton"
24-
role="button"
25-
tabindex="0"
26-
/>
2721
<p>
2822
Select from the options below to export chats from your timeline
2923
</p>
@@ -200,6 +194,12 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
200194
</button>
201195
</span>
202196
</div>
197+
<div
198+
aria-label="Close dialog"
199+
class="mx_AccessibleButton mx_Dialog_cancelButton"
200+
role="button"
201+
tabindex="0"
202+
/>
203203
</div>
204204
`;
205205

‎test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,6 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
2424
You'll lose access to your encrypted messages
2525
</h1>
2626
</div>
27-
<div
28-
aria-label="Close dialog"
29-
class="mx_AccessibleButton mx_Dialog_cancelButton"
30-
role="button"
31-
tabindex="0"
32-
/>
3327
<div>
3428
<div
3529
class="mx_Dialog_content"
@@ -78,6 +72,13 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
7872
</p>
7973
</details>
8074
</div>
75+
<div
76+
aria-describedby="floating-ui-22"
77+
aria-label="Close dialog"
78+
class="mx_AccessibleButton mx_Dialog_cancelButton"
79+
role="button"
80+
tabindex="0"
81+
/>
8182
</div>
8283
<div
8384
data-focus-guard="true"
@@ -111,12 +112,6 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
111112
You'll lose access to your encrypted messages
112113
</h1>
113114
</div>
114-
<div
115-
aria-label="Close dialog"
116-
class="mx_AccessibleButton mx_Dialog_cancelButton"
117-
role="button"
118-
tabindex="0"
119-
/>
120115
<div>
121116
<div
122117
class="mx_Dialog_content"
@@ -165,6 +160,13 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
165160
</p>
166161
</details>
167162
</div>
163+
<div
164+
aria-describedby="floating-ui-28"
165+
aria-label="Close dialog"
166+
class="mx_AccessibleButton mx_Dialog_cancelButton"
167+
role="button"
168+
tabindex="0"
169+
/>
168170
</div>
169171
<div
170172
data-focus-guard="true"
@@ -198,12 +200,6 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
198200
Sign out
199201
</h1>
200202
</div>
201-
<div
202-
aria-label="Close dialog"
203-
class="mx_AccessibleButton mx_Dialog_cancelButton"
204-
role="button"
205-
tabindex="0"
206-
/>
207203
<div
208204
class="mx_Dialog_content"
209205
id="mx_Dialog_content"
@@ -231,6 +227,12 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
231227
</button>
232228
</span>
233229
</div>
230+
<div
231+
aria-label="Close dialog"
232+
class="mx_AccessibleButton mx_Dialog_cancelButton"
233+
role="button"
234+
tabindex="0"
235+
/>
234236
</div>
235237
<div
236238
data-focus-guard="true"

0 commit comments

Comments
 (0)