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
matrix-org · Jun 20, 2024 · 6c99b91 · 6c99b91
1 parent 7e7b55e
commit 6c99b91
Show file tree

Hide file tree

Showing 25 changed files with 175 additions and 158 deletions.
diff --git a/...napshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/...napshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
diff --git a/...t/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/...t/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png
diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
diff --git a/...pshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png b/...pshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png
diff --git a/...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
diff --git a/res/css/views/dialogs/_UserSettingsDialog.pcss b/res/css/views/dialogs/_UserSettingsDialog.pcss
@@ -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 */
 /* ========================================================== */
 

diff --git a/src/components/views/dialogs/BaseDialog.tsx b/src/components/views/dialogs/BaseDialog.tsx
@@ -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>
         );

diff --git a/src/components/views/dialogs/UserSettingsDialog.tsx b/src/components/views/dialogs/UserSettingsDialog.tsx
@@ -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

diff --git a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap
@@ -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>
 `;
diff --git a/test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap
@@ -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"

diff --git a/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
@@ -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"

diff --git a/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
@@ -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"

diff --git a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -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"

diff --git a/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -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>
 `;
 

diff --git a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
@@ -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"