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/_common.pcss

@@ -329,16 +329,21 @@ legend {
     justify-content: center;
 }
 
+.mx_Dialog_border {
+    z-index: var(--dialog-zIndex-standard);
+    position: relative;
+    max-height: calc(100% - var(--cpd-space-12x));
+    display: flex;
+    flex-direction: column;
+}
+
 .mx_Dialog {
     background-color: $background;
     color: $light-fg-color;
-    z-index: var(--dialog-zIndex-standard);
     font-size: $font-15px;
     position: relative;
-    padding: 24px;
+    padding: var(--cpd-space-8x) var(--cpd-space-10x);
-    max-height: 80%;
+    box-sizing: border-box;
-    box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
-    border-radius: 8px;
     overflow-y: auto;
 
     .mx_Dialog_staticWrapper & {
@@ -439,7 +444,6 @@ legend {
     width: 100%;
     height: 100%;
     background-color: $dialog-backdrop-color;
-    opacity: 0.8;
     z-index: var(--dialog-zIndex-standard-background);
 
     &.mx_Dialog_staticBackground {
@@ -483,21 +487,13 @@ legend {
 
 .mx_Dialog_header {
     position: relative;
-    padding: 3px 0;
+    padding: 0;
-    margin-bottom: 10px;
+    padding-inline-end: 20px; /* Reserve room for the close button */
+    margin-bottom: var(--cpd-space-2x);
 
     &.mx_Dialog_headerWithButton > .mx_Dialog_title {
         text-align: center;
     }
-
-    &.mx_Dialog_headerWithCancel {
-        padding-right: 20px; /* leave space for the 'X' cancel button */
-    }
-
-    &.mx_Dialog_headerWithCancelOnly {
-        padding: 0 20px 0 0;
-        margin: 0;
-    }
 }
 
 @define-mixin customisedCancelButton {
@@ -528,8 +524,8 @@ legend {
 .mx_Dialog_cancelButton {
     @mixin customisedCancelButton;
     position: absolute;
-    top: 4px;
+    top: var(--cpd-space-4x);
-    right: 0;
+    right: var(--cpd-space-4x);
 }
 
 .mx_Dialog_content {

res/css/structures/_ContextualMenu.pcss

@@ -30,9 +30,10 @@ limitations under the License.
 }
 
 .mx_ContextualMenu {
-    border-radius: 8px;
+    border-radius: 12px;
-    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
+    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
-    background-color: $menu-bg-color;
+    background-color: var(--cpd-color-bg-canvas-default);
+    border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
     color: $primary-content;
     position: absolute;
     z-index: 5001;

res/css/structures/_QuickSettingsButton.pcss

@@ -62,7 +62,7 @@ limitations under the License.
         font-weight: var(--cpd-font-weight-semibold);
         font-size: $font-15px;
         line-height: $font-24px;
-        color: $primary-content;
+        color: var(--cpd-color-text-secondary);
         margin: 0 0 16px;
     }
 
@@ -76,7 +76,7 @@ limitations under the License.
         font-size: $font-12px;
         line-height: $font-15px;
         text-transform: uppercase;
-        color: $tertiary-content;
+        color: var(--cpd-color-text-secondary);
         margin: 20px 0 12px;
     }
 
@@ -97,7 +97,7 @@ limitations under the License.
             margin-left: 6px;
             font-size: $font-15px;
             line-height: $font-24px;
-            color: $secondary-content;
+            color: var(--cpd-color-text-primary);
         }
     }
 
@@ -106,7 +106,7 @@ limitations under the License.
         margin-left: 22px;
         font-size: $font-15px;
         line-height: $font-24px;
-        color: $secondary-content;
+        color: var(--cpd-color-text-primary);
         position: relative;
         margin-bottom: 16px;
     }

res/css/structures/_TabbedView.pcss

@@ -18,7 +18,7 @@ limitations under the License.
 
 .mx_TabbedView {
     margin: 0;
-    padding: 0 0 0 16px;
+    padding: 0 0 0 var(--cpd-space-8x);
     display: flex;
     flex-direction: column;
     inset: 0;

res/css/structures/_ToastContainer.pcss

@@ -36,16 +36,17 @@ limitations under the License.
     .mx_Toast_toast {
         grid-row: 1 / 3;
         grid-column: 1;
-        background-color: $system;
+        background-color: var(--cpd-color-bg-canvas-default);
         color: $primary-content;
-        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
+        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
-        border-radius: 8px;
+        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
+        border-radius: 12px;
         overflow: hidden;
         display: grid;
         grid-template-columns: 22px 1fr;
         column-gap: 8px;
         row-gap: 4px;
-        padding: 8px;
+        padding: var(--cpd-space-3x);
 
         &.mx_Toast_hasIcon {
             &::before,

res/css/views/context_menus/_IconizedContextMenu.pcss

@@ -36,26 +36,7 @@ limitations under the License.
         /* the notFirst class is for cases where the optionList might be under a header of sorts. */
         &:nth-child(n + 2),
         .mx_IconizedContextMenu_optionList_notFirst {
-            /* This is a bit of a hack when we could just use a simple border-top property, */
+            border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
-            /* however we have a (kinda) good reason for doing it this way: we need opacity. */
-            /* To get the right color, we need an opacity modifier which means we have to work */
-            /* around the problem. PostCSS doesn't support the opacity() function, and if we */
-            /* use something like postcss-functions we quickly run into an issue where the */
-            /* function we would define gets passed a CSS variable for custom themes, which */
-            /* can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379 */
-            //
-            /* Therefore, we just hack in a line and border the thing ourselves */
-            &::before {
-                border-top: 1px solid $primary-content;
-                opacity: 0.1;
-                content: "";
-
-                /* Counteract the padding problems (width: 100% ignores the 40px padding, */
-                /* unless we position it absolutely then it does the right thing). */
-                width: 100%;
-                position: absolute;
-                left: 0;
-            }
         }
 
         /* round the top corners of the top button for the hover effect to be bounded */
@@ -87,7 +68,7 @@ limitations under the License.
 
             &:hover,
             &:focus-visible {
-                background-color: $menu-selected-color;
+                background-color: var(--cpd-color-bg-action-secondary-hovered);
             }
 
             &.mx_AccessibleButton_disabled {
@@ -137,7 +118,7 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background-color: $icon-button-color;
+            background-color: var(--cpd-color-icon-primary);
         }
     }
 
@@ -147,7 +128,7 @@ limitations under the License.
         }
 
         .mx_IconizedContextMenu_icon::before {
-            background-color: $alert;
+            background-color: var(--cpd-color-icon-critical-primary);
         }
     }
 
@@ -172,7 +153,7 @@ limitations under the License.
 
     &.mx_IconizedContextMenu_compact {
         .mx_IconizedContextMenu_optionList > * {
-            padding: 8px 16px 8px 11px;
+            padding: 8px 16px 8px 12px;
         }
     }
 

res/css/views/context_menus/_MessageContextMenu.pcss

@@ -29,7 +29,6 @@ limitations under the License.
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
-            background: $icon-button-color;
         }
     }
 

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 */
+        /* Align with corner radius of dialog */
         position: absolute;
-            top: 30px;
+        top: var(--cpd-space-4x);
-            right: 30px;
+        right: var(--cpd-space-4x);
-        }
     }
 
     .mx_CompoundDialog_form {

res/css/views/dialogs/_LocationViewDialog.pcss

@@ -16,11 +16,6 @@ limitations under the License.
 
 .mx_LocationViewDialog_wrapper .mx_Dialog {
     padding: 0px;
-
-    /* Unset contain and position to allow the close button
-    to appear outside the dialog */
-    contain: unset;
-    position: unset;
 }
 
 .mx_LocationViewDialog {
@@ -37,16 +32,13 @@ limitations under the License.
         .mx_Dialog_title {
             display: none;
         }
+    }
 
     .mx_Dialog_cancelButton {
         z-index: 4010;
         position: absolute;
-            right: 5vw;
+        left: var(--cpd-space-4x);
-            top: 5vh;
+        top: var(--cpd-space-4x);
-            width: 20px;
-            height: 20px;
-            background-color: $dialog-close-external-color;
-        }
     }
 }
 

