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/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap

@@ -20,13 +20,13 @@ exports[`PollCreateDialog renders a blank poll 1`] = `
       <h1>
         Create poll
       </h1>
-      <div
-        aria-label="Close dialog"
-        class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
-        role="button"
-        tabindex="0"
-      />
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
     <form
       class="mx_CompoundDialog_form"
     >
@@ -199,13 +199,13 @@ exports[`PollCreateDialog renders a question and some options 1`] = `
       <h1>
         Create poll
       </h1>
-      <div
-        aria-label="Close dialog"
-        class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
-        role="button"
-        tabindex="0"
-      />
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
     <form
       class="mx_CompoundDialog_form"
     >
@@ -402,13 +402,13 @@ exports[`PollCreateDialog renders info from a previous event 1`] = `
       <h1>
         Edit poll
       </h1>
-      <div
-        aria-label="Close dialog"
-        class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
-        role="button"
-        tabindex="0"
-      />
     </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
+      role="button"
+      tabindex="0"
+    />
     <form
       class="mx_CompoundDialog_form"
     >