imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine styles of menus, toasts, popovers, and modals (#12332)

Browse source 
* Refine styles of menus, toasts, popovers, and modals

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12247, with the difference that modal styles have now been refreshed as well.

* Restore the fixed heights of some dialogs

* Fix formatting and flaky screenshot
This commit is contained in:
Robin 2024-03-13 09:38:32 -04:00 • committed by GitHub
parent 0f251d8a55
commit 80c4c3c28c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
65 changed files with 323 additions and 414 deletions
Download patch file Download diff file Expand all files Collapse all files

56
test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
View file

@ -14,7 +14,7 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -22,13 +22,13 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
>
Download Element
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AppDownloadDialog_mobile"
>
@ -162,7 +162,7 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -170,13 +170,13 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
>
Download Element
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AppDownloadDialog_desktop"
>
@ -318,7 +318,7 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -326,13 +326,13 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
>
Download Element
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AppDownloadDialog_desktop"
>
@ -387,7 +387,7 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -395,13 +395,13 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
>
Download Element
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AppDownloadDialog_desktop"
>

14
test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
View file

@ -15,7 +15,7 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -23,13 +23,13 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
>
Changelog
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_Dialog_content"
id="mx_Dialog_content"

14
test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
View file

@ -15,7 +15,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -23,13 +23,13 @@ exports[`ConfirmUserActionDialog renders 1`] = `
>
Ban this
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_Dialog_content"
id="mx_Dialog_content"

14
test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
View file

@ -14,7 +14,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -22,13 +22,13 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
>
Developer Tools
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_DevTools_label_left"
>

14
test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
View file

@ -9,7 +9,7 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -17,13 +17,13 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
>
Export Chat
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<p>
Select from the options below to export chats from your timeline
</p>

42
test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
View file

@ -15,7 +15,7 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -23,13 +23,13 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
>
You'll lose access to your encrypted messages
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div>
<div
class="mx_Dialog_content"
@ -102,7 +102,7 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -110,13 +110,13 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
>
You'll lose access to your encrypted messages
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div>
<div
class="mx_Dialog_content"
@ -189,7 +189,7 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -197,13 +197,13 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
>
Sign out
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_Dialog_content"
id="mx_Dialog_content"

28
test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
View file

@ -14,7 +14,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -22,13 +22,13 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
>
Select spaces
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<p>
<span>
Decide which spaces can access this room. If a space is selected, its members can find and join
@ -164,7 +164,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -172,13 +172,13 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
>
Select spaces
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<p>
<span>
Decide which spaces can access this room. If a space is selected, its members can find and join

28
test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
View file

@ -15,7 +15,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -23,13 +23,13 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
>
Verify session
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_Dialog_content"
id="mx_Dialog_content"
@ -130,7 +130,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -138,13 +138,13 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
>
Verify session
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_Dialog_content"
id="mx_Dialog_content"

28
test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
View file

@ -14,7 +14,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -22,13 +22,13 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
>
Message edits
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
tabindex="-1"
@ -130,7 +130,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -138,13 +138,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
>
Message edits
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
tabindex="-1"

14
test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
View file

@ -15,7 +15,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -23,13 +23,13 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
>
Sign into your homeserver
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<form
class="mx_Dialog_content"
id="mx_ServerPickerDialog"

14
test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap
View file

@ -121,7 +121,7 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -129,13 +129,13 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
>
Success!
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div>
<div>
<p>

14
test/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
View file

@ -14,7 +14,7 @@ exports[`ExportE2eKeysDialog renders 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -22,13 +22,13 @@ exports[`ExportE2eKeysDialog renders 1`] = `
>
Export room keys
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<form>
<div
class="mx_Dialog_content"

14
test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
View file

@ -14,7 +14,7 @@ exports[`ImportE2eKeysDialog renders 1`] = `
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
@ -22,13 +22,13 @@ exports[`ImportE2eKeysDialog renders 1`] = `
>
Import room keys
</h1>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<form>
<div
class="mx_Dialog_content"