diff --git a/src/react-components/room/MoreMenuPopover.js b/src/react-components/room/MoreMenuPopover.js
index 2798b28da4..43a45a0c57 100644
--- a/src/react-components/room/MoreMenuPopover.js
+++ b/src/react-components/room/MoreMenuPopover.js
@@ -9,6 +9,14 @@ import { useIntl, defineMessage } from "react-intl";
function MoreMenuItem({ item, closePopover }) {
const Icon = item.icon;
+ const imageAlt =
+ item.icon?.alt &&
+ defineMessage({
+ id: "{label}.{alt}",
+ defaultMessage: "{alt}"
+ });
+ const intl = useIntl();
+ const imageAltText = imageAlt && intl.formatMessage(imageAlt, { label: item.label, alt: item.icon.alt });
return (
@@ -19,12 +27,12 @@ function MoreMenuItem({ item, closePopover }) {
target={item.target || "_blank"}
rel="noopener noreferrer"
>
-
+ {item.icon?.src ? : }
{item.label}
) : (
)}
@@ -36,7 +44,10 @@ MoreMenuItem.propTypes = {
item: PropTypes.shape({
href: PropTypes.string,
target: PropTypes.string,
- icon: PropTypes.elementType.isRequired,
+ icon: PropTypes.oneOfType([
+ PropTypes.elementType,
+ PropTypes.shape({ src: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), alt: PropTypes.string })
+ ]).isRequired,
label: PropTypes.node.isRequired,
onClick: PropTypes.func
}).isRequired,
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 1fab62aac3..a0bdb669fb 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -70,6 +70,7 @@ import { ReactComponent as VRIcon } from "./icons/VR.svg";
import { ReactComponent as LeaveIcon } from "./icons/Leave.svg";
import { ReactComponent as EnterIcon } from "./icons/Enter.svg";
import { ReactComponent as InviteIcon } from "./icons/Invite.svg";
+import hubsLogo from "../assets/images/hubs-logo.png";
import { PeopleSidebarContainer, userFromPresence } from "./room/PeopleSidebarContainer";
import { ObjectListProvider } from "./room/hooks/useObjectList";
import { ObjectsSidebarContainer } from "./room/ObjectsSidebarContainer";
@@ -1193,7 +1194,14 @@ class UIRoot extends Component {
label: ,
icon: SettingsIcon,
onClick: () => this.setState({ showPrefs: true })
- }
+ },
+ (this.props.breakpoint === "sm" || this.props.breakpoint === "md") &&
+ isLockedDownDemo && {
+ id: "see-plans",
+ label: ,
+ icon: { src: hubsLogo, alt: "Logo" },
+ href: "https://hubs.mozilla.com/#subscribe"
+ }
].filter(item => item)
},
{
@@ -1588,7 +1596,6 @@ class UIRoot extends Component {
scene={this.props.scene}
store={this.props.store}
/>
-
{isLockedDownDemo && }
>
}