Improve subspaces and some utilities around room/space creation

res/css/_components.scss

@@ -76,6 +76,7 @@
 @import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
 @import "./views/dialogs/_CreateRoomDialog.scss";
+@import "./views/dialogs/_CreateSubspaceDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
@@ -85,6 +86,7 @@
 @import "./views/dialogs/_HostSignupDialog.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_InviteDialog.scss";
+@import "./views/dialogs/_JoinRuleDropdown.scss";
 @import "./views/dialogs/_KeyboardShortcutsDialog.scss";
 @import "./views/dialogs/_ManageRestrictedJoinRuleDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";

res/css/views/context_menus/_IconizedContextMenu.scss

@@ -99,6 +99,10 @@ limitations under the License.
             .mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
                 padding-left: 14px;
             }
+
+            .mx_BetaCard_betaPill {
+                margin-left: 16px;
+            }
         }
     }
 

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

@@ -54,11 +54,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;
@@ -73,41 +78,12 @@ limitations under the License.
                 align-items: center;
             }
         }
-    }
-
-    .mx_AddExistingToSpace_section_spaces {
-        .mx_BaseAvatar {
-            margin-right: 12px;
-        }
-
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-        }
-    }
-
-    .mx_AddExistingToSpace_section_experimental {
-        position: relative;
-        border-radius: 8px;
-        margin: 12px 0;
-        padding: 8px 8px 8px 42px;
-        background-color: $header-panel-bg-color;
-
-        font-size: $font-12px;
-        line-height: $font-15px;
-        color: $secondary-fg-color;
 
-        &::before {
-            content: '';
-            position: absolute;
-            left: 10px;
-            top: calc(50% - 8px); // vertical centering
-            height: 16px;
-            width: 16px;
-            background-color: $secondary-fg-color;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
-            mask-position: center;
+        .mx_AccessibleButton_kind_link {
+            font-size: $font-12px;
+            line-height: $font-15px;
+            margin-top: 8px;
+            padding: 0;
         }
     }
 
@@ -205,77 +181,77 @@ limitations under the License.
     min-height: 0;
     height: 80vh;
 
-    .mx_Dialog_title {
-        display: flex;
+    .mx_AddExistingToSpace {
+        display: contents;
+    }
+}
 
-        .mx_BaseAvatar_image {
-            border-radius: 8px;
-            margin: 0;
-            vertical-align: unset;
-        }
+.mx_SubspaceSelector {
+    display: flex;
 
-        .mx_BaseAvatar {
-            display: inline-flex;
-            margin: auto 16px auto 5px;
-            vertical-align: middle;
-        }
+    .mx_BaseAvatar_image {
+        border-radius: 8px;
+        margin: 0;
+        vertical-align: unset;
+    }
 
-        > div {
-            > h1 {
-                font-weight: $font-semi-bold;
-                font-size: $font-18px;
-                line-height: $font-22px;
-                margin: 0;
-            }
+    .mx_BaseAvatar {
+        display: inline-flex;
+        margin: auto 16px auto 5px;
+        vertical-align: middle;
+    }
 
-            .mx_AddExistingToSpaceDialog_onlySpace {
-                color: $secondary-fg-color;
-                font-size: $font-15px;
-                line-height: $font-24px;
-            }
+    > div {
+        > h1 {
+            font-weight: $font-semi-bold;
+            font-size: $font-18px;
+            line-height: $font-22px;
+            margin: 0;
         }
+    }
 
-        .mx_Dropdown_input {
-            border: none;
+    .mx_Dropdown_input {
+        border: none;
 
-            > .mx_Dropdown_option {
-                padding-left: 0;
-                flex: unset;
-                height: unset;
-                color: $secondary-fg-color;
-                font-size: $font-15px;
-                line-height: $font-24px;
+        > .mx_Dropdown_option {
+            padding-left: 0;
+            flex: unset;
+            height: unset;
+            color: $secondary-fg-color;
+            font-size: $font-15px;
+            line-height: $font-24px;
 
-                .mx_BaseAvatar {
-                    display: none;
-                }
+            .mx_BaseAvatar {
+                display: none;
             }
+        }
 
-            .mx_Dropdown_menu {
-                .mx_AddExistingToSpaceDialog_dropdownOptionActive {
-                    color: $accent-color;
-                    padding-right: 32px;
-                    position: relative;
-
-                    &::before {
-                        content: '';
-                        width: 20px;
-                        height: 20px;
-                        top: 8px;
-                        right: 0;
-                        position: absolute;
-                        mask-position: center;
-                        mask-size: contain;
-                        mask-repeat: no-repeat;
-                        background-color: $accent-color;
-                        mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
-                    }
+        .mx_Dropdown_menu {
+            .mx_SubspaceSelector_dropdownOptionActive {
+                color: $accent-color;
+                padding-right: 32px;
+                position: relative;
+
+                &::before {
+                    content: '';
+                    width: 20px;
+                    height: 20px;
+                    top: 8px;
+                    right: 0;
+                    position: absolute;
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background-color: $accent-color;
+                    mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
                 }
             }
         }
     }
 
-    .mx_AddExistingToSpace {
-        display: contents;
+    .mx_SubspaceSelector_onlySpace {
+        color: $secondary-fg-color;
+        font-size: $font-15px;
+        line-height: $font-24px;
     }
 }

res/css/views/dialogs/_CreateRoomDialog.scss

@@ -109,56 +109,4 @@ limitations under the License.
         margin: 0 85px 0 0;
         font-size: $font-12px;
     }
-
-    .mx_Dropdown {
-        margin-bottom: 8px;
-        font-weight: normal;
-        font-family: $font-family;
-        font-size: $font-14px;
-        color: $primary-fg-color;
-
-        .mx_Dropdown_input {
-            border: 1px solid $input-border-color;
-        }
-
-        .mx_Dropdown_option {
-            font-size: $font-14px;
-            line-height: $font-32px;
-            height: 32px;
-            min-height: 32px;
-
-            > div {
-                padding-left: 30px;
-                position: relative;
-
-                &::before {
-                    content: "";
-                    position: absolute;
-                    height: 16px;
-                    width: 16px;
-                    left: 6px;
-                    top: 8px;
-                    mask-repeat: no-repeat;
-                    mask-position: center;
-                    background-color: $secondary-fg-color;
-                }
-            }
-        }
-
-        .mx_CreateRoomDialog_dropdown_invite::before {
-            mask-image: url('$(res)/img/element-icons/lock.svg');
-            mask-size: contain;
-        }
-
-        .mx_CreateRoomDialog_dropdown_public::before {
-            mask-image: url('$(res)/img/globe.svg');
-            mask-size: 12px;
-        }
-
-        .mx_CreateRoomDialog_dropdown_restricted::before {
-            mask-image: url('$(res)/img/element-icons/community-members.svg');
-            mask-size: contain;
-        }
-    }
 }
-

res/css/views/dialogs/_CreateSubspaceDialog.scss

@@ -0,0 +1,75 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CreateSubspaceDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mx_CreateSubspaceDialog {
+    width: 480px;
+    color: $primary-fg-color;
+    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;
+            }
+        }
+    }
+
+    .mx_CreateSubspaceDialog_footer {
+        display: flex;
+        margin-top: 20px;
+
+        > span {
+            flex-grow: 1;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-fg-color;
+
+            > * {
+                vertical-align: middle;
+            }
+        }
+
+        .mx_AccessibleButton {
+            display: inline-block;
+            align-self: center;
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            margin-left: 16px;
+            padding: 8px 36px;
+        }
+
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+        }
+    }
+}