Iterate styling and decoration for the beta prompts

res/css/structures/_SpaceRoomView.scss

@@ -81,6 +81,7 @@ $SpaceRoomViewInnerWidth: 428px;
             color: $secondary-fg-color;
             margin-top: 12px;
             margin-bottom: 24px;
+            max-width: $SpaceRoomViewInnerWidth;
         }
 
         .mx_SpaceRoomView_buttons {
@@ -374,6 +375,23 @@ $SpaceRoomViewInnerWidth: 428px;
     }
 
     .mx_SpaceRoomView_inviteTeammates {
+        // XXX remove this when spaces leaves Beta
+        .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
+            padding: 58px 16px 16px;
+            position: relative;
+            border-radius: 8px;
+            background-color: $header-panel-bg-color;
+            max-width: $SpaceRoomViewInnerWidth;
+            margin: 20px 0 30px;
+            box-sizing: border-box;
+
+            .mx_BetaCard_betaPill {
+                position: absolute;
+                left: 16px;
+                top: 16px;
+            }
+        }
+
         .mx_SpaceRoomView_inviteTeammates_buttons {
             color: $secondary-fg-color;
             margin-top: 28px;

res/css/views/beta/_BetaCard.scss

@@ -29,6 +29,10 @@ limitations under the License.
             line-height: $font-22px;
             color: $primary-fg-color;
             margin: 4px 0 14px;
+
+            .mx_BetaCard_betaPill {
+                margin-left: 12px;
+            }
         }
 
         .mx_BetaCard_caption {
@@ -62,7 +66,6 @@ limitations under the License.
     background-color: $accent-color-alt;
     padding: 4px 10px;
     border-radius: 8px;
-    margin-left: 12px;
     text-transform: uppercase;
     font-size: 12px;
     line-height: 15px;

src/components/structures/SpaceRoomView.tsx

@@ -438,11 +438,13 @@ const SpaceSetupPublicShare = ({ space, onFinished }) => {
     </div>;
 };
 
-const SpaceSetupPrivateScope = ({ space, onFinished }) => {
+const SpaceSetupPrivateScope = ({ space, justCreatedOpts, onFinished }) => {
     return <div className="mx_SpaceRoomView_privateScope">
         <h1>{ _t("Who are you working with?") }</h1>
         <div className="mx_SpaceRoomView_description">
-            { _t("Make sure the right people have access to %(name)s", { name: space.name }) }
+            { _t("Make sure the right people have access to %(name)s", {
+                name: justCreatedOpts?.createOpts?.name || space.name,
+            }) }
         </div>
 
         <AccessibleButton
@@ -539,6 +541,17 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
             { _t("Make sure the right people have access. You can invite more later.") }
         </div>
 
+        <div className="mx_SpaceRoomView_inviteTeammates_betaDisclaimer">
+            <BetaPill />
+            { _t("<b>This is an experimental feature.</b> For now, " +
+                "new users receiving an invite will have to open the invite on <link/> to actually join.", {}, {
+                b: sub => <b>{ sub }</b>,
+                link: () => <a href="https://app.element.io/" rel="noreferrer noopener" target="_blank">
+                    app.element.io
+                </a>,
+            }) }
+        </div>
+
         { error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
         { fields }
 
@@ -703,6 +716,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
             case Phase.PrivateScope:
                 return <SpaceSetupPrivateScope
                     space={this.props.space}
+                    justCreatedOpts={this.props.justCreatedOpts}
                     onFinished={(invite: boolean) => {
                         this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
                     }}

src/components/views/beta/BetaCard.tsx

@@ -56,7 +56,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
                 { value ? _t("Leave the beta") : _t("Join the beta") }
             </AccessibleButton>
             { disclaimer && <div className="mx_BetaCard_disclaimer">
-                { typeof disclaimer === "string" ? _t(disclaimer) : disclaimer() }
+                { disclaimer(value) }
             </div> }
         </div>
         <img src={image} alt="" />

src/i18n/strings/en_EN.json

@@ -786,7 +786,10 @@
     "Change notification settings": "Change notification settings",
     "Spaces": "Spaces",
     "Spaces are a new way to group people and rooms for fun, work, yourself or anything in between.": "Spaces are a new way to group people and rooms for fun, work, yourself or anything in between.",
-    "%(brand)s will reload with Spaces enabled, and communities and custom tags disabled. You can leave the beta at anytime. Certain features will require a compatible homeserver. Beta only available for Web, Desktop, and Android.": "%(brand)s will reload with Spaces enabled, and communities and custom tags disabled. You can leave the beta at anytime. Certain features will require a compatible homeserver. Beta only available for Web, Desktop, and Android.",
+    "%(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.": "%(brand)s will reload with Spaces disabled. Communities and custom tags will be visible again.",
+    "Beta available for web, desktop and Android. Thank you for trying the beta.": "Beta available for web, desktop and Android. Thank you for trying the beta.",
+    "%(brand)s will reload with Spaces enabled, communities and custom tags hidden.": "%(brand)s will reload with Spaces enabled, communities and custom tags hidden.",
+    "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.": "Beta available for web, desktop and Android. Some features may be unavailable on your homeserver.",
     "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode",
     "Send and receive voice messages (in development)": "Send and receive voice messages (in development)",
     "Render LaTeX maths in messages": "Render LaTeX maths in messages",
@@ -2683,6 +2686,7 @@
     "Inviting...": "Inviting...",
     "Invite your teammates": "Invite your teammates",
     "Make sure the right people have access. You can invite more later.": "Make sure the right people have access. You can invite more later.",
+    "<b>This is an experimental feature.</b> For now, new users receiving an invite will have to open the invite on <link/> to actually join.": "<b>This is an experimental feature.</b> For now, new users receiving an invite will have to open the invite on <link/> to actually join.",
     "Invite by username": "Invite by username",
     "What are some things you want to discuss in %(spaceName)s?": "What are some things you want to discuss in %(spaceName)s?",
     "Let's create a room for each of them.": "Let's create a room for each of them.",

src/settings/Settings.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import { MatrixClient } from 'matrix-js-sdk/src/client';
-import type { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
 import { _t, _td } from '../languageHandler';
 import {
@@ -123,7 +123,7 @@ export interface ISetting {
     betaInfo?: {
         title: string; // _td
         caption: string; // _td
-        disclaimer?: (() => ReactNode) | string; // _td
+        disclaimer?: (enabled: boolean) => ReactNode;
         image: string; // require(...)
     };
 }
@@ -138,11 +138,25 @@ export const SETTINGS: {[setting: string]: ISetting} = {
             title: _td("Spaces"),
             caption: _td("Spaces are a new way to group people and rooms for fun, " +
                 "work, yourself or anything in between."),
-            disclaimer: () => _t("%(brand)s will reload with Spaces enabled, " +
+            disclaimer: (enabled) => {
-                "and communities and custom tags disabled. " +
+                if (enabled) {
-                "You can leave the beta at anytime. " +
+                    return <>
-                "Certain features will require a compatible homeserver. " +
+                        <p>{ _t("%(brand)s will reload with Spaces disabled. " +
-                "Beta only available for Web, Desktop, and Android.", { brand: SdkConfig.get().brand }),
+                            "Communities and custom tags will be visible again.", {
+                            brand: SdkConfig.get().brand,
+                        }) }</p>
+                        <p>{ _t("Beta available for web, desktop and Android. Thank you for trying the beta.") }</p>
+                    </>;
+                }
+
+                return <>
+                    <p>{ _t("%(brand)s will reload with Spaces enabled, communities and custom tags hidden.", {
+                        brand: SdkConfig.get().brand,
+                    }) }</p>
+                    <p>{ _t("Beta available for web, desktop and Android. " +
+                        "Some features may be unavailable on your homeserver.") }</p>
+                </>;
+            },
             image: require("../../res/img/betas/spaces.png"),
         },
     },