res/css/views/dialogs/_SettingsDialog.pcss

@@ -20,12 +20,12 @@ limitations under the License.
 .mx_SpaceSettingsDialog,
 .mx_SpacePreferencesDialog {
     width: 90vw;
-    max-width: 1000px;
+    max-width: 980px;
     /* set the height too since tabbed view scrolls itself. */
     height: 80vh;
 
     .mx_TabbedView {
-        top: 65px;
+        top: 90px;
     }
 
     .mx_TabbedView .mx_SettingsTab {

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -14,7 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SpotlightDialog_wrapper .mx_Dialog {
+.mx_SpotlightDialog_wrapper {
+    .mx_Dialog_border {
+        /* Disable the glass border as this dialog wasn't designed with it in mind */
+        display: contents;
+    }
+
+    .mx_Dialog {
+        width: fit-content;
         border-radius: 8px;
         overflow-y: initial;
         position: relative;
@@ -48,6 +55,7 @@ limitations under the License.
                 font-size: inherit;
             }
         }
+    }
 }
 
 .mx_SpotlightDialog {

res/css/views/dialogs/_TermsDialog.pcss

@@ -19,7 +19,7 @@ limitations under the License.
  * terms dialog sizing when it will appear for the integration manager so that
  * it gets the same basic size as the IM's own modal.
  */
-.mx_TermsDialog_forIntegrationManager .mx_Dialog {
+.mx_TermsDialog_forIntegrationManager .mx_Dialog_border {
     width: 60%;
     height: 70%;
     box-sizing: border-box;

res/css/views/messages/_MessageActionBar.pcss

@@ -18,7 +18,7 @@ limitations under the License.
 .mx_MessageActionBar {
     --MessageActionBar-size-button: 28px;
     --MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
-    --MessageActionBar-item-hover-background: $panel-actions;
+    --MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
     --MessageActionBar-item-hover-borderRadius: 6px;
     --MessageActionBar-item-hover-zIndex: 1;
 
@@ -30,7 +30,7 @@ limitations under the License.
     line-height: $font-24px;
     border-radius: 8px;
     background: $background;
-    border: 1px solid $input-border-color;
+    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
     top: -32px;
     right: 8px;
     user-select: none;
@@ -96,7 +96,7 @@ limitations under the License.
         --MessageActionBar-icon-size: 18px;
         width: var(--MessageActionBar-size-button);
         height: var(--MessageActionBar-size-button);
-        color: $secondary-content;
+        color: var(--cpd-color-icon-secondary);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -114,7 +114,7 @@ limitations under the License.
         }
 
         &:hover {
-            color: $primary-content;
+            color: var(--cpd-color-icon-primary);
         }
 
         &.mx_MessageActionBar_downloadButton {

res/css/views/right_panel/_BaseCard.pcss

@@ -215,19 +215,19 @@ limitations under the License.
         padding-top: 10px;
         padding-bottom: 10px;
 
-        border: 1px solid $quinary-content;
+        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
-        box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
+        box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
     }
 
     .mx_ContextualMenu_chevron_top {
         left: auto;
         right: 22px;
-        border-bottom-color: $quinary-content;
+        border-bottom-color: var(--cpd-color-border-interactive-secondary);
 
         &::after {
             content: "";
             border: inherit;
-            border-bottom-color: $menu-bg-color;
+            border-bottom-color: var(--cpd-color-bg-canvas-default);
             position: absolute;
             top: 1px;
             left: -8px;

res/css/views/right_panel/_PinnedMessagesCard.pcss

@@ -42,7 +42,7 @@ limitations under the License.
                     background: var(--MessageActionBar-item-hover-background);
                     border-radius: var(--MessageActionBar-item-hover-borderRadius);
                     z-index: var(--MessageActionBar-item-hover-zIndex);
-                    color: $primary-content;
+                    color: var(--cpd-color-icon-primary);
                 }
             }
 

res/css/views/rooms/_MessageComposer.pcss

@@ -314,74 +314,6 @@ limitations under the License.
     }
 }
 
-.mx_MessageComposer_formatting {
-    cursor: pointer;
-    margin: 0 11px;
-    width: 24px;
-    height: 18px;
-}
-
-.mx_MessageComposer_formatbar_wrapper {
-    width: 100%;
-    background-color: $menu-bg-color;
-    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
-}
-
-.mx_MessageComposer_formatbar {
-    margin: auto;
-    display: flex;
-
-    height: 30px;
-
-    box-sizing: border-box;
-    padding-left: 62px;
-
-    flex-direction: row;
-    align-items: center;
-    font-size: $font-10px;
-    color: $info-plinth-fg-color;
-
-    * {
-        margin-right: 4px;
-    }
-}
-
-.mx_MessageComposer_format_button,
-.mx_MessageComposer_formatbar_cancel,
-.mx_MessageComposer_formatbar_markdown {
-    cursor: pointer;
-}
-
-.mx_MessageComposer_formatbar_cancel {
-    margin-right: 22px;
-}
-
-.mx_MessageComposer_formatbar_markdown {
-    height: 17px;
-    width: 30px;
-    margin-right: 64px;
-}
-
-.mx_MessageComposer_input_markdownIndicator {
-    height: 10px;
-    width: 12px;
-    padding: 4px 4px 4px 0;
-}
-
-.mx_MessageComposer_formatbar_markdown,
-.mx_MessageComposer_input_markdownIndicator {
-    cursor: pointer;
-    mask-image: url("$(res)/img/markdown.svg");
-    mask-size: contain;
-    mask-position: center;
-    mask-repeat: no-repeat;
-    background-color: $icon-button-color;
-
-    &.mx_MessageComposer_markdownDisabled {
-        opacity: 0.2;
-    }
-}
-
 .mx_MatrixChat_useCompactLayout {
     .mx_MessageComposer_input {
         min-height: 50px;

res/css/views/rooms/_MessageComposerFormatBar.pcss

@@ -22,7 +22,7 @@ limitations under the License.
     cursor: pointer;
     border-radius: 8px;
     background-color: $background;
-    border: 1px solid $input-border-color;
+    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
     user-select: none;
     /* equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) */
     /* but as it appears after them in the DOM, will appear on top. */
@@ -48,7 +48,7 @@ limitations under the License.
         border: none;
 
         &:hover {
-            background: $panel-actions;
+            background: var(--cpd-color-bg-subtle-secondary);
             border-radius: 6px;
             z-index: 1;
         }
@@ -63,11 +63,11 @@ limitations under the License.
         width: 100%;
         mask-repeat: no-repeat;
         mask-position: center;
-        background-color: $secondary-content;
+        background-color: var(--cpd-color-icon-secondary);
     }
 
     .mx_MessageComposerFormatBar_button:hover::after {
-        background-color: $primary-content;
+        background-color: var(--cpd-color-icon-primary);
     }
 
     .mx_MessageComposerFormatBar_buttonIconBold::after {

res/css/views/settings/_IntegrationManager.pcss

@@ -15,16 +15,19 @@ limitations under the License.
 */
 
 .mx_IntegrationManager {
-    .mx_Dialog {
+    .mx_Dialog_border {
         box-sizing: border-box;
-        padding: 0;
         width: 60%;
         height: 70%;
-        overflow: hidden;
         max-width: initial;
         max-height: initial;
     }
 
+    .mx_Dialog {
+        padding: 0;
+        overflow: hidden;
+    }
+
     iframe {
         background-color: #fff;
         border: 0;

res/themes/dark/css/_dark.pcss

@@ -141,7 +141,7 @@ $input-placeholder: var(--cpd-color-text-placeholder);
 /* Dialog */
 /* ******************** */
 $dialog-title-fg-color: $primary-content;
-$dialog-backdrop-color: $menu-border-color;
+$dialog-backdrop-color: #00000080;
 $dialog-close-fg-color: $icon-button-color;
 $dialog-close-external-color: $primary-content;
 /* ******************** */

res/themes/legacy-dark/css/_legacy-dark.pcss

@@ -72,8 +72,7 @@ $h3-color: $primary-fg-color;
 $icon-button-color: var(--cpd-color-icon-tertiary);
 
 $dialog-title-fg-color: $base-text-color;
-$dialog-backdrop-color: #000;
+$dialog-backdrop-color: #00000080;
-$dialog-shadow-color: rgba(0, 0, 0, 0.48);
 $dialog-close-fg-color: $icon-button-color;
 $dialog-close-external-color: $text-primary-color;
 

res/themes/legacy-light/css/_legacy-light.pcss

@@ -97,7 +97,6 @@ $icon-button-color: var(--cpd-color-icon-tertiary);
 
 $dialog-title-fg-color: #45474a;
 $dialog-backdrop-color: rgba(46, 48, 51, 0.38);
-$dialog-shadow-color: rgba(0, 0, 0, 0.48);
 $dialog-close-fg-color: $icon-button-color;
 $dialog-close-external-color: $primary-bg-color;
 

res/themes/light/css/_light.pcss

@@ -189,10 +189,9 @@ $input-placeholder: var(--cpd-color-text-placeholder);
 /* Dialog */
 /* ******************** */
 $dialog-title-fg-color: var(--cpd-color-text-primary);
-$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
+$dialog-backdrop-color: #030c1b4d;
 $dialog-close-fg-color: $icon-button-color;
 $dialog-close-external-color: $background;
-$dialog-shadow-color: rgba(0, 0, 0, 0.48);
 /* ******************** */
 
 /* ImageBody */

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}>
+                        <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}>
+                        <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>
+                    </div>
                     <AccessibleButton
                         onClick={this.onCancel}
                         className="mx_CompoundDialog_cancelButton"
                         aria-label={_t("dialog_close_label")}
                     />
-                    </div>
                     <form onSubmit={this.onSubmit} className="mx_CompoundDialog_form">
                         <div className="mx_CompoundDialog_content">{this.renderContent()}</div>
                         <div className="mx_CompoundDialog_footer">

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>
   <div
     aria-label="Close dialog"
     class="mx_AccessibleButton mx_Dialog_cancelButton"
     role="button"
     tabindex="0"
   />
-  </div>
   <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>
   <div
     aria-label="Close dialog"
     class="mx_AccessibleButton mx_Dialog_cancelButton"
     role="button"
     tabindex="0"
   />
-  </div>
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"

test/components/views/dialogs/__snapshots__/AppDownloadDialog-test.tsx.snap

@@ -14,7 +14,7 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -22,13 +22,13 @@ exports[`AppDownloadDialog should allow disabling desktop build 1`] = `
       >
         Download Element
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_AppDownloadDialog_mobile"
     >
@@ -162,7 +162,7 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -170,13 +170,13 @@ exports[`AppDownloadDialog should allow disabling fdroid build 1`] = `
       >
         Download Element
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_AppDownloadDialog_desktop"
     >
@@ -318,7 +318,7 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -326,13 +326,13 @@ exports[`AppDownloadDialog should allow disabling mobile builds 1`] = `
       >
         Download Element
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_AppDownloadDialog_desktop"
     >
@@ -387,7 +387,7 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -395,13 +395,13 @@ exports[`AppDownloadDialog should render with desktop, ios, android, fdroid butt
       >
         Download Element
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_AppDownloadDialog_desktop"
     >

test/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -23,13 +23,13 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
       >
         Changelog
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"

test/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap

@@ -15,7 +15,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -23,13 +23,13 @@ exports[`ConfirmUserActionDialog renders 1`] = `
       >
         Ban this 
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"

test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap

@@ -14,7 +14,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -22,13 +22,13 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
       >
         Developer Tools
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_DevTools_label_left"
     >

test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap

@@ -9,7 +9,7 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
   role="dialog"
 >
   <div
-    class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    class="mx_Dialog_header"
   >
     <h1
       class="mx_Heading_h3 mx_Dialog_title"
@@ -17,13 +17,13 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
     >
       Export Chat
     </h1>
+  </div>
   <div
     aria-label="Close dialog"
     class="mx_AccessibleButton mx_Dialog_cancelButton"
     role="button"
     tabindex="0"
   />
-  </div>
   <p>
     Select from the options below to export chats from your timeline
   </p>

test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap

@@ -15,7 +15,7 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -23,13 +23,13 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
       >
         You'll lose access to your encrypted messages
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div>
       <div
         class="mx_Dialog_content"
@@ -102,7 +102,7 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -110,13 +110,13 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
       >
         You'll lose access to your encrypted messages
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div>
       <div
         class="mx_Dialog_content"
@@ -189,7 +189,7 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -197,13 +197,13 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
       >
         Sign out
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"

test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap

@@ -14,7 +14,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -22,13 +22,13 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
       >
         Select spaces
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <p>
       <span>
         Decide which spaces can access this room. If a space is selected, its members can find and join 
@@ -164,7 +164,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -172,13 +172,13 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
       >
         Select spaces
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <p>
       <span>
         Decide which spaces can access this room. If a space is selected, its members can find and join 

test/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap

@@ -15,7 +15,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -23,13 +23,13 @@ exports[`ManualDeviceKeyVerificationDialog should display the device 1`] = `
       >
         Verify session
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"
@@ -130,7 +130,7 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -138,13 +138,13 @@ exports[`ManualDeviceKeyVerificationDialog should display the device of another
       >
         Verify session
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_Dialog_content"
       id="mx_Dialog_content"

test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap

@@ -14,7 +14,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -22,13 +22,13 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
       >
         Message edits
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
       tabindex="-1"
@@ -130,7 +130,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -138,13 +138,13 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
       >
         Message edits
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
       tabindex="-1"

test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -23,13 +23,13 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
       >
         Sign into your homeserver
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <form
       class="mx_Dialog_content"
       id="mx_ServerPickerDialog"

test/components/views/dialogs/security/__snapshots__/CreateKeyBackupDialog-test.tsx.snap

@@ -121,7 +121,7 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -129,13 +129,13 @@ exports[`CreateKeyBackupDialog should display the success dialog when the key ba
       >
         Success!
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div>
       <div>
         <p>

test/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap

@@ -14,7 +14,7 @@ exports[`ExportE2eKeysDialog renders 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -22,13 +22,13 @@ exports[`ExportE2eKeysDialog renders 1`] = `
       >
         Export room keys
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <form>
       <div
         class="mx_Dialog_content"

test/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap

@@ -14,7 +14,7 @@ exports[`ImportE2eKeysDialog renders 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -22,13 +22,13 @@ exports[`ImportE2eKeysDialog renders 1`] = `
       >
         Import room keys
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <form>
       <div
         class="mx_Dialog_content"

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

test/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap

@@ -119,7 +119,7 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
   role="dialog"
 >
   <div
-    class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    class="mx_Dialog_header"
   >
     <h1
       class="mx_Heading_h3 mx_Dialog_title"
@@ -127,13 +127,13 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
     >
       Failed to update the join rules
     </h1>
+  </div>
   <div
     aria-label="Close dialog"
     class="mx_AccessibleButton mx_Dialog_cancelButton"
     role="button"
     tabindex="0"
   />
-  </div>
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"
@@ -161,7 +161,7 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
   role="dialog"
 >
   <div
-    class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    class="mx_Dialog_header"
   >
     <h1
       class="mx_Heading_h3 mx_Dialog_title"
@@ -169,13 +169,13 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
     >
       Are you sure you want to make this encrypted room public?
     </h1>
+  </div>
   <div
     aria-label="Close dialog"
     class="mx_AccessibleButton mx_Dialog_cancelButton"
     role="button"
     tabindex="0"
   />
-  </div>
   <div
     class="mx_Dialog_content"
     id="mx_Dialog_content"

test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
     role="dialog"
   >
     <div
-      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+      class="mx_Dialog_header"
     >
       <h1
         class="mx_Heading_h3 mx_Dialog_title"
@@ -56,13 +56,13 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
           </div>
         </div>
       </h1>
+    </div>
     <div
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
       tabindex="0"
     />
-    </div>
     <div
       class="mx_AddExistingToSpace"
     >