diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png index 7e22dea5df..4993fec9b6 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png index 655baf15a2..0b232ddcfd 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png index f230fe06da..921117c945 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png differ diff --git a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png index 8d3d371dcc..9f46fce516 100644 Binary files a/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png and b/playwright/snapshots/editing/editing.spec.ts/message-edit-history-dialog-linux.png differ diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png index fb63492564..7e8992dca1 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png differ diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png index 07b7a02ed3..dfa6d4f0aa 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png differ diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png index 427b8228f5..9cc13698cf 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png differ diff --git a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png index 4c1bec3fa9..44d8129404 100644 Binary files a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png and b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-without-user-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png index 52193fdcc5..3d4ea984a4 100644 Binary files a/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png and b/playwright/snapshots/register/register.spec.ts/email-prompt-linux.png differ diff --git a/playwright/snapshots/register/register.spec.ts/server-picker-linux.png b/playwright/snapshots/register/register.spec.ts/server-picker-linux.png index 3bfc6affca..94b5505b7a 100644 Binary files a/playwright/snapshots/register/register.spec.ts/server-picker-linux.png and b/playwright/snapshots/register/register.spec.ts/server-picker-linux.png differ diff --git a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png index c827248e12..e0fc9cc5bd 100644 Binary files a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png and b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png differ diff --git a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png index bf7be29b02..a962c3cbad 100644 Binary files a/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png and b/playwright/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png index 13d3c5b7d3..a1f501ebf8 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ diff --git a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png index 7162ce0e3c..947da45160 100644 Binary files a/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ diff --git a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png index cc8eb610e8..253b230419 100644 Binary files a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png index 5950cb28b1..50978ece8a 100644 Binary files a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png and b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png differ diff --git a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png index e864d3962c..73b2e6e038 100644 Binary files a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png index a94f93b33c..c59d60178d 100644 Binary files a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png and b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png differ diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png index d3b002a5fa..6d2e83b23d 100644 Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-create-menu-linux.png differ diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png index e112e5edfa..a2edd3d88f 100644 Binary files a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png and b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png differ diff --git a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png index 6e03d93862..dcac67dc1f 100644 Binary files a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png and b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png differ diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png index ee983ee3a5..889906100a 100644 Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png differ diff --git a/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png b/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png index 297f35e215..589cb34cb4 100644 Binary files a/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png and b/playwright/snapshots/user-onboarding/user-onboarding-new.spec.ts/User-Onboarding-new-user-app-download-dialog-1-linux.png differ diff --git a/res/css/_common.pcss b/res/css/_common.pcss index c6b5e14c5b..568b9eea12 100644 --- a/res/css/_common.pcss +++ b/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; - max-height: 80%; - box-shadow: 2px 15px 30px 0 $dialog-shadow-color; - border-radius: 8px; + padding: var(--cpd-space-8x) var(--cpd-space-10x); + box-sizing: border-box; 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; - margin-bottom: 10px; + padding: 0; + 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; - right: 0; + top: var(--cpd-space-4x); + right: var(--cpd-space-4x); } .mx_Dialog_content { diff --git a/res/css/structures/_ContextualMenu.pcss b/res/css/structures/_ContextualMenu.pcss index 6aff7738fc..eeb066fd4e 100644 --- a/res/css/structures/_ContextualMenu.pcss +++ b/res/css/structures/_ContextualMenu.pcss @@ -30,9 +30,10 @@ limitations under the License. } .mx_ContextualMenu { - border-radius: 8px; - box-shadow: 4px 4px 12px 0 $menu-box-shadow-color; - background-color: $menu-bg-color; + border-radius: 12px; + box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1); + 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; diff --git a/res/css/structures/_QuickSettingsButton.pcss b/res/css/structures/_QuickSettingsButton.pcss index f5dc45356f..569effd3ae 100644 --- a/res/css/structures/_QuickSettingsButton.pcss +++ b/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; } diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss index 191c554405..756f6ab864 100644 --- a/res/css/structures/_TabbedView.pcss +++ b/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; diff --git a/res/css/structures/_ToastContainer.pcss b/res/css/structures/_ToastContainer.pcss index a485afe129..6b18836776 100644 --- a/res/css/structures/_ToastContainer.pcss +++ b/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); - border-radius: 8px; + box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1); + 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, diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss index f36c807b60..d15e63e9f9 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.pcss +++ b/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, */ - /* 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; - } + border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400); } /* 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; } } diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss index abb48b6b7c..be113c770f 100644 --- a/res/css/views/context_menus/_MessageContextMenu.pcss +++ b/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; } } diff --git a/res/css/views/dialogs/_CompoundDialog.pcss b/res/css/views/dialogs/_CompoundDialog.pcss index 3675678ed9..addf210863 100644 --- a/res/css/views/dialogs/_CompoundDialog.pcss +++ b/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 { diff --git a/res/css/views/dialogs/_LocationViewDialog.pcss b/res/css/views/dialogs/_LocationViewDialog.pcss index 600c308265..8e04b5f428 100644 --- a/res/css/views/dialogs/_LocationViewDialog.pcss +++ b/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); } } diff --git a/res/css/views/dialogs/_SettingsDialog.pcss b/res/css/views/dialogs/_SettingsDialog.pcss index 71dedd3fe3..9b0205a3b4 100644 --- a/res/css/views/dialogs/_SettingsDialog.pcss +++ b/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 { diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss index 78346e9b7e..32c14bca9d 100644 --- a/res/css/views/dialogs/_SpotlightDialog.pcss +++ b/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 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 elements */ + font-family: inherit; + font-weight: inherit; + font-size: inherit; + } } } } diff --git a/res/css/views/dialogs/_TermsDialog.pcss b/res/css/views/dialogs/_TermsDialog.pcss index 99d7eb720b..9b48cb8945 100644 --- a/res/css/views/dialogs/_TermsDialog.pcss +++ b/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; diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss index 040442b8af..64c51972e1 100644 --- a/res/css/views/messages/_MessageActionBar.pcss +++ b/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 { diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss index 41552ac578..6d17930fce 100644 --- a/res/css/views/right_panel/_BaseCard.pcss +++ b/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; - box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05); + border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary); + 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; diff --git a/res/css/views/right_panel/_PinnedMessagesCard.pcss b/res/css/views/right_panel/_PinnedMessagesCard.pcss index 7b6396a8ec..5cdafcf7c5 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.pcss +++ b/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); } } diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index cb42db35ec..0fd72575b0 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/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; diff --git a/res/css/views/rooms/_MessageComposerFormatBar.pcss b/res/css/views/rooms/_MessageComposerFormatBar.pcss index 182e03fed0..68520cc741 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.pcss +++ b/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 { diff --git a/res/css/views/settings/_IntegrationManager.pcss b/res/css/views/settings/_IntegrationManager.pcss index 505ccf86c2..0576a07246 100644 --- a/res/css/views/settings/_IntegrationManager.pcss +++ b/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; diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index f7c9a61c33..953b7c4730 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/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; /* ******************** */ diff --git a/res/themes/legacy-dark/css/_legacy-dark.pcss b/res/themes/legacy-dark/css/_legacy-dark.pcss index c1bf80310a..f01716a91f 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.pcss +++ b/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-shadow-color: rgba(0, 0, 0, 0.48); +$dialog-backdrop-color: #00000080; $dialog-close-fg-color: $icon-button-color; $dialog-close-external-color: $text-primary-color; diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index f277e07d8c..8563b3c469 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/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; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index ee48dc8047..adbb7e97ed 100644 --- a/res/themes/light/css/_light.pcss +++ b/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 */ diff --git a/src/Modal.tsx b/src/Modal.tsx index f2835799fd..aa4ba691dc 100644 --- a/src/Modal.tsx +++ b/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
-
{this.staticModal.elem}
+ +
{this.staticModal.elem}
+
-
{modal.elem}
+ +
{modal.elem}
+
{ lockProps["aria-labelledby"] = "mx_BaseDialog_title"; } - const isHeaderWithCancelOnly = - !!cancelButton && !this.props.title && !this.props.headerButton && !this.props.headerImage; - return ( {this.props.screenName && } @@ -172,8 +169,6 @@ export default class BaseDialog extends React.Component {
{!!(this.props.title || headerImage) && ( @@ -188,8 +183,8 @@ export default class BaseDialog extends React.Component { )} {this.props.headerButton} - {cancelButton}
+ {cancelButton} {this.props.children} diff --git a/src/components/views/dialogs/ScrollableBaseModal.tsx b/src/components/views/dialogs/ScrollableBaseModal.tsx index 8fa9fa3f64..a12632a05f 100644 --- a/src/components/views/dialogs/ScrollableBaseModal.tsx +++ b/src/components/views/dialogs/ScrollableBaseModal.tsx @@ -94,12 +94,12 @@ export default abstract class ScrollableBaseModal< >

{this.state.title}

-
+
{this.renderContent()}
diff --git a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap index 01a5c7818b..bf03f84a6e 100644 --- a/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap +++ b/test/components/structures/__snapshots__/MatrixChat-test.tsx.snap @@ -325,7 +325,7 @@ exports[` with an existing session onAction() room actions leave_r role="dialog" >

with an existing session onAction() room actions leave_r > Leave room

-
+
with an existing session onAction() room actions leave_r role="dialog" >

with an existing session onAction() room actions leave_r > Leave space

-
+