Offer a way to create a space based on existing community

res/css/_components.scss

@@ -75,6 +75,7 @@
 @import "./views/dialogs/_CreateCommunityPrototypeDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
 @import "./views/dialogs/_CreateRoomDialog.scss";
+@import "./views/dialogs/_CreateSpaceFromCommunityDialog.scss";
 @import "./views/dialogs/_CreateSubspaceDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";

res/css/structures/_GroupView.scss

@@ -368,6 +368,61 @@ limitations under the License.
     padding: 40px 20px;
 }
 
+.mx_GroupView_spaceUpgradePrompt {
+    padding: 16px 50px;
+    background-color: $header-panel-bg-color;
+    border-radius: 8px;
+    max-width: 632px;
+    font-size: $font-15px;
+    line-height: $font-24px;
+    margin-top: 24px;
+    position: relative;
+
+    > h2 {
+        font-size: inherit;
+        font-weight: $font-semi-bold;
+    }
+
+    > p, h2 {
+        margin: 0;
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        height: $font-24px;
+        width: 20px;
+        left: 18px;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+        background-color: $secondary-fg-color;
+    }
+
+    .mx_AccessibleButton {
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        background-color: $input-darker-bg-color;
+        position: absolute;
+        top: 16px;
+        right: 16px;
+
+        &::before {
+            content: "";
+            position: absolute;
+            width: inherit;
+            height: inherit;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: 8px;
+            mask-image: url('$(res)/img/image-view/close.svg');
+            background-color: $secondary-fg-color;
+        }
+    }
+}
+
 .mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar > :not(.mx_MemberInfo_avatar) {
     padding-left: 16px;
     padding-right: 16px;

res/css/structures/_SpaceRoomView.scss

@@ -180,6 +180,18 @@ $SpaceRoomViewInnerWidth: 428px;
             }
         }
 
