mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/

mkdir apps/web/scripts mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts And a couple of gitignore tweaks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-24 15:43:58 +00:00
parent e7509c92a1
commit 91a3cb03c1
3408 changed files with 28 additions and 32 deletions
@@ -0,0 +1,222 @@
+/*
+Copyright 2024,2025 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AddExistingToSpaceDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mx_AddExistingToSpace {
+    .mx_SearchBox {
+        /* To match the space around the title */
+        margin: 0 0 15px 0;
+        flex-grow: 0;
+    }
+
+    .mx_AddExistingToSpace_content {
+        flex-grow: 1;
+    }
+
+    .mx_AddExistingToSpace_noResults {
+        display: block;
+        margin-top: 24px;
+    }
+
+    .mx_AddExistingToSpace_section {
+        margin-right: 12px;
+
+        ul {
+            list-style: none;
+            padding-left: 0;
+        }
+
+        // provides space for scrollbar so that checkbox and scrollbar do not collide
+
+        &:not(:first-child) {
+            margin-top: 24px;
+        }
+
+        > h3 {
+            margin: 0;
+            color: $secondary-content;
+            font-size: $font-12px;
+            font-weight: var(--cpd-font-weight-semibold);
+            line-height: $font-15px;
+        }
+
+        .mx_AccessibleButton_kind_link {
+            font-size: $font-12px;
+            line-height: $font-15px;
+            margin-top: 8px;
+        }
+    }
+
+    .mx_AddExistingToSpace_footer {
+        display: flex;
+        margin-top: 20px;
+
+        > span {
+            flex-grow: 1;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
+
+            .mx_ProgressBar {
+                height: 8px;
+                width: 100%;
+
+                @mixin ProgressBarBorderRadius 8px;
+            }
+
+            .mx_AddExistingToSpaceDialog_progressText {
+                margin-top: 8px;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $primary-content;
+            }
+
+            > * {
+                vertical-align: middle;
+            }
+        }
+
+        .mx_AddExistingToSpace_error {
+            padding-left: 12px;
+
+            > img {
+                align-self: center;
+            }
+
+            .mx_AddExistingToSpace_errorHeading {
+                font-weight: var(--cpd-font-weight-semibold);
+                font-size: $font-15px;
+                line-height: $font-18px;
+                color: $alert;
+            }
+
+            .mx_AddExistingToSpace_errorCaption {
+                margin-top: 4px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $primary-content;
+            }
+        }
+
+        .mx_AccessibleButton {
+            display: inline-block;
+            align-self: center;
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            padding: 8px 36px;
+        }
+
+        .mx_AddExistingToSpaceDialog_retryButton svg {
+            color: $primary-content;
+            width: 18px;
+            height: 18px;
+            margin-right: var(--cpd-space-2x);
+        }
+    }
+}
+
+.mx_AddExistingToSpaceDialog {
+    width: 480px;
+    color: $primary-content;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+    height: 80vh;
+
+    .mx_AddExistingToSpace {
+        display: contents;
+    }
+}
+
+.mx_SubspaceSelector {
+    display: flex;
+
+    .mx_BaseAvatar {
+        margin: auto 16px auto 5px;
+    }
+
+    > div {
+        > h1 {
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-18px;
+            line-height: $font-22px;
+            margin: 0;
+        }
+    }
+
+    .mx_Dropdown_input {
+        border: none;
+
+        > .mx_Dropdown_option {
+            padding-left: 0;
+            flex: unset;
+            height: unset;
+            color: $secondary-content;
+            font-size: $font-15px;
+            line-height: $font-24px;
+
+            .mx_BaseAvatar {
+                display: none;
+            }
+        }
+
+        .mx_SubspaceSelector_dropdownOptionActive {
+            color: $accent;
+            padding-right: 24px;
+            position: relative;
+
+            svg {
+                width: 20px;
+                height: 20px;
+                right: 0;
+                position: absolute;
+                color: $accent;
+            }
+        }
+    }
+
+    .mx_SubspaceSelector_onlySpace {
+        color: $secondary-content;
+        font-size: $font-15px;
+        line-height: $font-24px;
+    }
+}
+
+.mx_AddExistingToSpace_entry {
+    display: flex;
+    margin-top: 12px;
+
+    form {
+        /* Align checkboxes. */
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+
+    /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */
+    .mx_DecoratedRoomAvatar {
+        margin-right: 12px;
+    }
+
+    .mx_AddExistingToSpace_entry_name {
+        font-size: $font-15px;
+        line-height: 30px;
+        flex-grow: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-right: 12px;
+    }
+}
@@ -0,0 +1,54 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AnalyticsLearnMoreDialog {
+    max-width: 500px;
+    .mx_AnalyticsLearnMore_image_holder {
+        background-image: url("/res/img/element-shiny.svg");
+        background-repeat: no-repeat;
+        background-position: center top;
+        height: 112px;
+        padding: 20px 0px;
+    }
+
+    .mx_Dialog_content {
+        margin-bottom: 0px;
+    }
+
+    .mx_AnalyticsLearnMore_copy {
+        border-bottom: 1px solid $menu-border-color;
+        padding-bottom: 20px;
+        margin-bottom: 20px;
+    }
+
+    a {
+        color: $accent;
+        text-decoration: none;
+    }
+
+    .mx_AnalyticsLearnMore_bullets {
+        padding-left: 0px;
+    }
+
+    .mx_AnalyticsLearnMore_bullets li {
+        list-style-type: none;
+        padding: 2px 0 0 32px;
+        margin-bottom: 20px;
+        vertical-align: middle;
+        position: relative;
+
+        svg {
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            left: 0;
+            top: 0;
+            color: #0dbd8b;
+        }
+    }
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_BugReportDialog {
+    .mx_BugReportDialog_download {
+        .mx_AccessibleButton_kind_link {
+            margin-right: 18px; /* Space between "Downloading logs..." */
+        }
+    }
+}
@@ -0,0 +1,16 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2016 Aviral Dasgupta
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ChangelogDialog_content {
+    max-height: 300px;
+    overflow: auto;
+}
+
+.mx_ChangelogDialog_li {
+    padding: 0.2em;
+}
@@ -0,0 +1,83 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/* -------------------------------------------------------------------------------- */
+/* DEV NOTE: This stylesheet covers dialogs listed by the compound, including */
+/* over multiple React components. The actual inner contents of the dialog should */
+/* be in their respective stylesheets. */
+/* -------------------------------------------------------------------------------- */
+
+/* Override legacy/default styles for dialogs */
+.mx_Dialog_wrapper.mx_CompoundDialog .mx_Dialog {
+    padding: 0; /* we'll manage it ourselves */
+    color: $primary-content;
+}
+
+.mx_CompoundDialog {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mx_CompoundDialog_header {
+        padding: 32px 32px 16px 32px;
+
+        h1 {
+            display: inline-block;
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-24px;
+            margin: 0; /* managed by header class */
+        }
+    }
+
+    .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 {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        flex: 1;
+    }
+
+    .mx_CompoundDialog_content {
+        overflow: auto;
+        padding: 8px 32px;
+        flex: 1;
+    }
+
+    .mx_CompoundDialog_footer {
+        padding: 20px 32px;
+        text-align: right;
+
+        .mx_AccessibleButton {
+            margin-left: 24px;
+        }
+    }
+}
+
+.mx_ScrollableBaseDialog {
+    display: flex;
+    flex-direction: column;
+
+    width: 544px; /* fixed */
+    height: 516px; /* fixed */
+    max-width: 100%;
+    min-height: 0;
+    max-height: 80%;
+
+    .mx_CompoundDialog_footer {
+        box-shadow: 0px -4px 4px rgb(0, 0, 0, 0.05); /* hardcoded colour for both themes */
+        z-index: 1; /* needed to make footer & shadow appear above dialog content */
+    }
+}
@@ -0,0 +1,16 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ConfirmKeyStorageOffDialog {
+    .mx_Dialog_border {
+        width: 600px;
+    }
+
+    .mx_EncryptionCard {
+        text-align: center;
+    }
+}
@@ -0,0 +1,51 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ConfirmSpaceUserActionDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+        padding: 24px 32px;
+    }
+}
+
+.mx_ConfirmSpaceUserActionDialog {
+    width: 440px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    height: 520px;
+
+    .mx_Dialog_content {
+        margin: 12px 0;
+        flex-grow: 1;
+        overflow-y: auto;
+    }
+
+    .mx_ConfirmUserActionDialog_reasonField {
+        margin-bottom: 12px;
+    }
+
+    .mx_ConfirmSpaceUserActionDialog_warning {
+        border-radius: 8px;
+        padding: 12px 8px;
+        background-color: $header-panel-bg-color;
+
+        font-size: $font-12px;
+        line-height: $font-15px;
+        color: $secondary-content;
+
+        svg {
+            height: 16px;
+            width: 16px;
+            vertical-align: -4px;
+            margin-right: var(--cpd-space-1-5x);
+            color: $secondary-content;
+        }
+    }
+}
@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 Vector Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ConfirmUserActionDialog .mx_Dialog_content .mx_ConfirmUserActionDialog_user {
+    min-height: 48px;
+    margin-bottom: 24px;
+}
+
+.mx_ConfirmUserActionDialog_avatar {
+    float: left;
+    margin-right: 20px;
+}
+
+.mx_ConfirmUserActionDialog_name {
+    padding-top: 2px;
+    font-size: $font-18px;
+}
+
+.mx_ConfirmUserActionDialog_userId {
+    font-size: $font-13px;
+}
+
+.mx_ConfirmUserActionDialog_reasonField {
+    font: var(--cpd-font-body-md-regular);
+    color: $primary-content;
+    background-color: $background;
+}
@@ -0,0 +1,115 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CreateRoomDialog_details {
+    margin-top: 15px;
+
+    .mx_CreateRoomDialog_details_summary {
+        list-style: none;
+        font-weight: var(--cpd-font-weight-semibold);
+        cursor: pointer;
+        color: var(--cpd-color-text-primary);
+        text-decoration: underline;
+        width: fit-content;
+
+        /* list-style doesn't do it for webkit */
+        &::-webkit-details-marker {
+            display: none;
+        }
+
+        &:not(:focus-visible) {
+            outline: none;
+        }
+    }
+
+    > div {
+        display: flex;
+        align-items: flex-start;
+        margin: 5px 0;
+
+        input[type="checkbox"] {
+            margin-right: 10px;
+        }
+    }
+}
+
+.mx_CreateRoomDialog_label {
+    text-align: left;
+    padding-bottom: 12px;
+}
+
+.mx_CreateRoomDialog_input_container {
+    padding-right: 20px;
+}
+
+.mx_CreateRoomDialog_input {
+    font-size: $font-15px;
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $primary-content;
+    background-color: $background;
+    width: 100%;
+}
+
+.mx_CreateRoomDialog_aliasContainer {
+    /* needed to make the alias field only grow as wide as needed as opposed to full width */
+    display: flex;
+}
+
+.mx_CreateRoomDialog {
+    &.mx_Dialog_fixedWidth {
+        width: 450px;
+    }
+
+    .mx_Dialog_content {
+        margin-bottom: 40px;
+    }
+
+    p,
+    .mx_Field_input label {
+        color: $muted-fg-color;
+    }
+
+    .mx_SettingsFlag {
+        display: flex;
+    }
+
+    .mx_SettingsFlag_label {
+        flex: 1 1 0;
+        min-width: 0;
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+
+    .mx_ToggleSwitch {
+        flex: 0 0 auto;
+        margin-left: 30px;
+    }
+
+    .mx_Dialog_content > .mx_SettingsFlag {
+        margin-top: 24px;
+    }
+
+    .mx_Field {
+        margin: 0;
+    }
+
+    form {
+        gap: var(--cpd-space-4x);
+    }
+
+    p {
+        margin: 0 85px 0 0;
+        font-size: $font-12px;
+    }
+}
+
+.mx_CreateRoomDialog_labelledCheckbox {
+    color: $muted-fg-color;
+    margin-top: var(--cpd-space-6x);
+}
@@ -0,0 +1,69 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CreateSubspaceDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mx_CreateSubspaceDialog {
+    width: 480px;
+    color: $primary-content;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+
+    .mx_CreateSubspaceDialog_content {
+        flex-grow: 1;
+
+        .mx_CreateSubspaceDialog_betaNotice {
+            padding: 12px 16px;
+            border-radius: 8px;
+            background-color: $header-panel-bg-color;
+
+            .mx_BetaCard_betaPill {
+                margin-right: 8px;
+                vertical-align: middle;
+            }
+        }
+
+        .mx_JoinRuleDropdown + p {
+            color: $muted-fg-color;
+            font-size: $font-12px;
+        }
+    }
+
+    .mx_CreateSubspaceDialog_footer {
+        display: flex;
+        margin-top: 20px;
+
+        .mx_CreateSubspaceDialog_footer_prompt {
+            flex-grow: 1;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
+
+            > * {
+                vertical-align: middle;
+            }
+        }
+
+        .mx_AccessibleButton {
+            display: inline-block;
+            align-self: center;
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            margin-left: 16px;
+            padding: 8px 36px;
+        }
+    }
+}
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_Crypto {
+    table {
+        margin: var(--cpd-space-4x) 0;
+        text-align: left;
+        border-spacing: var(--cpd-space-2x) 0;
+
+        thead {
+            font: var(--cpd-font-heading-sm-semibold);
+        }
+    }
+}
@@ -0,0 +1,14 @@
+/*
+Copyright 2018-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_DeactivateAccountDialog .mx_Dialog_content {
+    margin-bottom: 30px;
+}
+
+.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field {
+    width: 300px;
+}
@@ -0,0 +1,189 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_DevtoolsDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mx_Dialog_fixedWidth {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        max-height: 100%;
+
+        .mx_Dialog_buttons button {
+            margin-bottom: 0;
+        }
+    }
+
+    .mx_DevTools_toggleForm {
+        gap: var(--cpd-space-2x);
+    }
+}
+
+.mx_DevTools_toolHeading {
+    color: var(--cpd-color-text-secondary);
+    font-weight: var(--cpd-font-weight-semibold);
+    font-size: var(--cpd-font-size-heading-sm);
+}
+
+.mx_DevTools_content {
+    overflow-y: auto;
+}
+
+.mx_DevTools_RoomStateExplorer_query {
+    margin-bottom: 10px;
+}
+
+.mx_DevTools_button {
+    font-family: monospace !important;
+    margin-bottom: 8px !important;
+}
+
+.mx_DevTools_RoomStateExplorer_button_hasSpaces {
+    text-decoration: underline;
+}
+
+.mx_DevTools_button.mx_DevTools_RoomStateExplorer_button_emptyString {
+    font-style: italic;
+}
+
+.mx_DevTools_label_left {
+    float: left;
+}
+
+.mx_DevTools_label_right {
+    float: right;
+}
+
+.mx_DevTools_label_bottom {
+    clear: both;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.mx_DevTools_inputRow {
+    display: table-row;
+}
+
+.mx_DevTools_inputLabelCell {
+    display: table-cell;
+    font-weight: bold;
+    padding-right: 24px;
+}
+
+.mx_DevTools_textarea {
+    font-size: $font-12px;
+    max-width: 684px;
+    min-height: 250px;
+    padding: 10px;
+}
+
+.mx_DevTools_eventTypeStateKeyGroup {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.mx_DevTools_content .mx_Field_input:first-of-type {
+    margin-right: 42px;
+}
+
+.mx_DevTools_VerificationRequest {
+    border: 1px solid #cccccc;
+    border-radius: 3px;
+    padding: 1px 5px;
+    margin-bottom: 6px;
+    font-family: $monospace-font-family;
+
+    dl {
+        display: grid;
+        grid-template-columns: max-content auto;
+        margin: 0;
+    }
+
+    dd {
+        grid-column-start: 2;
+    }
+
+    dd:empty {
+        color: #666666;
+        &::after {
+            content: "(empty)";
+        }
+    }
+
+    dt {
+        font-weight: bold;
+        grid-column-start: 1;
+    }
+
+    dt::after {
+        content: ":";
+    }
+}
+
+.mx_DevTools_SettingsExplorer {
+    table {
+        width: 100%;
+        table-layout: fixed;
+        border-collapse: collapse;
+
+        th {
+            /* Colour choice: first one autocomplete gave me. */
+            border-bottom: 1px solid $accent;
+            text-align: left;
+        }
+
+        td,
+        th {
+            width: 360px; /* "feels right" number */
+
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        td + td,
+        th + th {
+            width: auto;
+        }
+
+        tr:hover {
+            /* Colour choice: first one autocomplete gave me. */
+            background-color: $accent;
+        }
+    }
+
+    .mx_DevTools_SettingsExplorer_mutable {
+        background-color: $accent;
+    }
+
+    .mx_DevTools_SettingsExplorer_immutable {
+        background-color: $alert;
+    }
+
+    .mx_DevTools_SettingsExplorer_edit {
+        float: right;
+        margin-right: 16px;
+    }
+
+    .mx_DevTools_SettingsExplorer_warning {
+        border: 2px solid $alert;
+        border-radius: 4px;
+        padding: 4px;
+        margin-bottom: 8px;
+    }
+}
+
+.mx_DevTools_SettingsExplorer_setting {
+    /* override default link button color */
+    /* as it is the same as the background highlight */
+    /* used on focus */
+    color: $links !important;
+}
@@ -0,0 +1,83 @@
+/*
+Copyright 2024,2025 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ExportDialog {
+    .mx_ExportDialog_subheading {
+        font-size: $font-16px;
+        display: block;
+        font-family: $font-family;
+        font-weight: var(--cpd-font-weight-semibold);
+        color: $primary-content;
+        margin-top: 18px;
+        margin-bottom: 12px;
+    }
+
+    &.mx_ExportDialog_Exporting {
+        .mx_ExportDialog_options {
+            pointer-events: none;
+        }
+
+        .mx_Field_select::before {
+            display: none;
+        }
+
+        .mx_StyledRadioButton input[type="radio"]:checked + div > div {
+            background: $info-plinth-fg-color;
+        }
+
+        .mx_StyledRadioButton input[type="radio"]:checked + div {
+            border-color: unset;
+        }
+
+        .mx_Field_valid.mx_Field label,
+        .mx_Field_valid.mx_Field:focus-within label {
+            color: unset;
+        }
+
+        .mx_Field_valid.mx_Field,
+        .mx_Field_valid.mx_Field:focus-within {
+            border-color: $input-border-color;
+        }
+    }
+
+    .mx_ExportDialog_progress {
+        .mx_Dialog_buttons {
+            margin-top: unset;
+            margin-left: 18px;
+        }
+
+        .mx_Spinner {
+            width: unset;
+            height: unset;
+            flex: unset;
+            margin-right: 10px;
+        }
+
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    .mx_StyledRadioButton > .mx_StyledRadioButton_content {
+        margin-top: 5px;
+        margin-bottom: 5px;
+    }
+
+    .mx_Field {
+        width: 256px;
+    }
+
+    .mx_Field_postfix {
+        padding: 9px 10px;
+    }
+}
+
+.mx_ExportDialog_attachments-checkbox {
+    margin-top: $spacing-16;
+}
@@ -0,0 +1,113 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_FeedbackDialog {
+    hr {
+        margin: 24px 0;
+        border-color: $input-border-color;
+    }
+
+    .mx_Dialog_content {
+        margin-bottom: 24px;
+
+        > h2 {
+            margin-bottom: 32px;
+        }
+    }
+
+    .mx_FeedbackDialog_section {
+        position: relative;
+        padding: 12px 52px 12px 68px;
+        border-radius: 8px;
+        border: 1px solid $quinary-content;
+
+        & + .mx_FeedbackDialog_section {
+            margin-top: 16px;
+        }
+
+        > h3 {
+            margin-top: 0;
+            margin-bottom: 8px;
+            font-weight: var(--cpd-font-weight-semibold);
+            font-size: $font-18px;
+            line-height: $font-22px;
+        }
+
+        > p {
+            color: $secondary-content;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            margin: 8px 0 0;
+        }
+
+        .mx_FeedbackDialog_section_microcopy {
+            font-size: $font-12px;
+            line-height: $font-15px;
+        }
+
+        a,
+        .mx_AccessibleButton_kind_link {
+            text-decoration: underline;
+        }
+
+        & > svg {
+            position: absolute;
+            left: 16px;
+            top: 12px;
+            padding: var(--cpd-space-2x);
+            width: 24px;
+            height: 24px;
+            background-color: $icon-button-color;
+            color: $avatar-initial-color;
+            border-radius: 8px;
+        }
+    }
+
+    .mx_FeedbackDialog_rateApp {
+        .mx_StyledRadioButton {
+            display: inline-flex;
+            font-size: 20px;
+            transition:
+                font-size 1s,
+                border 0.5s;
+            border-radius: 50%;
+            border: 2px solid transparent;
+            margin-top: 12px;
+            margin-bottom: 24px;
+            vertical-align: top;
+            cursor: pointer;
+
+            input[type="radio"] + div {
+                display: none;
+            }
+
+            .mx_StyledRadioButton_content {
+                background: $icon-button-color;
+                width: 40px;
+                height: 40px;
+                text-align: center;
+                line-height: 40px;
+                border-radius: 20px;
+                margin: 5px;
+            }
+
+            .mx_StyledRadioButton_spacer {
+                display: none;
+            }
+
+            & + .mx_StyledRadioButton {
+                margin-left: 16px;
+            }
+        }
+
+        .mx_StyledRadioButton_checked {
+            font-size: 24px;
+            border-color: var(--cpd-color-bg-action-primary-rest);
+        }
+    }
+}
@@ -0,0 +1,152 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Robin Townsend <robin@robin.town>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ForwardDialog {
+    width: 520px;
+    color: $primary-content;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+    height: 80vh;
+
+    > h3 {
+        margin: 0 0 6px;
+        color: $secondary-content;
+        font-size: $font-12px;
+        font-weight: var(--cpd-font-weight-semibold);
+        line-height: $font-15px;
+    }
+
+    > .mx_ForwardDialog_preview {
+        max-height: 30%;
+        flex-shrink: 0;
+        overflow-y: auto;
+
+        .mx_EventTile[data-layout="bubble"] {
+            margin-top: 20px;
+        }
+
+        div {
+            pointer-events: none;
+        }
+
+        /* When forwarding messages from encrypted rooms, EventTile will complain */
+        /* that our preview is unencrypted, which doesn't actually matter */
+        /* We also hide download links to not encourage users to try interacting */
+        .mx_EventTile_msgOption,
+        .mx_EventTile_e2eIcon,
+        .mx_MFileBody_download {
+            display: none;
+        }
+    }
+
+    > hr {
+        width: 100%;
+        border: none;
+        border-top: 1px solid $input-border-color;
+        margin: 12px 0;
+    }
+
+    > .mx_ForwardList {
+        display: contents;
+
+        .mx_SearchBox {
+            /* To match the space around the title */
+            margin: 0 0 15px 0;
+            flex-grow: 0;
+
+            &:not(:focus-within) + .mx_ForwardList_content {
+                /* Inhibit the styling if focus is not within the input which handles keyboard accessibility */
+                --mx_ForwardList_entry_selectedBgColor: transparent;
+            }
+        }
+
+        .mx_ForwardList_content {
+            flex-grow: 1;
+        }
+
+        .mx_ForwardList_noResults {
+            display: block;
+            margin-top: 24px;
+        }
+
+        .mx_ForwardList_results {
+            &:not(:first-child) {
+                margin-top: 24px;
+            }
+
+            .mx_ForwardList_resultsList {
+                padding-right: 8px;
+            }
+
+            .mx_ForwardList_entry {
+                display: flex;
+                justify-content: space-between;
+                height: 32px;
+                padding: 6px;
+                border-radius: 8px;
+
+                &:hover,
+                &.mx_ForwardList_entry_active {
+                    background-color: var(--mx_ForwardList_entry_selectedBgColor, $spacePanel-bg-color);
+                }
+
+                .mx_ForwardList_roomButton {
+                    display: flex;
+                    margin-right: 12px;
+                    min-width: 0;
+
+                    .mx_DecoratedRoomAvatar {
+                        margin-right: 12px;
+                    }
+
+                    .mx_ForwardList_entry_name,
+                    .mx_ForwardList_entry_detail {
+                        line-height: 30px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+
+                    .mx_ForwardList_entry_name {
+                        font-size: $font-15px;
+                    }
+
+                    .mx_ForwardList_entry_detail {
+                        font-size: $font-12px;
+                        margin-left: 8px;
+                        color: $tertiary-content;
+                    }
+                }
+
+                .mx_ForwardList_sendButton {
+                    position: relative;
+                    margin-left: 12px;
+
+                    &:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
+                        /* Hide the "Send" label while preserving button size */
+                        visibility: hidden;
+                    }
+
+                    & > svg {
+                        position: absolute;
+                        width: 14px;
+                        height: 14px;
+                        color: $accent;
+                    }
+
+                    .mx_NotificationBadge {
+                        /* Match the failed to send indicator's color with the disabled button */
+                        background-color: $button-danger-disabled-fg-color;
+                    }
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,16 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_GenericFeatureFeedbackDialog {
+    .mx_GenericFeatureFeedbackDialog_subheading {
+        color: $primary-content;
+        font: var(--cpd-font-body-md-regular);
+        line-height: $font-20px;
+        margin-bottom: 24px;
+    }
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_IncomingSasDialog_opponentProfile_image {
+    position: relative;
+}
+
+.mx_IncomingSasDialog_opponentProfile h2 {
+    display: inline-block;
+    margin-left: 10px;
+}
@@ -0,0 +1,316 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_InviteDialog_flexWrapper .mx_Dialog {
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_InviteDialog_transferWrapper .mx_Dialog {
+    padding-bottom: $spacing-16;
+}
+
+.mx_InviteDialog_addressBar {
+    display: flex;
+    flex-direction: row;
+    /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
+    /* for the user section gets weird. */
+    margin: $spacing-8 45px 0 0;
+
+    .mx_InviteDialog_editor {
+        flex: 1;
+        margin-left: var(--cpd-space-0-5x);
+    }
+
+    .mx_InviteDialog_goButton {
+        min-width: 86px;
+        margin-inline-start: 10px;
+        height: 41px;
+        line-height: $font-25px;
+    }
+}
+
+.mx_InviteDialog_section {
+    padding-bottom: $spacing-4;
+
+    .mx_InviteDialog_section_showMore {
+        margin: 7px 18px;
+        display: block;
+    }
+}
+
+.mx_InviteDialog_section_hidden_suggestions_disclaimer {
+    padding: $spacing-8 0 $spacing-16 0;
+    font: var(--cpd-font-body-md-regular);
+
+    > span {
+        color: $primary-content;
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+
+    > p {
+        margin: 0;
+    }
+}
+
+.mx_InviteDialog_footer {
+    border-top: 1px solid $input-border-color;
+
+    > h3 {
+        margin: $spacing-12 0;
+        font-size: $font-12px;
+        color: $muted-fg-color;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    .mx_CopyableText.mx_CopyableText_border {
+        width: unset; /* full width */
+        margin-bottom: 0;
+
+        > a {
+            text-decoration: none;
+            flex-shrink: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+
+.mx_InviteDialog_other {
+    /* Prevent the dialog from jumping around randomly when elements change. */
+    display: flex;
+    flex-direction: column;
+    height: 600px;
+    overflow: hidden;
+
+    h2 {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        white-space: pre-wrap;
+        overflow: hidden;
+    }
+
+    .mx_InviteDialog_addressBar {
+        margin-inline-end: 0;
+    }
+
+    .mx_InviteDialog_userSections {
+        flex-grow: 1;
+        padding-inline-end: 0;
+        display: flex;
+        flex-direction: column;
+        margin-top: var(--cpd-space-3x);
+        gap: var(--cpd-space-3x);
+
+        .mx_InviteDialog_section {
+            padding-bottom: 0;
+        }
+    }
+}
+
+.mx_InviteDialog_content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: hidden;
+
+    .mx_InviteProgressBody {
+        margin-top: var(--cpd-space-12x);
+    }
+}
+
+.mx_InviteDialog_transfer {
+    width: auto;
+
+    .mx_InviteDialog_content {
+        width: 496px;
+        height: 430px;
+        overflow: visible;
+
+        .mx_TabbedView {
+            display: flex;
+            flex-direction: column;
+            flex-shrink: 1;
+            flex-grow: 1;
+            min-height: 0;
+
+            .mx_TabbedView_tabPanel {
+                flex-direction: column;
+
+                .mx_TabbedView_tabPanelContent {
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
+        }
+    }
+
+    .mx_InviteDialog_addressBar {
+        margin-top: $spacing-8;
+    }
+
+    input[type="checkbox"] {
+        margin-inline-end: $spacing-8;
+    }
+}
+
+.mx_InviteDialog_userSections {
+    overflow-y: auto;
+    padding: 0 45px $spacing-4 0;
+}
+
+.mx_InviteDialog_helpText {
+    margin: 0;
+}
+
+.mx_InviteDialog_dialPad {
+    width: 224px;
+    margin-top: $spacing-16;
+    margin-inline: auto;
+
+    .mx_InviteDialog_dialPadField {
+        border-top: 0;
+        border-inline: 0;
+        border-radius: 0;
+        margin-top: 0;
+        border-color: $quaternary-content;
+
+        &:focus-within {
+            border-color: $accent;
+        }
+
+        input {
+            font-size: 18px;
+            font-weight: var(--cpd-font-weight-semibold);
+            padding-top: 0;
+        }
+
+        .mx_Field_postfix {
+            /* Remove border separator between postfix and field content */
+            border-left: none;
+        }
+    }
+
+    .mx_DialPad {
+        row-gap: $spacing-16;
+        column-gap: 48px;
+        margin-inline: auto;
+    }
+}
+
+.mx_InviteDialog_transferConsultConnect {
+    padding-top: $spacing-16;
+    /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
+     * then compensate with padding
+     */
+    padding-inline: $spacing-24;
+    margin-inline: calc(-1 * $spacing-24);
+    border-top: 1px solid $quinary-content;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.mx_InviteDialog_transferConsultConnect_pushRight {
+    margin-inline-start: auto;
+}
+
+.mx_InviteDialog_tile {
+    cursor: pointer;
+    display: grid;
+    gap: $spacing-8 $spacing-12;
+    align-items: center;
+
+    &.mx_InviteDialog_tile--inviterError {
+        grid-template-columns: max-content auto; /* max-content = avatar width */
+        margin-bottom: $spacing-24;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        .mx_InviteDialog_tile--inviterError_errorText {
+            grid-row-start: 2;
+            grid-column-start: 2;
+
+            font-size: $font-15px;
+            color: $alert;
+        }
+    }
+
+    * {
+        vertical-align: middle;
+    }
+
+    .mx_InviteDialog_tile_avatarStack {
+        width: 36px;
+        height: 36px;
+        display: inline-block;
+        position: relative;
+        grid-row-start: 1;
+        grid-column-start: 1;
+
+        & > * {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    .mx_InviteDialog_tile_nameStack {
+        grid-row-start: 1;
+        grid-column-start: 2;
+
+        display: flex;
+        flex-flow: column;
+        align-self: center;
+        align-items: baseline;
+        gap: 2px 0;
+        overflow: hidden;
+
+        .mx_InviteDialog_tile_nameStack_name,
+        .mx_InviteDialog_tile_nameStack_userId {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 100%;
+        }
+
+        .mx_InviteDialog_tile_nameStack_name {
+            font-size: $font-15px;
+            font-weight: var(--cpd-font-weight-semibold);
+            color: $primary-content;
+        }
+
+        .mx_InviteDialog_tile_nameStack_userId {
+            font-size: $font-12px;
+            color: $muted-fg-color;
+        }
+    }
+}
+
+.mx_InviteDialog_multiInviterError {
+    > h4 {
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-content;
+        font-weight: normal;
+    }
+}
+
+.mx_InviteDialog_identityServer {
+    margin-top: 1em;
+}
+
+.mx_InviteDialog_oneThreepid {
+    font-size: $font-12px;
+    margin: $spacing-8 0;
+}
@@ -0,0 +1,16 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_InviteProgressBody {
+    text-align: center;
+    font: var(--cpd-font-body-lg-regular);
+
+    h1 {
+        color: var(--cpd-color-text-primary);
+        font: var(--cpd-font-heading-sm-semibold);
+    }
+}
@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_JoinRuleDropdown {
+    margin-bottom: 8px;
+    font: var(--cpd-font-body-md-regular);
+    color: $primary-content;
+
+    .mx_Dropdown_option {
+        font: var(--cpd-font-body-md-regular);
+        line-height: $font-32px;
+        height: 32px;
+        min-height: 32px;
+
+        > div {
+            padding-left: var(--cpd-space-1-5x);
+
+            svg {
+                width: 16px;
+                height: 16px;
+                color: $secondary-content;
+                vertical-align: -2px;
+                margin-right: var(--cpd-space-1-5x);
+            }
+
+            &.mx_JoinRuleDropdown_knock::before {
+                content: normal;
+            }
+        }
+    }
+
+    .mx_JoinRuleDropdown_icon {
+        color: $secondary-content;
+        position: absolute;
+        left: 6px;
+        top: 8px;
+    }
+}
@@ -0,0 +1,52 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LeaveSpaceDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+        padding: 24px 32px;
+
+        .mx_LeaveSpaceDialog {
+            width: 440px;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: 520px;
+
+            .mx_Dialog_content {
+                flex-grow: 1;
+                margin: 0;
+                overflow-y: auto;
+
+                .mx_LeaveSpaceDialog_section_warning {
+                    border-radius: 8px;
+                    margin: 12px 0 0;
+                    padding: 12px 8px;
+                    background-color: $header-panel-bg-color;
+
+                    font-size: $font-12px;
+                    line-height: $font-15px;
+                    color: $secondary-content;
+
+                    svg {
+                        height: 16px;
+                        width: 16px;
+                        color: $secondary-content;
+                        vertical-align: middle;
+                        margin: 0 var(--cpd-space-1x);
+                    }
+                }
+
+                > p {
+                    color: $primary-content;
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,41 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LocationViewDialog_wrapper .mx_Dialog {
+    padding: 0px;
+}
+
+.mx_LocationViewDialog {
+    /* subtract 0.5px to prevent single-pixel margin due to rounding */
+    width: calc(80vw - 0.5px);
+    height: calc(80vh - 0.5px);
+    overflow: hidden;
+
+    .mx_Dialog_header {
+        margin: 0px;
+        padding: 0px;
+        position: unset;
+
+        .mx_Dialog_title {
+            display: none;
+        }
+    }
+
+    .mx_Dialog_cancelButton {
+        z-index: 4010;
+        position: absolute;
+        left: var(--cpd-space-4x);
+        top: var(--cpd-space-4x);
+    }
+}
+
+.mx_LocationViewDialog_map {
+    width: 80vw;
+    height: 80vh;
+    border-radius: 8px;
+}
@@ -0,0 +1,11 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Manan Sadana <manancodes.dev@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LogoutDialog_ExportKeyAdvanced {
+    width: fit-content;
+}
@@ -0,0 +1,123 @@
+/*
+Copyright 2024,2025 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ManageRestrictedJoinRuleDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mx_ManageRestrictedJoinRuleDialog {
+    width: 480px;
+    color: $primary-content;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+    height: 60vh;
+
+    .mx_SearchBox {
+        /* To match the space around the title */
+        margin: 0 0 15px 0;
+        flex-grow: 0;
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_content {
+        flex-grow: 1;
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_noResults {
+        display: block;
+        margin-top: 24px;
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_section {
+        &:not(:first-child) {
+            margin-top: 24px;
+        }
+
+        > h3 {
+            margin: 0;
+            color: $secondary-content;
+            font-size: $font-12px;
+            font-weight: var(--cpd-font-weight-semibold);
+            line-height: $font-15px;
+        }
+
+        .mx_ManageRestrictedJoinRuleDialog_entry {
+            display: flex;
+            margin-top: 12px;
+
+            > div {
+                flex-grow: 1;
+            }
+
+            .mx_ManageRestrictedJoinRuleDialog_entry_name {
+                margin: 0 8px;
+                font-size: $font-15px;
+                line-height: 30px;
+                flex-grow: 1;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .mx_ManageRestrictedJoinRuleDialog_entry_description {
+                margin-top: 8px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $tertiary-content;
+            }
+        }
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_section_spaces {
+        .mx_BaseAvatar {
+            margin-right: 12px;
+        }
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_section_info {
+        position: relative;
+        border-radius: 8px;
+        margin: 12px 0;
+        padding: 8px;
+        background-color: $header-panel-bg-color;
+
+        font-size: $font-12px;
+        line-height: $font-15px;
+        color: $secondary-content;
+
+        svg {
+            height: 16px;
+            width: 16px;
+            color: $secondary-content;
+            vertical-align: middle;
+            margin: 0 var(--cpd-space-1x);
+        }
+    }
+
+    .mx_ManageRestrictedJoinRuleDialog_footer {
+        margin-top: 20px;
+
+        .mx_ManageRestrictedJoinRuleDialog_footer_buttons {
+            display: flex;
+            width: max-content;
+            margin-left: auto;
+
+            .mx_AccessibleButton {
+                display: inline-block;
+
+                & + .mx_AccessibleButton {
+                    margin-left: 24px;
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,94 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MessageEditHistoryDialog {
+    display: flex;
+    flex-direction: column;
+    max-height: 60vh;
+}
+
+.mx_MessageEditHistoryDialog_scrollPanel {
+    flex: 1 1 auto;
+}
+
+.mx_MessageEditHistoryDialog_error {
+    color: $alert;
+    text-align: center;
+}
+
+.mx_MessageEditHistoryDialog_edits {
+    list-style-type: none;
+    font: var(--cpd-font-body-md-regular);
+    padding: 0;
+    color: $primary-content;
+
+    span.mx_EditHistoryMessage_deletion,
+    span.mx_EditHistoryMessage_insertion {
+        padding: 0px 2px;
+    }
+
+    .mx_EditHistoryMessage_deletion {
+        color: rgb(255, 76, 85);
+        background-color: rgb(255, 76, 85, 0.1);
+        text-decoration: line-through;
+    }
+
+    .mx_EditHistoryMessage_insertion {
+        color: rgb(26, 169, 123);
+        background-color: rgb(26, 169, 123, 0.1);
+        text-decoration: underline;
+    }
+
+    /* Emulate mx_EventTile[data-layout="group"] */
+    .mx_EventTile {
+        padding-top: 0;
+
+        .mx_MessageTimestamp {
+            position: absolute;
+            left: 0;
+            text-align: center;
+        }
+
+        .mx_EventTile_line {
+            padding-top: var(--EventTile_group_line-spacing-block-start);
+            padding-bottom: var(--EventTile_group_line-spacing-block-end);
+            padding-left: var(--EventTile_group_line-spacing-inline-start);
+            line-height: var(--EventTile_group_line-line-height);
+
+            .mx_EventTile_content {
+                margin-right: 0px;
+            }
+        }
+        &::before {
+            content: "";
+            position: absolute;
+            top: -1px;
+            bottom: -1px;
+            left: -10px;
+            right: -10px;
+            z-index: -1;
+            border-radius: 4px;
+        }
+
+        &:hover {
+            &::before {
+                background: $eventbubble-bg-hover;
+            }
+        }
+    }
+
+    .mx_MessageActionBar .mx_AccessibleButton {
+        display: flex;
+        align-items: center;
+
+        padding-inline-start: $spacing-8;
+        padding-inline-end: $spacing-8;
+
+        font-size: $font-15px;
+    }
+}
@@ -0,0 +1,34 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ModalWidgetDialog {
+    .mx_ModalWidgetDialog_warning {
+        margin-bottom: 24px;
+
+        > img {
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+    }
+
+    .mx_ModalWidgetDialog_buttons {
+        float: right;
+        margin-top: 24px;
+
+        .mx_AccessibleButton + .mx_AccessibleButton {
+            margin-left: 8px;
+        }
+    }
+
+    iframe {
+        width: 100%;
+        height: 450px;
+        border: 0;
+        border-radius: 8px;
+    }
+}
@@ -0,0 +1,69 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_PollCreateDialog {
+    .mx_PollCreateDialog_busy {
+        position: absolute;
+        inset: 0;
+        background-color: $overlay-background;
+        z-index: 1;
+    }
+
+    h2 {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-15px;
+        line-height: $font-24px;
+        margin-top: 0;
+        margin-bottom: 8px;
+
+        &:nth-child(n + 2) {
+            margin-top: 20px;
+        }
+    }
+
+    p {
+        color: $secondary-content;
+    }
+
+    .mx_PollCreateDialog_option {
+        display: flex;
+        align-items: center;
+        margin-top: 11px;
+        margin-bottom: 16px; /* 11px from the top will collapse, so this creates a 16px gap between options */
+
+        .mx_Field {
+            flex: 1;
+            margin: 0;
+        }
+
+        .mx_PollCreateDialog_removeOption {
+            margin-left: 12px;
+            width: 16px;
+            height: 16px;
+            padding: var(--cpd-space-0-5x);
+            border-radius: 50%;
+            background-color: $quinary-content;
+            cursor: pointer;
+
+            svg {
+                width: inherit;
+                height: inherit;
+                color: $secondary-content;
+            }
+        }
+    }
+
+    .mx_PollCreateDialog_addOption {
+        padding: 0;
+        margin-bottom: 40px; /* arbitrary to create scrollable area under the poll */
+    }
+
+    .mx_AccessibleButton_disabled {
+        opacity: 0.4;
+    }
+}
@@ -0,0 +1,20 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RegistrationEmailPromptDialog {
+    width: 417px;
+
+    .mx_Dialog_content {
+        margin-bottom: 24px;
+        color: $tertiary-content;
+    }
+
+    .mx_Dialog_primary {
+        width: 100%;
+    }
+}
@@ -0,0 +1,41 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ReportRoomDialog,
+.mx_DeclineAndBlockInviteDialog {
+    textarea {
+        font: var(--cpd-font-body-md-regular);
+        border: 1px solid var(--cpd-color-border-interactive-primary);
+        background: var(--cpd-color-bg-canvas-default);
+        border-radius: 0.5rem;
+        padding: var(--cpd-space-3x) var(--cpd-space-4x);
+    }
+
+    /*
+      Workaround to fix labels appearing with the wrong color.
+
+      .mx_Dialog (in res/css/_common.pcss) redefines the body color
+      as $light-fg-color rather than the standard primary color.
+
+      This forces the colour to match the Compound style, but
+      in the future the Dialogs should not force a color.
+    */
+    form label {
+        color: var(--cpd-color-text-primary);
+    }
+}
+
+.mx_DeclineAndBlockInviteDialog {
+    div[aria-disabled="true"] > label {
+        color: var(--cpd-color-text-secondary);
+    }
+
+    .mx_SettingsFlag_label {
+        color: var(--cpd-color-text-primary);
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RoomSettingsDialog .mx_Dialog_title {
+    -ms-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 0 auto;
+    padding-right: 80px;
+}
@@ -0,0 +1,107 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RoomSettingsDialog_BridgeList {
+    padding: 0;
+
+    li {
+        list-style-type: none;
+
+        &.mx_RoomSettingsDialog_BridgeList_listItem {
+            display: flex;
+            flex-wrap: wrap;
+            gap: $spacing-8;
+            padding: 5px;
+            margin-bottom: $spacing-8;
+
+            /* border-style around each bridge list item */
+            border-width: 1px 1px;
+            border-color: $primary-hairline-color;
+            border-style: solid;
+            border-radius: 5px;
+
+            .mx_RoomSettingsDialog_column_icon {
+                .mx_RoomSettingsDialog_protocolIcon,
+                .mx_RoomSettingsDialog_protocolIcon span,
+                .mx_RoomSettingsDialog_noProtocolIcon {
+                    box-sizing: border-box;
+                    border-radius: 5px;
+                    border: 1px solid $input-darker-bg-color;
+                }
+
+                .mx_RoomSettingsDialog_noProtocolIcon,
+                .mx_RoomSettingsDialog_protocolIcon img {
+                    border-radius: 5px;
+                }
+
+                .mx_RoomSettingsDialog_noProtocolIcon {
+                    width: 48px;
+                    height: 48px;
+                    background: $input-darker-bg-color;
+                }
+
+                .mx_RoomSettingsDialog_protocolIcon {
+                    img {
+                        border-width: 1px 1px;
+                        border-color: $primary-hairline-color;
+                    }
+
+                    span {
+                        /* Correct letter placement */
+                        left: auto;
+                    }
+                }
+            }
+
+            .mx_RoomSettingsDialog_column_data {
+                display: inline-block;
+                width: 85%;
+
+                .mx_RoomSettingsDialog_column_data_details,
+                .mx_RoomSettingsDialog_column_data_metadata,
+                .mx_RoomSettingsDialog_column_data_metadata li,
+                .mx_RoomSettingsDialog_column_data_protocolName {
+                    margin-bottom: 0;
+                }
+
+                .mx_RoomSettingsDialog_column_data_details,
+                .mx_RoomSettingsDialog_column_data_metadata {
+                    margin-top: $spacing-4;
+                }
+
+                .mx_RoomSettingsDialog_column_data_metadata li {
+                    margin-top: $spacing-8;
+                }
+
+                .mx_RoomSettingsDialog_column_data_protocolName {
+                    margin-top: 0;
+                    font-size: 16pt;
+                    color: $primary-content;
+                }
+
+                .mx_RoomSettingsDialog_workspace_channel_details {
+                    color: $primary-content;
+                    font-weight: var(--cpd-font-weight-semibold);
+
+                    .mx_RoomSettingsDialog_channel {
+                        margin-inline-start: 5px;
+                    }
+                }
+
+                .mx_RoomSettingsDialog_metadata {
+                    color: $muted-fg-color;
+                    margin-bottom: 0;
+                    overflow-y: visible;
+                    text-overflow: ellipsis;
+                    white-space: normal;
+                    padding: 0;
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,10 @@
+/*
+Copyright 2018-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RoomUpgradeDialog {
+    padding-right: 70px;
+}
@@ -0,0 +1,44 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RoomUpgradeWarningDialog {
+    max-width: 38vw;
+    width: 38vw;
+
+    .mx_RoomUpgradeWarningDialog_progress {
+        .mx_ProgressBar {
+            height: 8px;
+            width: 100%;
+
+            @mixin ProgressBarBorderRadius 8px;
+        }
+
+        .mx_RoomUpgradeWarningDialog_progressText {
+            margin-top: 8px;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $primary-content;
+        }
+    }
+}
+
+.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
+    font-weight: 700;
+
+    .mx_ToggleSwitch {
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 8px;
+        float: right;
+    }
+
+    .mx_SettingsFlag_label {
+        display: inline-block;
+        vertical-align: middle;
+    }
+}
@@ -0,0 +1,63 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ServerOfflineDialog {
+    .mx_ServerOfflineDialog_content {
+        padding-right: 85px;
+        color: $primary-content;
+
+        hr {
+            border-color: $primary-content;
+            opacity: 0.1;
+            border-bottom: none;
+        }
+
+        ul {
+            padding: 16px;
+
+            li:nth-child(n + 2) {
+                margin-top: 16px;
+            }
+        }
+
+        .mx_ServerOfflineDialog_content_context {
+            .mx_ServerOfflineDialog_content_context_timestamp {
+                display: inline-block;
+                width: 115px;
+                color: $muted-fg-color;
+                line-height: 24px; /* same as avatar */
+                vertical-align: top;
+            }
+
+            .mx_ServerOfflineDialog_content_context_timeline {
+                display: inline-block;
+                width: calc(100% - 155px); /* 115px timestamp width + 40px right margin */
+
+                .mx_ServerOfflineDialog_content_context_timeline_header {
+                    span {
+                        margin-left: 8px;
+                        vertical-align: middle;
+                    }
+                }
+
+                .mx_ServerOfflineDialog_content_context_txn {
+                    position: relative;
+                    margin-top: 8px;
+
+                    .mx_ServerOfflineDialog_content_context_txn_desc {
+                        width: calc(100% - 100px); /* 100px is an arbitrary margin for the button */
+                    }
+
+                    .mx_AccessibleButton {
+                        float: right;
+                    }
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,71 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ServerPickerDialog {
+    width: 468px;
+    box-sizing: border-box;
+
+    .mx_Dialog_content {
+        margin-bottom: 0;
+
+        > p {
+            color: $secondary-content;
+            font: var(--cpd-font-body-md-regular);
+
+            margin: 16px 0;
+
+            &:first-of-type {
+                margin-bottom: 40px;
+            }
+
+            &:last-of-type {
+                margin: 0 24px 24px;
+            }
+        }
+
+        > h2 {
+            font-size: $font-15px;
+            font-weight: var(--cpd-font-weight-semibold);
+            color: $secondary-content;
+            margin: 16px 0 16px 8px;
+        }
+
+        > a {
+            color: $accent;
+            margin-left: 8px;
+        }
+    }
+
+    .mx_ServerPickerDialog_otherHomeserverRadio {
+        input[type="radio"] + div {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+    }
+
+    .mx_ServerPickerDialog_otherHomeserver {
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        border-radius: unset;
+
+        > input {
+            padding-left: 0;
+        }
+
+        > label {
+            margin-left: 0;
+        }
+    }
+
+    .mx_AccessibleButton_kind_primary {
+        width: calc(100% - 26px);
+        margin: 0 8px;
+        padding: 15px 18px;
+    }
+}
@@ -0,0 +1,25 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 Vector Creations Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SetEmailDialog_email_input {
+    border-radius: 3px;
+    border: 1px solid $input-border-color;
+    padding: 9px;
+    color: $input-fg-color;
+    background-color: $background;
+    font-size: $font-15px;
+    width: 100%;
+    max-width: 280px;
+    margin-bottom: 10px;
+}
+
+.mx_SetEmailDialog_email_input:focus {
+    outline: none;
+    box-shadow: none;
+    border: 1px solid $accent;
+}
@@ -0,0 +1,57 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/* Not actually a component but things shared by settings components */
+.mx_UserSettingsDialog,
+.mx_RoomSettingsDialog,
+.mx_SpaceSettingsDialog,
+.mx_SpacePreferencesDialog {
+    width: 90vw;
+    max-width: 980px;
+    /* set the height too since tabbed view scrolls itself. */
+    height: 80vh;
+
+    .mx_TabbedView {
+        top: 90px;
+    }
+
+    .mx_TabbedView .mx_SettingsTab {
+        box-sizing: border-box;
+        min-width: 580px;
+        padding-right: 100px;
+        display: flex;
+        flex-direction: column;
+
+        /* Put some padding on the bottom to avoid the settings tab from */
+        /* colliding harshly with the dialog when scrolled down. */
+        padding-bottom: 100px;
+    }
+
+    .mx_SettingsDialog_tabLabelsAlert::after {
+        display: inline-block;
+        content: "";
+        width: 8px;
+        height: 8px;
+        background-color: var(--cpd-color-icon-critical-primary);
+        clip-path: circle(4px);
+        position: absolute;
+        right: var(--cpd-space-4x);
+    }
+}
+
+/* On narrow viewports, the tab labels are hidden, so we need to shift the indicator so it isn't over the tab icon. */
+@media (max-width: 1024px) {
+    .mx_UserSettingsDialog,
+    .mx_RoomSettingsDialog,
+    .mx_SpaceSettingsDialog,
+    .mx_SpacePreferencesDialog {
+        .mx_SettingsDialog_tabLabelsAlert::after {
+            right: var(--cpd-space-1x);
+            top: var(--cpd-space-1x);
+        }
+    }
+}
@@ -0,0 +1,77 @@
+/*
+Copyright 2018-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ShareDialog {
+    /* Value from figma design */
+    width: 416px;
+
+    .mx_Dialog_header {
+        text-align: center;
+        margin-bottom: var(--cpd-space-6x);
+        /* Override dialog header padding to able to center it */
+        padding-inline-end: 0;
+    }
+
+    .mx_ShareDialog_content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-6x);
+        align-items: center;
+
+        .mx_ShareDialog_top {
+            display: flex;
+            flex-direction: column;
+            gap: var(--cpd-space-4x);
+            align-items: center;
+            width: 100%;
+
+            span {
+                text-align: center;
+                font: var(--cpd-font-body-sm-semibold);
+                color: var(--cpd-color-text-secondary);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                width: 100%;
+            }
+        }
+
+        label {
+            display: inline-flex;
+            gap: var(--cpd-space-3x);
+            justify-content: center;
+            align-items: center;
+            font: var(--cpd-font-body-md-medium);
+        }
+
+        button {
+            width: 100%;
+        }
+
+        .mx_ShareDialog_social {
+            display: flex;
+            gap: var(--cpd-space-3x);
+            justify-content: center;
+
+            a {
+                width: 48px;
+                height: 48px;
+                border-radius: 99px;
+                box-sizing: border-box;
+                border: 1px solid var(--cpd-color-border-interactive-secondary);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                img {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
+    margin-bottom: 2px;
+}
+
+.mx_SlashCommandHelpDialog .mx_Dialog_content {
+    margin-top: 12px;
+    margin-bottom: 34px;
+}
@@ -0,0 +1,28 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SpacePreferencesDialog {
+    width: 700px;
+    height: 400px;
+
+    > h4 {
+        margin: -12px 0 0;
+        font-weight: normal;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-content;
+    }
+
+    .mx_TabbedView {
+        top: 80px;
+
+        .mx_SettingsTab {
+            min-width: unset;
+        }
+    }
+}
@@ -0,0 +1,74 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SpaceSettingsDialog {
+    color: $primary-content;
+
+    .mx_SpaceSettings_errorText {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-12px;
+        line-height: $font-15px;
+        color: $alert;
+        margin-bottom: 28px;
+    }
+
+    .mx_ToggleSwitch {
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 16px;
+    }
+
+    .mx_SettingsTab_section {
+        .mx_SettingsTab_section_caption {
+            margin-top: 12px;
+            margin-bottom: 20px;
+        }
+
+        .mx_StyledRadioButton {
+            margin-top: 8px;
+            margin-bottom: 4px;
+
+            .mx_StyledRadioButton_content {
+                font-weight: var(--cpd-font-weight-semibold);
+                line-height: $font-18px;
+                color: $primary-content;
+            }
+
+            & + span {
+                font-size: $font-15px;
+                line-height: $font-18px;
+                color: $secondary-content;
+                margin-left: 26px;
+            }
+        }
+    }
+
+    .mx_SpaceSettingsDialog_buttons {
+        display: flex;
+        margin-top: 64px;
+
+        .mx_AccessibleButton {
+            display: inline-block;
+        }
+
+        .mx_AccessibleButton_kind_link {
+            margin-left: auto;
+        }
+    }
+
+    .mx_AccessibleButton_hasKind {
+        &.mx_AccessibleButton_kind_link {
+            font: var(--cpd-font-body-md-semibold);
+            margin: 7px 18px;
+
+            &.mx_SettingsTab_showAdvanced {
+                margin: 18px 0;
+            }
+        }
+    }
+}
@@ -0,0 +1,437 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SpotlightDialog_wrapper {
+    .mx_Dialog_border {
+        /* Disable the glass border as this dialog wasn't designed with it in mind */
+        display: contents;
+    }
+
+    .mx_Dialog {
+        /* !important because it's overriding compound  */
+        width: fit-content !important;
+        border-radius: 8px !important;
+        height: 60% !important;
+        overflow-y: initial;
+        position: relative;
+        padding: 0;
+        contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
+
+        #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;
+            }
+        }
+    }
+}
+
+.mx_SpotlightDialog {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .mx_Dialog_header {
+        display: none;
+    }
+
+    .mx_SpotlightDialog_searchBox {
+        margin: 0;
+        border: none;
+        border-radius: 8px 8px 0 0;
+        padding: $spacing-12 $spacing-16;
+        border-bottom: 1px solid $system;
+
+        > .mx_SpotlightDialog_filter {
+            display: flex;
+            align-content: center;
+            align-items: center;
+            border-radius: 8px;
+            margin-right: $spacing-8;
+            background-color: $quinary-content;
+            vertical-align: middle;
+            color: $primary-content;
+            position: relative;
+            padding: $spacing-4 $spacing-8 $spacing-4 37px;
+
+            > svg {
+                color: $secondary-content;
+                width: 18px;
+                height: 18px;
+                position: absolute;
+                left: $spacing-8;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+
+            .mx_SpotlightDialog_filter--close {
+                display: inline-block;
+                width: 14px;
+                height: 14px;
+                padding: 1px;
+                background: $system;
+                border-radius: 8px;
+                margin-left: $spacing-8;
+                text-align: center;
+                line-height: 16px;
+                color: $secondary-content;
+
+                svg {
+                    color: $secondary-content;
+                    width: inherit;
+                    height: inherit;
+                }
+            }
+        }
+
+        > input {
+            display: block;
+            box-sizing: border-box;
+            background-color: transparent;
+            width: 100%;
+            height: 32px;
+            padding: 0;
+            color: $tertiary-content;
+            font-weight: normal;
+            font-size: $font-15px;
+            line-height: $font-24px;
+        }
+
+        > .mx_Spinner {
+            flex-grow: 0;
+            width: unset;
+            height: unset;
+            margin-left: $spacing-16;
+        }
+
+        &:not(:focus-within) + #mx_SpotlightDialog_content {
+            /* Inhibit the styling if focus is not within the input which handles keyboard accessibility */
+            --mx_SpotlightDialog_option_selectedBgColor: transparent;
+
+            /* Hide the enter prompt as in this state pressing enter would not actuate that option */
+            .mx_SpotlightDialog_enterPrompt {
+                visibility: hidden;
+            }
+        }
+    }
+
+    #mx_SpotlightDialog_content {
+        height: 100%;
+        overflow-y: auto;
+        padding: $spacing-16;
+
+        ul {
+            padding: 0;
+            margin: 0;
+        }
+
+        .mx_SpotlightDialog_section {
+            > h4,
+            > .mx_SpotlightDialog_sectionHeader > h4 {
+                font-weight: var(--cpd-font-weight-semibold);
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $secondary-content;
+                margin: 0;
+            }
+
+            > h4 {
+                margin-bottom: $spacing-8;
+            }
+
+            .mx_SpotlightDialog_sectionHeader {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: $spacing-8;
+
+                .mx_SpotlightDialog_options {
+                    display: flex;
+                    gap: $spacing-4;
+                }
+            }
+
+            & + .mx_SpotlightDialog_section {
+                margin-top: $spacing-24;
+            }
+        }
+
+        .mx_SpotlightDialog_option {
+            border-radius: 8px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &:hover,
+            &[aria-selected="true"] {
+                background-color: var(--mx_SpotlightDialog_option_selectedBgColor, $quinary-content);
+            }
+        }
+
+        .mx_SpotlightDialog_recentlyViewed {
+            > div {
+                display: flex;
+                white-space: nowrap;
+                overflow-x: hidden;
+                margin-right: 1px; /* occlude the 1px visible of the very next tile to prevent it looking broken */
+            }
+
+            .mx_SpotlightDialog_option {
+                padding: $spacing-4;
+                color: $primary-content;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                display: inline-block;
+                width: 58px;
+                height: 58px;
+                min-width: 58px;
+                box-sizing: border-box;
+                text-align: center;
+
+                .mx_DecoratedRoomAvatar {
+                    margin: 0 9px $spacing-4; /* maintain centering */
+                }
+
+                & + .mx_SpotlightDialog_option {
+                    margin-left: $spacing-16;
+                }
+            }
+        }
+
+        .mx_SpotlightDialog_results,
+        .mx_SpotlightDialog_recentSearches,
+        .mx_SpotlightDialog_otherSearches,
+        .mx_SpotlightDialog_hiddenResults {
+            .mx_SpotlightDialog_option {
+                --mx_SpotlightDialog_option_selectedBgColor: $system;
+
+                padding: 6px $spacing-4;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $primary-content;
+                position: relative;
+                display: flex;
+                align-items: center;
+                white-space: nowrap;
+
+                .mx_SpotlightDialog_option--endAdornment {
+                    display: inline-flex;
+                    flex-direction: row;
+                    margin-left: auto;
+                    align-items: flex-start;
+                }
+
+                &.mx_SpotlightDialog_result_multiline {
+                    align-items: flex-start;
+
+                    .mx_AccessibleButton {
+                        padding: $spacing-4 $spacing-20;
+                        margin: 2px $spacing-4;
+                    }
+
+                    .mx_SpotlightDialog_enterPrompt {
+                        margin-top: 9px;
+                        margin-right: $spacing-8;
+                    }
+                }
+
+                > .mx_SpotlightDialog_metaspaceResult,
+                > .mx_DecoratedRoomAvatar,
+                > .mx_BaseAvatar {
+                    margin-right: $spacing-8;
+                    width: 24px;
+                    height: 24px;
+                    flex-shrink: 0;
+
+                    .mx_BaseAvatar {
+                        width: inherit;
+                        height: inherit;
+                    }
+                }
+
+                .mx_SpotlightDialog_result_publicRoomDetails {
+                    display: flex;
+                    flex-direction: column;
+                    flex-grow: 1;
+                    min-width: 0;
+
+                    .mx_SpotlightDialog_result_publicRoomHeader {
+                        display: flex;
+                        flex-direction: row;
+                        line-height: $font-24px;
+                        margin-right: $spacing-8;
+
+                        .mx_SpotlightDialog_result_publicRoomName {
+                            color: $primary-content;
+                            font-size: $font-15px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                        }
+                        .mx_SpotlightDialog_result_publicRoomAlias {
+                            color: $tertiary-content;
+                            font-size: $font-12px;
+                            margin-left: $spacing-8;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                        }
+                    }
+                    .mx_SpotlightDialog_result_publicRoomDescription {
+                        color: $secondary-content;
+                        font-size: $font-12px;
+                        white-space: normal;
+                        word-wrap: break-word;
+                        line-height: $font-20px;
+                        display: -webkit-box;
+                        -webkit-box-orient: vertical;
+                        -webkit-line-clamp: 3;
+                        overflow: hidden;
+                    }
+                }
+
+                .mx_NotificationBadge {
+                    margin-left: $spacing-8;
+                }
+
+                .mx_SpotlightDialog_option--menu,
+                .mx_SpotlightDialog_option--notifications {
+                    width: 16px;
+                    height: 16px;
+                    padding: var(--cpd-space-0-5x);
+                    flex-shrink: 0;
+                    margin-top: auto;
+                    margin-bottom: auto;
+                    position: relative;
+                    display: none;
+
+                    svg {
+                        width: inherit;
+                        height: inherit;
+                        display: block;
+                        color: $tertiary-content;
+                    }
+
+                    &:hover svg,
+                    &:focus-visible svg {
+                        color: $secondary-content;
+                    }
+                }
+
+                &:hover,
+                &[aria-selected="true"] {
+                    .mx_SpotlightDialog_option--menu,
+                    .mx_SpotlightDialog_option--notifications {
+                        display: block;
+                    }
+                }
+
+                &[aria-selected="true"] .mx_SpotlightDialog_enterPrompt {
+                    display: inline-block;
+                }
+            }
+        }
+
+        .mx_SpotlightDialog_inviteLink,
+        .mx_SpotlightDialog_createRoom {
+            margin-top: $spacing-8;
+
+            .mx_AccessibleButton {
+                position: relative;
+                margin: 0;
+                padding: 3px $spacing-8 3px $spacing-28;
+
+                svg {
+                    display: block;
+                    position: absolute;
+                    left: $spacing-8;
+                    width: 16px;
+                    height: 16px;
+                    color: var(--cpd-color-icon-primary);
+                }
+            }
+        }
+
+        .mx_SpotlightDialog_otherSearches {
+            .mx_SpotlightDialog_option {
+                padding-left: $spacing-32;
+                position: relative;
+
+                svg {
+                    color: $secondary-content;
+                    width: 24px;
+                    height: 24px;
+                    position: absolute;
+                    left: $spacing-4;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+            }
+
+            .mx_SpotlightDialog_otherSearches_messageSearchText {
+                font-size: $font-15px;
+                line-height: $font-24px;
+            }
+        }
+
+        .mx_SpotlightDialog_result_details {
+            margin-left: $spacing-8;
+            margin-right: $spacing-8;
+            color: $tertiary-content;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
+            float: right;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-content;
+        }
+
+        .mx_SpotlightDialog_enterPrompt {
+            padding: 2px $spacing-4;
+            /* To avoid any styling inherent with <kbd> elements */
+            font-family: inherit;
+            font-weight: inherit;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $tertiary-content;
+            border-radius: 6px;
+            background-color: $quinary-content;
+            margin-right: $spacing-4;
+            display: none;
+        }
+
+        .mx_SpotlightDialog_metaspaceResult svg {
+            color: $secondary-content;
+            width: inherit;
+            height: inherit;
+        }
+    }
+}
@@ -0,0 +1,33 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/*
+ * To avoid visual glitching of two modals stacking briefly, we customise the
+ * 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_border {
+    width: 60%;
+    height: 70%;
+    box-sizing: border-box;
+}
+
+.mx_TermsDialog_termsTableHeader {
+    font-weight: bold;
+    text-align: left;
+}
+
+.mx_TermsDialog_termsTable {
+    font-size: $font-12px;
+    width: 100%;
+}
+
+.mx_TermsDialog_service,
+.mx_TermsDialog_summary {
+    padding-right: 10px;
+}
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_UnpinAllDialog {
+    /* 396 is coming from figma and we remove the left and right paddings of the dialog */
+    width: calc(396px - (var(--cpd-space-10x) * 2));
+    padding-bottom: var(--cpd-space-2x);
+
+    .mx_UnpinAllDialog_title {
+        /* Override the default heading style */
+        font: var(--cpd-font-heading-sm-semibold) !important;
+        margin-bottom: var(--cpd-space-3x);
+    }
+
+    .mx_UnpinAllDialog_buttons {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-4x);
+        margin: var(--cpd-space-8x) var(--cpd-space-2x) 0 var(--cpd-space-2x);
+
+        button {
+            width: 100%;
+        }
+    }
+}
@@ -0,0 +1,24 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UntrustedDeviceDialog {
+    .mx_Dialog_title {
+        display: flex;
+        align-items: center;
+
+        .mx_E2EIcon {
+            margin-left: 0;
+        }
+    }
+
+    .mx_Dialog_buttons {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+    }
+}
@@ -0,0 +1,26 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UploadConfirmDialog_fileIcon {
+    margin-right: 5px;
+}
+
+.mx_UploadConfirmDialog_previewOuter {
+    text-align: center;
+}
+
+.mx_UploadConfirmDialog_previewInner {
+    display: inline-block;
+    text-align: left;
+}
+
+.mx_UploadConfirmDialog_imagePreview {
+    max-height: 300px;
+    max-width: 100%;
+    border-radius: 4px;
+    border: 1px solid $dialog-close-fg-color;
+}
@@ -0,0 +1,23 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SettingsDialog_toastContainer {
+    position: absolute;
+    bottom: var(--cpd-space-10x);
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.mx_UserSettingsDialog_title {
+    /* Override default dialog font style */
+    font: var(--cpd-font-heading-md-regular) !important;
+
+    .mx_UserSettingsDialog_title_strong {
+        font: var(--cpd-font-heading-md-semibold);
+    }
+}
@@ -0,0 +1,40 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_VerifyEMailDialog {
+    height: auto;
+    top: 300px;
+
+    .mx_Dialog {
+        color: $primary-content;
+        font: var(--cpd-font-body-md-regular);
+        padding: $spacing-24 $spacing-24 $spacing-16;
+        text-align: center;
+        /* !important override compound  */
+        width: 485px !important;
+
+        h1 {
+            font-size: $font-24px;
+            font-weight: var(--cpd-font-weight-semibold);
+        }
+
+        .mx_VerifyEMailDialog_text-light {
+            color: $secondary-content;
+            line-height: 20px;
+        }
+
+        .mx_AuthBody_did-not-receive {
+            justify-content: center;
+            margin-bottom: $spacing-8;
+        }
+
+        .mx_Dialog_cancelButton {
+            right: 10px;
+        }
+    }
+}
@@ -0,0 +1,49 @@
+/*
+Copyright 2024,2025 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_WidgetCapabilitiesPromptDialog {
+    .text-muted {
+        font-size: $font-12px;
+    }
+
+    .mx_Dialog_content {
+        margin-bottom: 16px;
+    }
+
+    .mx_WidgetCapabilitiesPromptDialog_cap {
+        margin-top: 20px;
+        font-size: $font-15px;
+        line-height: $font-15px;
+    }
+
+    .mx_Dialog_buttons {
+        margin-top: 40px; /* double normal */
+    }
+
+    .mx_SettingsFlag {
+        line-height: calc($font-14px + 7px + 7px); /* 7px top & bottom padding */
+        color: $muted-fg-color;
+        font-size: $font-12px;
+
+        .mx_ToggleSwitch {
+            /* downsize the switch + ball */
+            width: $font-32px;
+            height: $font-15px;
+
+            &.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
+                left: calc(100% - $font-15px);
+            }
+
+            .mx_ToggleSwitch_ball {
+                width: $font-15px;
+                height: $font-15px;
+                border-radius: $font-15px;
+            }
+        }
+    }
+}
@@ -0,0 +1,58 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2018, 2019 , 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AccessSecretStorageDialog {
+    &.mx_EncryptionCard {
+        /* override some styles that we don't need */
+        border: 0px none;
+        box-shadow: none;
+        padding: 0px;
+    }
+
+    .mx_AccessSecretStorageDialog_primaryContainer {
+        .mx_AccessSecretStorageDialog_recoveryKeyEntry {
+            /*
+             * Be specific here to avoid "margin: 9px" from _common.pcss
+             */
+            :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) {
+                input {
+                    /*
+                     * From figma: https://www.figma.com/design/ZodBLtGnKmRTGJo5SGLnH3/ER-137--Excluding-Insecure-Devices?node-id=102-43729&t=QmewENUd7f6Tmw9U-1
+                     */
+                    width: 448px;
+                    height: 70px;
+                    margin: 0px;
+                    border: 1px solid;
+                }
+            }
+        }
+
+        .mx_AccessSecretStorageDialog_recoveryKeyFeedback {
+            svg {
+                display: inline-block;
+                vertical-align: bottom;
+                width: 20px;
+                height: 20px;
+                mask-size: 20px;
+                margin-inline-end: 5px;
+            }
+
+            &.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
+                color: $alert;
+
+                svg {
+                    color: $alert;
+                }
+            }
+        }
+    }
+
+    .mx_EncryptionCard_buttons {
+        margin-top: var(--cpd-space-20x);
+    }
+}
@@ -0,0 +1,25 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CreateCrossSigningDialog {
+    /* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
+    /* we end up when in there, but when in our own dialog we set our own width */
+    /* so need to fix it to something sensible as otherwise we'd end up either */
+    /* really wide or really narrow depending on the phase. I bet you wish you */
+    /* never asked. */
+    width: 560px;
+
+    details .mx_AccessibleButton {
+        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
+    }
+}
+
+.mx_CreateCrossSigningDialog .mx_Dialog_title {
+    /* TODO: Consider setting this for all dialog titles. */
+    margin-bottom: 1em;
+}
@@ -0,0 +1,141 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2018 New Vector Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_CreateSecretStorageDialog {
+    /* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
+    /* we end up when in there, but when in our own dialog we set our own width */
+    /* so need to fix it to something sensible as otherwise we'd end up either */
+    /* really wide or really narrow depending on the phase. I bet you wish you */
+    /* never asked. */
+    width: 560px;
+
+    &.mx_SuccessDialog {
+        padding: 56px; /* 80px from design - 24px wrapper padding */
+
+        .mx_Dialog_title {
+            margin-bottom: $spacing-16;
+        }
+    }
+
+    .mx_SettingsFlag {
+        display: flex;
+    }
+
+    .mx_SettingsFlag_label {
+        flex: 1 1 0;
+        min-width: 0;
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+
+    .mx_ToggleSwitch {
+        flex: 0 0 auto;
+        margin-left: 30px;
+    }
+
+    details .mx_AccessibleButton {
+        margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
+    }
+}
+
+.mx_CreateSecretStorageDialog .mx_Dialog_title {
+    /* TODO: Consider setting this for all dialog titles. */
+    margin-bottom: 1em;
+}
+
+.mx_CreateSecretStorageDialog_centeredTitle,
+.mx_CreateSecretStorageDialog_centeredBody {
+    text-align: center;
+}
+
+.mx_CreateSecretStorageDialog_primaryContainer {
+    /* FIXME: plinth colour in new theme(s). background-color: $accent; */
+    padding-top: 20px;
+
+    &.mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer {
+        display: flex;
+        justify-content: center;
+    }
+}
+
+.mx_CreateSecretStorageDialog_primaryContainer::after {
+    content: "";
+    clear: both;
+    display: block;
+}
+
+.mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton {
+    margin-bottom: 16px;
+    padding: 11px;
+}
+
+.mx_CreateSecretStorageDialog_optionTitle {
+    color: $dialog-title-fg-color;
+    font-weight: var(--cpd-font-weight-semibold);
+    font-size: $font-18px;
+    padding-bottom: 10px;
+}
+
+.mx_CreateSecretStorageDialog_passPhraseContainer {
+    display: flex;
+    align-items: flex-start;
+}
+
+.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
+    margin-top: 0px;
+}
+
+.mx_CreateSecretStorageDialog_passPhraseMatch {
+    width: 200px;
+    margin-left: 20px;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyContainer {
+    display: inline-block;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKey {
+    font-weight: bold;
+    text-align: center;
+    padding: 20px;
+    color: $info-plinth-fg-color;
+    background-color: $info-plinth-bg-color;
+    border-radius: 6px;
+    word-spacing: 1em;
+    margin-bottom: 20px;
+
+    code {
+        display: inline-block;
+        width: 30rem;
+    }
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyButtons {
+    align-items: center;
+    display: flex;
+    gap: 16px;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn {
+    flex-direction: column;
+}
+
+.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
+    flex-grow: 1;
+    white-space: nowrap;
+}
+
+.mx_CreateSecretStorageDialog_continueSpinner {
+    margin-top: 33px;
+    text-align: right;
+}
+
+.mx_CreateSecretStorageDialog_continueSpinner img {
+    width: 20px;
+    height: 20px;
+}
@@ -0,0 +1,24 @@
+/*
+Copyright 2018-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_KeyBackupFailedDialog .mx_Dialog_title {
+    margin-bottom: 32px;
+}
+
+.mx_KeyBackupFailedDialog_title {
+    padding-bottom: 10px;
+
+    svg {
+        margin-right: var(--cpd-space-2x);
+        vertical-align: -2px;
+        color: $primary-content;
+    }
+}
+
+.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
+    margin-top: 36px;
+}
@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2018 New Vector Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RestoreKeyBackupDialog_keyStatus {
+    height: 30px;
+}
+
+.mx_RestoreKeyBackupDialog_primaryContainer {
+    /* FIXME: plinth colour in new theme(s). background-color: $accent; */
+    padding: 20px;
+}
+
+.mx_RestoreKeyBackupDialog_passPhraseInput,
+.mx_RestoreKeyBackupDialog_recoveryKeyInput {
+    width: 300px;
+    border: 1px solid $accent;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+.mx_RestoreKeyBackupDialog_content > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 110px; /* Empirically measured */
+}