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

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>
         );

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