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 ? {imageAltText} : } {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 && } }