Design iterations based on PR feedback

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,