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

Minor tweaks to UserSettings dialog #12651

Merged
merged 4 commits into from
Jun 20, 2024
Merged

Minor tweaks to UserSettings dialog #12651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
92f2760
Make user settings dialog title looks like figma design
florianduros Jun 19, 2024
3c82e53
dialog: add title to close button
florianduros Jun 19, 2024
5d0c530
Update dialog snapshot
florianduros Jun 19, 2024
253f1e2
Update playwright snapshot
florianduros Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...napshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...t/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...pshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions res/css/views/dialogs/_UserSettingsDialog.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
/* ========================================================== */

Expand Down
3 changes: 2 additions & 1 deletion src/components/views/dialogs/BaseDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")}
/>
);
}
Expand Down Expand Up @@ -184,8 +185,8 @@ export default class BaseDialog extends React.Component<IProps> {
)}
{this.props.headerButton}
</div>
{cancelButton}
{this.props.children}
{cancelButton}
</FocusLock>
</MatrixClientContext.Provider>
);
Expand Down
3 changes: 2 additions & 1 deletion src/components/views/dialogs/UserSettingsDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down
24 changes: 12 additions & 12 deletions test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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>
`;

Expand All @@ -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"
Expand Down Expand Up @@ -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 changes: 24 additions & 24 deletions test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down
12 changes: 6 additions & 6 deletions test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
12 changes: 6 additions & 6 deletions test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
13 changes: 7 additions & 6 deletions test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
12 changes: 6 additions & 6 deletions test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
`;

Expand Down
38 changes: 20 additions & 18 deletions test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading
Loading