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 {

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;
-            top: 5vh;
-            width: 20px;
-            height: 20px;
-            background-color: $dialog-close-external-color;
-        }
+    .mx_Dialog_cancelButton {
+        z-index: 4010;
+        position: absolute;
+        left: var(--cpd-space-4x);
+        top: var(--cpd-space-4x);
     }
 }
 

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,38 +14,46 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SpotlightDialog_wrapper .mx_Dialog {
-    border-radius: 8px;
-    overflow-y: initial;
-    position: relative;
-    height: 60%;
-    padding: 0;
-    contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
+.mx_SpotlightDialog_wrapper {
+    .mx_Dialog_border {
+        /* Disable the glass border as this dialog wasn't designed with it in mind */
+        display: contents;
+    }
 
-    #mx_SpotlightDialog_keyboardPrompt {
-        position: absolute;
-        padding: $spacing-8;
+    .mx_Dialog {
+        width: fit-content;
         border-radius: 8px;
-        background-color: $background;
-        top: -60px; /* relative to the top of the modal */
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: $font-12px;
-        line-height: $font-15px;
-        color: $secondary-content;
+        overflow-y: initial;
+        position: relative;
+        height: 60%;
+        padding: 0;
+        contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
 
-        kbd {
-            display: inline-block;
-            padding: 2px $spacing-4;
-            margin: 0 $spacing-4;
-            border-radius: 6px;
-            background-color: $quinary-content;
-            vertical-align: middle;
-            color: $tertiary-content;
-            /* To avoid any styling inherent with <kbd> elements */
-            font-family: inherit;
-            font-weight: inherit;
-            font-size: inherit;
+        #mx_SpotlightDialog_keyboardPrompt {
+            position: absolute;
+            padding: $spacing-8;
+            border-radius: 8px;
+            background-color: $background;
+            top: -60px; /* relative to the top of the modal */
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
+
+            kbd {
+                display: inline-block;
+                padding: 2px $spacing-4;
+                margin: 0 $spacing-4;
+                border-radius: 6px;
+                background-color: $quinary-content;
+                vertical-align: middle;
+                color: $tertiary-content;
+                /* To avoid any styling inherent with <kbd> elements */
+                font-family: inherit;
+                font-weight: inherit;
+                font-size: inherit;
+            }
         }
     }
 }

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;