Update space create menu copy and add link to community migrator

Author: t3chguy

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;
         }

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -35,6 +35,9 @@ import SdkConfig from "../../../SdkConfig";
 import Modal from "../../../Modal";
 import GenericFeatureFeedbackDialog from "../dialogs/GenericFeatureFeedbackDialog";
 import SettingsStore from "../../../settings/SettingsStore";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { UserTab } from "../dialogs/UserSettingsDialog";
 
 export const createSpace = async (
     name: string,
@@ -245,10 +248,23 @@ const SpaceCreateMenu = ({ onFinished }) => {
 
     let body;
     if (visibility === null) {
+        const onCreateSpaceFromCommunityClick = () => {
+            defaultDispatcher.dispatch({
+                action: Action.ViewUserSettings,
+                initialTabId: UserTab.Preferences,
+            });
+            onFinished();
+        };
+
         body = <React.Fragment>
             <h2>{ _t("Create a space") }</h2>
-            <p>{ _t("Spaces are a new way to group rooms and people. " +
-                "To join an existing space you'll need an invite.") }</p>
+            <p>
+                { _t("Spaces are a new way to group rooms and people.") }
+                &nbsp;
+                { _t("What kind of Space do you want to create?") }
+                &nbsp;
+                { _t("You can change this later.") }
+            </p>
 
             <SpaceCreateMenuType
                 title={_t("Public")}
@@ -263,7 +279,15 @@ const SpaceCreateMenu = ({ onFinished }) => {
                 onClick={() => setVisibility(Visibility.Private)}
             />
 
-            <p>{ _t("You can change this later") }</p>
+            <p>
+                { _t("You can also create a Space from a <a>community</a>.", {}, {
+                    a: sub => <AccessibleButton kind="link" onClick={onCreateSpaceFromCommunityClick}>
+                        { sub }
+                    </AccessibleButton>,
+                }) }
+                &nbsp;
+                { _t("To join an existing space you'll need an invite") }
+            </p>
 
             <SpaceFeedbackPrompt onClick={onFinished} />
         </React.Fragment>;

src/i18n/strings/en_EN.json

@@ -1027,12 +1027,14 @@
     "e.g. my-space": "e.g. my-space",
     "Address": "Address",
     "Create a space": "Create a space",
-    "Spaces are a new way to group rooms and people. To join an existing space you'll need an invite.": "Spaces are a new way to group rooms and people. To join an existing space you'll need an invite.",
+    "What kind of Space do you want to create?": "What kind of Space do you want to create?",
+    "You can change this later.": "You can change this later.",
     "Public": "Public",
     "Open space for anyone, best for communities": "Open space for anyone, best for communities",
     "Private": "Private",
     "Invite only, best for yourself or teams": "Invite only, best for yourself or teams",
-    "You can change this later": "You can change this later",
+    "You can also create a Space from a <a>community</a>.": "You can also create a Space from a <a>community</a>.",
+    "To join an existing space you'll need an invite": "To join an existing space you'll need an invite",
     "Go back": "Go back",
     "Your public space": "Your public space",
     "Your private space": "Your private space",