+        .mx_SpaceRoomView_preview_migratedCommunity {
+            margin-bottom: 16px;
+            padding: 8px 12px;
+            border-radius: 8px;
+            border: 1px solid $input-border-color;
+            width: max-content;
+
+            .mx_BaseAvatar {
+                margin-right: 4px;
+            }
+        }
+
         .mx_SpaceRoomView_preview_inviter {
             display: flex;
             align-items: center;
@@ -342,7 +354,7 @@ $SpaceRoomViewInnerWidth: 428px;
 
         .mx_SpaceFeedbackPrompt {
             padding: 7px; // 8px - 1px border
-            border: 1px solid $menu-border-color;
+            border: 1px solid rgba($primary-fg-color, .1);
             border-radius: 8px;
             width: max-content;
             margin: 0 0 -40px auto; // collapse its own height to not push other components down

res/css/views/context_menus/_TagTileContextMenu.scss

@@ -51,6 +51,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/hide.svg');
 }
 
+.mx_TagTileContextMenu_createSpace::before {
+    mask-image: url('$(res)/img/element-icons/message/fwd.svg');
+}
+
 .mx_TagTileContextMenu_separator {
     margin-top: 0;
     margin-bottom: 0;

res/css/views/dialogs/_CreateSpaceFromCommunityDialog.scss

@@ -0,0 +1,183 @@
+/*
+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_CreateSpaceFromCommunityDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mx_CreateSpaceFromCommunityDialog {
+    width: 480px;
+    color: $primary-fg-color;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+
+    .mx_CreateSpaceFromCommunityDialog_content {
+        > p {
+            font-size: $font-15px;
+            line-height: $font-24px;
+
+            &:first-of-type {
+                margin-top: 0;
+            }
+
+            &.mx_CreateSpaceFromCommunityDialog_flairNotice {
+                font-size: $font-12px;
+                line-height: $font-15px;
+            }
+        }
+
+        .mx_SpaceBasicSettings {
+            > p {
+                font-size: $font-12px;
+                line-height: $font-15px;
+                margin: 16px 0;
+            }
+
+            .mx_Field_textarea {
+                margin-bottom: 0;
+            }
+        }
+
+        .mx_JoinRuleDropdown .mx_Dropdown_menu {
+            width: auto !important; // override fixed width
+        }
+    }
+
+    .mx_CreateSpaceFromCommunityDialog_footer {
+        display: flex;
+        margin-top: 20px;
+
+        > span {
+            flex-grow: 1;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-fg-color;
+
+            .mx_ProgressBar {
+                height: 8px;
+                width: 100%;
+
+                @mixin ProgressBarBorderRadius 8px;
+            }
+
+            .mx_CreateSpaceFromCommunityDialog_progressText {
+                margin-top: 8px;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $primary-fg-color;
+            }
+
+            > * {
+                vertical-align: middle;
+            }
+        }
+
+        .mx_CreateSpaceFromCommunityDialog_error {
+            padding-left: 12px;
+
+            > img {
+                align-self: center;
+            }
+
+            .mx_CreateSpaceFromCommunityDialog_errorHeading {
+                font-weight: $font-semi-bold;
+                font-size: $font-15px;
+                line-height: $font-18px;
+                color: $notice-primary-color;
+            }
+
+            .mx_CreateSpaceFromCommunityDialog_errorCaption {
+                margin-top: 4px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $primary-fg-color;
+            }
+        }
+
+        .mx_AccessibleButton {
+            display: inline-block;
+            align-self: center;
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            padding: 8px 36px;
+            margin-left: 24px;
+        }
+
+        .mx_AccessibleButton_kind_primary_outline {
+            margin-left: auto;
+        }
+
+        .mx_CreateSpaceFromCommunityDialog_retryButton {
+            margin-left: 12px;
+            padding-left: 24px;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                background-color: $primary-fg-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/retry.svg');
+                width: 18px;
+                height: 18px;
+                left: 0;
+            }
+        }
+
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+        }
+    }
+}
+
+.mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog {
+    .mx_InfoDialog {
+        max-width: 500px;
+    }
+
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+    }
+
+    .mx_CreateSpaceFromCommunityDialog_SuccessInfoDialog_checkmark {
+        position: relative;
+        border-radius: 50%;
+        border: 3px solid $accent-color;
+        width: 68px;
+        height: 68px;
+        margin: 12px auto 32px;
+
+        &::before {
+            width: inherit;
+            height: inherit;
+            content: '';
+            position: absolute;
+            background-color: $accent-color;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+            mask-size: 48px;
+        }
+    }
+}

res/css/views/elements/_Field.scss

@@ -38,6 +38,7 @@ limitations under the License.
 .mx_Field input,
 .mx_Field select,
 .mx_Field textarea {
+    font-family: inherit;
     font-weight: normal;
     font-size: $font-14px;
     border: none;

res/css/views/settings/tabs/_SettingsTab.scss

@@ -50,15 +50,21 @@ limitations under the License.
 }
 
 .mx_SettingsTab_section {
+    $right-gutter: 80px;
+
     margin-bottom: 24px;
 
     .mx_SettingsFlag {
-        margin-right: 80px;
+        margin-right: $right-gutter;
         margin-bottom: 10px;
     }
 
+    > p {
+        margin-right: $right-gutter;
+    }
+
     &.mx_SettingsTab_subsectionText .mx_SettingsFlag {
-        margin-right: 0px !important;
+        margin-right: 0 !important;
     }
 }
 

res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss

@@ -22,4 +22,25 @@ limitations under the License.
     .mx_SettingsTab_section {
         margin-bottom: 30px;
     }
+
+    .mx_PreferencesUserSettingsTab_CommunityMigrator {
+        margin-right: 200px;
+
+        > div {
+            font-weight: $font-semi-bold;
+            font-size: $font-15px;
+            line-height: $font-18px;
+            color: $primary-fg-color;
+            margin: 16px 0;
+
+            .mx_BaseAvatar {
+                margin-right: 12px;
+                vertical-align: middle;
+            }
+
+            .mx_AccessibleButton {
+                float: right;
+            }
+        }
+    }
 }

res/css/views/spaces/_SpaceCreateMenu.scss

@@ -41,7 +41,6 @@ $spacePanelWidth: 71px;
             > p {
                 font-size: $font-15px;
                 color: $secondary-fg-color;
-                margin: 0;
             }
 
             .mx_SpaceFeedbackPrompt {
@@ -51,13 +50,6 @@ $spacePanelWidth: 71px;
             }
         }
 
-        // XXX remove this when spaces leaves Beta
-        .mx_BetaCard_betaPill {
-            position: absolute;
-            top: 24px;
-            right: 24px;
-        }
-
         .mx_SpaceCreateMenuType {
             @mixin SpacePillButton;
         }
@@ -100,6 +92,11 @@ $spacePanelWidth: 71px;
             width: min-content;
         }
 
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+            font-size: inherit;
+        }
+
         .mx_AccessibleButton_disabled {
             cursor: not-allowed;
         }