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

res/css/views/dialogs/_CompoundDialog.pcss

@@ -21,7 +21,7 @@ limitations under the License.
 /* -------------------------------------------------------------------------------- */
 
 /* Override legacy/default styles for dialogs */
-.mx_Dialog_wrapper.mx_CompoundDialog > .mx_Dialog {
+.mx_Dialog_wrapper.mx_CompoundDialog .mx_Dialog {
     padding: 0; /* we'll manage it ourselves */
     color: $primary-content;
 }
@@ -41,14 +41,14 @@ limitations under the License.
             font-size: $font-24px;
             margin: 0; /* managed by header class */
         }
+    }
 
-        .mx_CompoundDialog_cancelButton {
-            @mixin customisedCancelButton;
-            /* Align with middle of title, 30px from right edge */
-            position: absolute;
-            top: 30px;
-            right: 30px;
-        }
+    .mx_CompoundDialog_cancelButton {
+        @mixin customisedCancelButton;
+        /* Align with corner radius of dialog */
+        position: absolute;
+        top: var(--cpd-space-4x);
+        right: var(--cpd-space-4x);
     }
 
     .mx_CompoundDialog_form {