PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Minor tweaks to UserSettings dialog (#12651)

Browse source 
* Make user settings dialog title looks like figma design

* dialog: add title to close button

* Update dialog snapshot

* Update playwright snapshot
This commit is contained in:
Florian Duros 2024-06-20 11:29:38 +02:00 committed by GitHub
parent 7e7b55efe3
commit 6c99b91210
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 175 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 48 KiB

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

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 65 KiB

BIN
playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

BIN
playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

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

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 58 KiB

9
res/css/views/dialogs/_UserSettingsDialog.pcss
View file

@ -22,6 +22,15 @@ limitations under the License.
justify-content: center;
}
.mx_UserSettingsDialog_title {
/* Override default dialog font style */
font: var(--cpd-font-heading-md-regular) !important;
.mx_UserSettingsDialog_title_strong {
font: var(--cpd-font-heading-md-semibold);
}
}
/* ICONS */
/* ========================================================== */

3
src/components/views/dialogs/BaseDialog.tsx
View file

@ -128,6 +128,7 @@ export default class BaseDialog extends React.Component<IProps> {
onClick={this.onCancelClick}
className="mx_Dialog_cancelButton"
aria-label={_t("dialog_close_label")}
title={_t("dialog_close_label")}
/>
);
}
@ -184,8 +185,8 @@ export default class BaseDialog extends React.Component<IProps> {
)}
{this.props.headerButton}
</div>
{cancelButton}
{this.props.children}
{cancelButton}
</FocusLock>
</MatrixClientContext.Provider>
);

3
src/components/views/dialogs/UserSettingsDialog.tsx
View file

@ -50,7 +50,7 @@ interface IProps {
function titleForTabID(tabId: UserTab): React.ReactNode {
const subs = {
strong: (sub: string) => <strong>{sub}</strong>,
strong: (sub: string) => <span className="mx_UserSettingsDialog_title_strong">{sub}</span>,
};
switch (tabId) {
case UserTab.General:
@ -230,6 +230,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
hasCancel={true}
onFinished={props.onFinished}
title={titleForTabID(activeTabId)}
titleClass="mx_UserSettingsDialog_title"
>
<div className="mx_SettingsDialog_content">
<TabbedView

24
test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
View file

@ -334,12 +334,6 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
Leave room
</h1>
</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"
@ -369,6 +363,12 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
`;
@ -390,12 +390,6 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
Leave space
</h1>
</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"
@ -425,5 +419,11 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
`;

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

@ -23,12 +23,6 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
Download Element
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AppDownloadDialog_mobile"
>
@ -139,6 +133,12 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
Google Play and the Google Play logo are trademarks of Google LLC.
</p>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
@ -171,12 +171,6 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
Download Element
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AppDownloadDialog_desktop"
>
@ -295,6 +289,12 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
Google Play and the Google Play logo are trademarks of Google LLC.
</p>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
@ -327,12 +327,6 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
Download Element
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AppDownloadDialog_desktop"
>
@ -364,6 +358,12 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
Google Play and the Google Play logo are trademarks of Google LLC.
</p>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
@ -396,12 +396,6 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
Download Element
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AppDownloadDialog_desktop"
>
@ -530,6 +524,12 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
Google Play and the Google Play logo are trademarks of Google LLC.
</p>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -24,12 +24,6 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
Changelog
</h1>
</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"
@ -131,6 +125,12 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -24,12 +24,6 @@ exports[`ConfirmUserActionDialog renders 1`] = `
Ban this
</h1>
</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"
@ -85,6 +79,12 @@ exports[`ConfirmUserActionDialog renders 1`] = `
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -23,12 +23,6 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
Developer Tools
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_DevTools_label_left"
>
@ -39,6 +33,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
>
Room ID: !id
<div
aria-describedby="floating-ui-2"
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@ -232,6 +227,12 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
Back
</button>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -18,12 +18,6 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
Export Chat
</h1>
</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>
@ -200,6 +194,12 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
`;

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

@ -24,12 +24,6 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
You'll lose access to your encrypted messages
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div>
<div
class="mx_Dialog_content"
@ -78,6 +72,13 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
</p>
</details>
</div>
<div
aria-describedby="floating-ui-22"
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
@ -111,12 +112,6 @@ 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>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div>
<div
class="mx_Dialog_content"
@ -165,6 +160,13 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
</p>
</details>
</div>
<div
aria-describedby="floating-ui-28"
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
@ -198,12 +200,6 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
Sign out
</h1>
</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"
@ -231,6 +227,12 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -23,12 +23,6 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
Select spaces
</h1>
</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
@ -141,6 +135,12 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
</div>
</div>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
@ -173,12 +173,6 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
Select spaces
</h1>
</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
@ -242,6 +236,12 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
</div>
</div>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -24,12 +24,6 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
Verify session
</h1>
</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"
@ -106,6 +100,12 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
@ -139,12 +139,6 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
Verify session
</h1>
</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"
@ -221,6 +215,12 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -23,12 +23,6 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
Message edits
</h1>
</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"
@ -107,6 +101,13 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
</ol>
</div>
</div>
<div
aria-describedby="floating-ui-2"
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
@ -139,12 +140,6 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
Message edits
</h1>
</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"
@ -320,6 +315,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
</ol>
</div>
</div>
<div
aria-describedby="floating-ui-8"
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -24,12 +24,6 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
Sign into your homeserver
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<form
class="mx_Dialog_content"
id="mx_ServerPickerDialog"
@ -131,6 +125,12 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
/>
</a>
</form>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -130,12 +130,6 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
Success!
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div>
<div>
<p>
@ -158,6 +152,12 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
</div>
</div>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -23,12 +23,6 @@ exports[`ExportE2eKeysDialog renders 1`] = `
Export room keys
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<form>
<div
class="mx_Dialog_content"
@ -102,6 +96,12 @@ exports[`ExportE2eKeysDialog renders 1`] = `
</button>
</div>
</form>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

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

@ -23,12 +23,6 @@ exports[`ImportE2eKeysDialog renders 1`] = `
Import room keys
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<form>
<div
class="mx_Dialog_content"
@ -103,6 +97,12 @@ exports[`ImportE2eKeysDialog renders 1`] = `
</button>
</div>
</form>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"

1
test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
View file

@ -23,6 +23,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
class="mx_ZoomButtons"
>
<div
aria-describedby="floating-ui-6"
aria-label="Zoom in"
class="mx_AccessibleButton mx_ZoomButtons_button"
data-testid="map-zoom-in-button"

24
test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
View file

@ -128,12 +128,6 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
Failed to update the join rules
</h1>
</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"
@ -149,6 +143,12 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
OK
</button>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
`;
@ -170,12 +170,6 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
Are you sure you want to make this encrypted room public?
</h1>
</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"
@ -231,5 +225,11 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
`;

12
test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
View file

@ -56,12 +56,6 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
</div>
</h1>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
<div
class="mx_AddExistingToSpace"
>
@ -118,6 +112,12 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
</div>
</div>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"