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

src/Modal.tsx

@@ -20,7 +20,7 @@ import ReactDOM from "react-dom";
 import classNames from "classnames";
 import { defer, sleep } from "matrix-js-sdk/src/utils";
 import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
-import { TooltipProvider } from "@vector-im/compound-web";
+import { Glass, TooltipProvider } from "@vector-im/compound-web";
 
 import dis from "./dispatcher/dispatcher";
 import AsyncWrapper from "./AsyncWrapper";
@@ -376,7 +376,9 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             const staticDialog = (
                 <TooltipProvider>
                     <div className={classes}>
-                        <div className="mx_Dialog">{this.staticModal.elem}</div>
+                        <Glass className="mx_Dialog_border">
+                            <div className="mx_Dialog">{this.staticModal.elem}</div>
+                        </Glass>
                         <div
                             data-testid="dialog-background"
                             className="mx_Dialog_background mx_Dialog_staticBackground"
@@ -401,7 +403,9 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
             const dialog = (
                 <TooltipProvider>
                     <div className={classes}>
-                        <div className="mx_Dialog">{modal.elem}</div>
+                        <Glass className="mx_Dialog_border">
+                            <div className="mx_Dialog">{modal.elem}</div>
+                        </Glass>
                         <div
                             data-testid="dialog-background"
                             className="mx_Dialog_background"

src/components/views/dialogs/BaseDialog.tsx

@@ -155,9 +155,6 @@ export default class BaseDialog extends React.Component<IProps> {
             lockProps["aria-labelledby"] = "mx_BaseDialog_title";
         }
 
-        const isHeaderWithCancelOnly =
-            !!cancelButton && !this.props.title && !this.props.headerButton && !this.props.headerImage;
-
         return (
             <MatrixClientContext.Provider value={this.matrixClient}>
                 {this.props.screenName && <PosthogScreenTracker screenName={this.props.screenName} />}
@@ -172,8 +169,6 @@ export default class BaseDialog extends React.Component<IProps> {
                     <div
                         className={classNames("mx_Dialog_header", {
                             mx_Dialog_headerWithButton: !!this.props.headerButton,
-                            mx_Dialog_headerWithCancel: !!cancelButton,
-                            mx_Dialog_headerWithCancelOnly: isHeaderWithCancelOnly,
                         })}
                     >
                         {!!(this.props.title || headerImage) && (
@@ -188,8 +183,8 @@ export default class BaseDialog extends React.Component<IProps> {
                             </Heading>
                         )}
                         {this.props.headerButton}
-                        {cancelButton}
                     </div>
+                    {cancelButton}
                     {this.props.children}
                 </FocusLock>
             </MatrixClientContext.Provider>

src/components/views/dialogs/ScrollableBaseModal.tsx

@@ -94,12 +94,12 @@ export default abstract class ScrollableBaseModal<
                 >
                     <div className="mx_CompoundDialog_header">
                         <h1>{this.state.title}</h1>
-                        <AccessibleButton
-                            onClick={this.onCancel}
-                            className="mx_CompoundDialog_cancelButton"
-                            aria-label={_t("dialog_close_label")}
-                        />
                     </div>
+                    <AccessibleButton
+                        onClick={this.onCancel}
+                        className="mx_CompoundDialog_cancelButton"
+                        aria-label={_t("dialog_close_label")}
+                    />
                     <form onSubmit={this.onSubmit} className="mx_CompoundDialog_form">
                         <div className="mx_CompoundDialog_content">{this.renderContent()}</div>
                         <div className="mx_CompoundDialog_footer">