diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
index 5d9ea06e52..42e17c8d98 100644
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
@@ -50,35 +50,6 @@ limitations under the License.
line-height: $font-15px;
}
- .mx_AddExistingToSpace_entry {
- display: flex;
- margin-top: 12px;
-
- .mx_DecoratedRoomAvatar, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
- .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
- margin-right: 12px;
- }
-
- img.mx_RoomAvatar_isSpaceRoom,
- .mx_RoomAvatar_isSpaceRoom img {
- border-radius: 8px;
- }
-
- .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;
- }
-
- .mx_Checkbox {
- align-items: center;
- }
- }
-
.mx_AccessibleButton_kind_link {
font-size: $font-12px;
line-height: $font-15px;
@@ -260,11 +231,16 @@ limitations under the License.
display: flex;
margin-top: 12px;
- // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
- .mx_DecoratedRoomAvatar {
+ .mx_DecoratedRoomAvatar, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
+ .mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom {
margin-right: 12px;
}
+ img.mx_RoomAvatar_isSpaceRoom,
+ .mx_RoomAvatar_isSpaceRoom img {
+ border-radius: 8px;
+ }
+
.mx_AddExistingToSpace_entry_name {
font-size: $font-15px;
line-height: 30px;
diff --git a/res/css/views/dialogs/_LeaveSpaceDialog.scss b/res/css/views/dialogs/_LeaveSpaceDialog.scss
index e28ff82bcf..c982f50e52 100644
--- a/res/css/views/dialogs/_LeaveSpaceDialog.scss
+++ b/res/css/views/dialogs/_LeaveSpaceDialog.scss
@@ -27,24 +27,15 @@ limitations under the License.
display: flex;
flex-direction: column;
flex-wrap: nowrap;
-
- &.mx_LeaveSpaceDialog_hasChildren {
- height: 500px;
- }
+ max-height: 520px;
.mx_Dialog_content {
flex-grow: 1;
- margin: 0 0 24px;
- color: $tertiary-fg-color;
+ margin: 0;
overflow-y: auto;
- .mx_Dropdown_input {
- border-radius: 8px;
- border-color: $input-border-color;
- }
-
- .mx_Dropdown_option {
- font-size: $font-15px;
+ .mx_RadioButton + .mx_RadioButton {
+ margin-top: 16px;
}
.mx_SearchBox {
@@ -61,17 +52,12 @@ limitations under the License.
.mx_LeaveSpaceDialog_section {
margin: 16px 0;
-
- .mx_Dropdown + span {
- display: inline-block;
- margin-top: 8px;
- }
}
.mx_LeaveSpaceDialog_section_warning {
position: relative;
border-radius: 8px;
- margin: 12px 0;
+ margin: 12px 0 0;
padding: 12px 8px 12px 42px;
background-color: $header-panel-bg-color;
diff --git a/src/components/views/dialogs/LeaveSpaceDialog.tsx b/src/components/views/dialogs/LeaveSpaceDialog.tsx
index 7d3ded78e7..6e1e798e9d 100644
--- a/src/components/views/dialogs/LeaveSpaceDialog.tsx
+++ b/src/components/views/dialogs/LeaveSpaceDialog.tsx
@@ -19,7 +19,6 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { JoinRule } from "matrix-js-sdk/src/@types/partials";
import { _t } from '../../../languageHandler';
-import Dropdown from "../elements/Dropdown";
import DialogButtons from "../elements/DialogButtons";
import BaseDialog from "../dialogs/BaseDialog";
import SpaceStore from "../../../stores/SpaceStore";
@@ -27,7 +26,7 @@ import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { Entry } from "./AddExistingToSpaceDialog";
import SearchBox from "../../structures/SearchBox";
import QueryMatcher from "../../../autocomplete/QueryMatcher";
-import classNames from "classnames";
+import StyledRadioGroup from "../elements/StyledRadioGroup";
enum RoomsToLeave {
All = "All",
@@ -91,41 +90,24 @@ const LeaveRoomsPicker = ({ space, spaceChildren, roomsToLeave, setRoomsToLeave
}
}, [setRoomsToLeave, state, spaceChildren]);
- let captionSpan;
- switch (state) {
- case RoomsToLeave.All:
- captionSpan = _t("You will leave all rooms and spaces in