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

* 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

test/components/structures/__snapshots__/MatrixChat-test.tsx.snap

@@ -325,7 +325,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
   role="dialog"
 >
   <div
-    class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    class="mx_Dialog_header"
   >
     <h1
       class="mx_Heading_h3 mx_Dialog_title"
@@ -333,13 +333,13 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
     >
       Leave room
     </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"
@@ -381,7 +381,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
   role="dialog"
 >
   <div
-    class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    class="mx_Dialog_header"
   >
     <h1
       class="mx_Heading_h3 mx_Dialog_title"
@@ -389,13 +389,13 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
     >
       Leave space
     </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"