Switch dropdown out for radio interaction when leaving space

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, // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
-    .mx_DecoratedRoomAvatar {
+    .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;

res/css/views/dialogs/_LeaveSpaceDialog.scss

@@ -27,24 +27,15 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
-
+    max-height: 520px;
-    &.mx_LeaveSpaceDialog_hasChildren {
-        height: 500px;
-    }
 
     .mx_Dialog_content {
         flex-grow: 1;
-        margin: 0 0 24px;
+        margin: 0;
-        color: $tertiary-fg-color;
         overflow-y: auto;
 
-        .mx_Dropdown_input {
+        .mx_RadioButton + .mx_RadioButton {
-            border-radius: 8px;
+            margin-top: 16px;
-            border-color: $input-border-color;
-        }
-
-        .mx_Dropdown_option {
-            font-size: $font-15px;
         }
 
         .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;
 

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 <spaceName/>.", {}, {
-                spaceName: () => <b>{ space.name }</b>,
-            });
-            break;
-        case RoomsToLeave.None:
-            captionSpan = _t("You'll still be a part of all rooms and spaces in <spaceName/> you've joined.", {}, {
-                spaceName: () => <b>{ space.name }</b>,
-            });
-            break;
-        case RoomsToLeave.Specific:
-            captionSpan = <span>{ _t("Pick which rooms and spaces you want to leave.") }</span>;
-            break;
-    }
-
     return <div className="mx_LeaveSpaceDialog_section">
-        <Dropdown
+        <StyledRadioGroup
-            id="mx_LeaveSpaceDialog_leaveRoomPickerDropdown"
+            name="roomsToLeave"
-            onOptionChange={setState}
             value={state}
-            label={_t("Choose which rooms and spaces you wish to leave")}
+            onChange={setState}
-        >
+            definitions={[
-            <div key={RoomsToLeave.All}>
+                {
-                { _t("Leave all rooms and spaces") }
+                    value: RoomsToLeave.All,
-            </div>
+                    label: _t("Leave all rooms and spaces"),
-            <div key={RoomsToLeave.None}>
+                }, {
-                { _t("Don't leave any") }
+                    value: RoomsToLeave.None,
-            </div>
+                    label: _t("Don't leave any"),
-            <div key={RoomsToLeave.Specific}>
+                }, {
-                { _t("Leave specific rooms and spaces") }
+                    value: RoomsToLeave.Specific,
-            </div>
+                    label: _t("Leave specific rooms and spaces"),
-        </Dropdown>
+                },
-        { captionSpan }
+            ]}
+        />
 
         { state === RoomsToLeave.Specific && (
             <SpaceChildPicker
@@ -178,9 +160,7 @@ const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
 
     return <BaseDialog
         title={_t("Leave %(spaceName)s", { spaceName: space.name })}
-        className={classNames("mx_LeaveSpaceDialog", {
+        className="mx_LeaveSpaceDialog"
-            mx_LeaveSpaceDialog_hasChildren: spaceChildren.length > 0,
-        })}
         contentId="mx_LeaveSpaceDialog"
         onFinished={() => onFinished(false)}
         fixedWidth={false}

src/i18n/strings/en_EN.json

@@ -2373,10 +2373,6 @@
     "Clear cache and resync": "Clear cache and resync",
     "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!": "%(brand)s now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!",
     "Updating %(brand)s": "Updating %(brand)s",
-    "You will leave all rooms and spaces in <spaceName/>.": "You will leave all rooms and spaces in <spaceName/>.",
-    "You'll still be a part of all rooms and spaces in <spaceName/> you've joined.": "You'll still be a part of all rooms and spaces in <spaceName/> you've joined.",
-    "Pick which rooms and spaces you want to leave.": "Pick which rooms and spaces you want to leave.",
-    "Choose which rooms and spaces you wish to leave": "Choose which rooms and spaces you wish to leave",
     "Leave all rooms and spaces": "Leave all rooms and spaces",
     "Don't leave any": "Don't leave any",
     "Leave specific rooms and spaces": "Leave specific rooms and spaces",