Design iterations based on PR feedback

res/css/structures/_SpaceRoomView.scss

@@ -143,10 +143,13 @@ $SpaceRoomViewInnerWidth: 428px;
         }
         // XXX remove this when spaces leaves Beta
         .mx_SpaceRoomView_preview_spaceBetaPrompt {
-            font-size: $font-15px;
+            font-weight: $font-semi-bold;
+            font-size: $font-14px;
             line-height: $font-24px;
-            color: $secondary-fg-color;
+            color: $primary-fg-color;
-            margin-top: 14px;
+            margin-top: 24px;
+            position: relative;
+            padding-left: 24px;
 
             .mx_AccessibleButton_kind_link {
                 display: inline;
@@ -154,6 +157,19 @@ $SpaceRoomViewInnerWidth: 428px;
                 font-size: inherit;
                 line-height: inherit;
             }
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: $font-24px;
+                width: 20px;
+                left: 0;
+                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_SpaceRoomView_preview_inviter {

res/css/views/beta/_BetaCard.scss

@@ -45,6 +45,7 @@ limitations under the License.
             display: block;
             margin: 20px 0;
             padding: 12px 40px;
+            width: max-content;
         }
 
         .mx_BetaCard_disclaimer {

src/components/structures/MyGroups.js

@@ -140,7 +140,7 @@ export default class MyGroups extends React.Component {
                     </div>
                 </div>*/}
             </div>
-            <BetaCard featureId="feature_spaces" title={_t("Communities are changing to spaces")} />
+            <BetaCard featureId="feature_spaces" title={_t("Communities are changing to Spaces")} />
             <div className="mx_MyGroups_content">
                 { contentHeader }
                 { content }

src/components/structures/SpaceRoomView.tsx

@@ -604,7 +604,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
         </div>
 
         <div className="mx_SpaceRoomView_inviteTeammates_betaDisclaimer">
-            <BetaPill />
+            <BetaPill onClick={onBetaClick} />
             { _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>,

src/components/views/beta/BetaCard.tsx

@@ -21,6 +21,7 @@ import {_t} from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import SettingsStore from "../../../settings/SettingsStore";
 import {SettingLevel} from "../../../settings/SettingLevel";
+import TextWithTooltip from "../elements/TextWithTooltip";
 
 interface IProps {
     title?: string;
@@ -28,6 +29,26 @@ interface IProps {
 }
 
 export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
+    if (onClick) {
+        return <TextWithTooltip
+            class={classNames("mx_BetaCard_betaPill", {
+                mx_BetaCard_betaPill_clickable: !!onClick,
+            })}
+            tooltip={<div>
+                <div className="mx_Tooltip_title">
+                    { _t("Spaces is a beta feature") }
+                </div>
+                <div className="mx_Tooltip_sub">
+                    { _t("Tap for more info") }
+                </div>
+            </div>}
+            onClick={onClick}
+            tooltipProps={{ yOffset: -10 }}
+        >
+            { _t("Beta") }
+        </TextWithTooltip>;
+    }
+
     return <span
         className={classNames("mx_BetaCard_betaPill", {
             mx_BetaCard_betaPill_clickable: !!onClick,

src/components/views/spaces/SpaceCreateMenu.tsx

@@ -169,6 +169,7 @@ const SpaceCreateMenu = ({ onFinished }) => {
     >
         <FocusLock returnFocus={true}>
             <BetaPill onClick={() => {
+                onFinished();
                 defaultDispatcher.dispatch({
                     action: Action.ViewUserSettings,
                     initialTabId: USER_LABS_TAB,

src/i18n/strings/en_EN.json

@@ -785,10 +785,11 @@
     "%(senderName)s: %(stickerName)s": "%(senderName)s: %(stickerName)s",
     "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.",
+    "Spaces are new ways to group rooms and people.": "Spaces are new ways to group rooms and people.",
     "%(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.",
+    "%(brand)s will reload with Spaces enabled. Communities and custom tags will be hidden.": "%(brand)s will reload with Spaces enabled. Communities and custom tags will be hidden.",
+    "You can leave the beta any time from settings or tapping on a beta badge, like the one above.": "You can leave the beta any time from settings or tapping on a beta badge, like the one above.",
     "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)",
@@ -2459,6 +2460,8 @@
     "Revoke permissions": "Revoke permissions",
     "Move left": "Move left",
     "Move right": "Move right",
+    "Spaces is a beta feature": "Spaces is a beta feature",
+    "Tap for more info": "Tap for more info",
     "Beta": "Beta",
     "Leave the beta": "Leave the beta",
     "Join the beta": "Join the beta",
@@ -2595,7 +2598,7 @@
     "Error whilst fetching joined communities": "Error whilst fetching joined communities",
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",
-    "Communities are changing to spaces": "Communities are changing to spaces",
+    "Communities are changing to Spaces": "Communities are changing to Spaces",
     "You’re all caught up": "You’re all caught up",
     "You have no visible notifications.": "You have no visible notifications.",
     "%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.": "%(brand)s failed to get the protocol list from the homeserver. The homeserver may be too old to support third party networks.",

src/settings/Settings.tsx

@@ -136,8 +136,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         controller: new ReloadOnChangeController(),
         betaInfo: {
             title: _td("Spaces"),
-            caption: _td("Spaces are a new way to group people and rooms for fun, " +
+            caption: _td("Spaces are new ways to group rooms and people."),
-                "work, yourself or anything in between."),
             disclaimer: (enabled) => {
                 if (enabled) {
                     return <>
@@ -150,9 +149,12 @@ export const SETTINGS: {[setting: string]: ISetting} = {
                 }
 
                 return <>
-                    <p>{ _t("%(brand)s will reload with Spaces enabled, communities and custom tags hidden.", {
+                    <p>{ _t("%(brand)s will reload with Spaces enabled. " +
+                        "Communities and custom tags will be hidden.", {
                         brand: SdkConfig.get().brand,
                     }) }</p>
+                    <p>{ _t("You can leave the beta any time from settings or tapping on a beta badge, " +
+                        "like the one above.") }</p>
                     <p>{ _t("Beta available for web, desktop and Android. " +
                         "Some features may be unavailable on your homeserver.") }</p>
                 </>;