feat: "See Plans" CTA for demo room

src/index.html

@@ -12,20 +12,23 @@
     <meta name="mobile-web-app-capable" content="yes">
     <!-- Web-App Manifest (https://w3c.github.io/manifest/) -->
     <link rel="manifest" href="/manifest.webmanifest">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap" rel="stylesheet"> 
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600&family=Space+Grotesk:wght@700&display=swap" rel="stylesheet"> 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@700&display=swap"
+        rel="stylesheet">
 
     <!-- Google Analytics -->
     <!-- NOTE GA tracking is disabled by default. You'll need to set the GA_TRACKING_ID build variable to enable it. -->
     <script>
-    if (navigator.doNotTrack !== "1") {
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-    }
+        if (navigator.doNotTrack !== "1") {
+            (function (i, s, o, g, r, a, m) {
+                i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+                    (i[r].q = i[r].q || []).push(arguments)
+                }, i[r].l = 1 * new Date(); a = s.createElement(o),
+                    m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+        }
     </script>
 </head>
 
@@ -34,4 +37,4 @@
     <div id="home-root" class="home-root"></div>
 </body>
 
-</html>
+</html>

src/react-components/layout/Toolbar.js

@@ -7,9 +7,9 @@ import styleUtils from "../styles/style-utils.scss";
 export function Toolbar({ className, left, center, right, ...rest }) {
   return (
     <div className={classNames(styles.toolbar, className)} {...rest}>
-      <div className={classNames(styles.content, styles.leftContent, styleUtils.showLg)}>{left}</div>
-      <div className={classNames(styles.content, styles.centerContent)}>{center}</div>
-      <div className={classNames(styles.content, styles.rightContent, styleUtils.showLg)}>{right}</div>
+      <div className={classNames(styles.content, styles.left_content, styleUtils.showLg)}>{left}</div>
+      <div className={classNames(styles.content, styles.center_content)}>{center}</div>
+      <div className={classNames(styles.content, styles.right_content, styleUtils.showLg)}>{right}</div>
     </div>
   );
 }

src/react-components/layout/Toolbar.scss

@@ -1,11 +1,12 @@
-@use '../styles/theme';
+@use "../styles/theme";
 
 :local(.toolbar) {
   height: 96px;
   display: flex;
   padding: 12px;
   background-color: theme.$background1-color;
   border-top: 1px solid theme.$border1-color;
+  position: relative;
 
   @media (min-width: theme.$breakpoint-lg) {
     padding: 12px 24px;
@@ -17,16 +18,25 @@
   display: flex;
   flex: 1;
   justify-content: space-around;
+  align-items: center;
+  gap: 0 24px;
 
   @media (min-width: theme.$breakpoint-lg) {
     flex: 0;
+  }
+}
 
-    & > * {
-      margin-right: 24px;
-    }
+:local(.center_content) {
+  position: absolute;
+  display: flex;
+  width: calc(100% - 48px);
+  justify-content: center;
+  z-index: -1;
 
-    &:last-child {
-      margin-right: 0px;
-    }
+  @media (max-width: theme.$breakpoint-lg) {
+    width: 100%;
+    position: relative;
+    justify-content: space-around;
+    gap: unset;
   }
 }

src/react-components/room/MoreMenuPopover.js

@@ -9,6 +9,21 @@ import { useIntl, defineMessage } from "react-intl";
 
 function MoreMenuItem({ item, closePopover }) {
   const Icon = item.icon;
+  const imageAlt =
+    Icon?.alt &&
+    defineMessage({
+      id: "{label}.{alt}",
+      defaultMessage: "{alt}"
+    });
+  const intl = useIntl();
+  const imageAltText = imageAlt && intl.formatMessage(imageAlt, { label: item.label, alt: Icon.alt });
+
+  const Row = (
+    <>
+      {Icon?.src ? <img src={Icon.src} alt={imageAltText} /> : <Icon />}
+      <span>{item.label}</span>
+    </>
+  );
 
   return (
     <li onClick={closePopover}>
@@ -19,13 +34,11 @@ function MoreMenuItem({ item, closePopover }) {
           target={item.target || "_blank"}
           rel="noopener noreferrer"
         >
-          <Icon />
-          <span>{item.label}</span>
+          {Row}
         </a>
       ) : (
         <button className={styles.moreMenuItemTarget} onClick={event => item.onClick(item, event)}>
-          <Icon />
-          <span>{item.label}</span>
+          {Row}
         </button>
       )}
     </li>
@@ -36,7 +49,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,

src/react-components/room/components/SeePlansCTA/SeePlansCTA.scss

@@ -0,0 +1,52 @@
+:local(.see_plans_button) {
+  line-height: 24px;
+  position: relative;
+  border-radius: 20px;
+  border: solid transparent 2px;
+  background: var(--background1-color);
+  background-clip: padding-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  color: var(--color-interaction-primary);
+  width: fit-content;
+  min-width: 140px;
+  height: 40px;
+  padding: 2px 16px;
+  font-weight: 600;
+  font-size: 14px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    z-index: -1;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    background: var(--color-brand-cool);
+    margin: -2px;
+  }
+
+  &:hover {
+    color: var(--color-interaction-primary-hover);
+    background: var(--color-interaction-secondary-hover);
+    background-clip: padding-box;
+
+    &:before {
+      background: var(--color-interaction-primary-hover);
+    }
+  }
+}
+
+:local(.logo) {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+  margin-right: 10px;
+}

src/react-components/room/components/SeePlansCTA/SeePlansCTA.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { FormattedMessage, defineMessage, useIntl } from "react-intl";
+import styles from "./SeePlansCTA.scss";
+import hubsLogo from "../../../../assets/images/hubs-logo.png";
+
+const logoAlt = defineMessage({
+  id: "see-plans-cta.logo",
+  defaultMessage: "Logo"
+});
+
+const SeePlansCTA = () => {
+  const intl = useIntl();
+  const logoAltText = intl.formatMessage(logoAlt);
+
+  return (
+    <a className={styles.see_plans_button} href="https://hubs.mozilla.com/#subscribe" target="_blank">
+      <img className={styles.logo} src={hubsLogo} alt={logoAltText} />
+      <FormattedMessage id="see-plans-cta.button" defaultMessage={"See Plans"} />
+    </a>
+  );
+};
+
+export default SeePlansCTA;

src/react-components/styles/global.scss

@@ -300,6 +300,11 @@ body[data-theme="light"],
   --color-interactions-menu: #000000;
   --color-interactions-menu-hover: #2f2f2f;
   --color-interactions-menu-inactive: #757575;
+
+  /**
+  BRAND
+  **/
+  --color-brand-cool: linear-gradient(90deg, #6ae1d9 0%, #9898ff 100%);
 }
 
 // PLACE HOLDER FOR DARK VALUES
@@ -404,6 +409,11 @@ body[data-theme="dark"] {
   --color-interactions-menu: #ffffff;
   --color-interactions-menu-hover: #2f2f2f;
   --color-interactions-menu-inactive: #757575;
+
+  /**
+  BRAND
+  **/
+  --color-brand-cool: linear-gradient(90deg, #6ae1d9 0%, #9898ff 100%);
 }
 
 /**

src/react-components/styles/theme.scss

@@ -10,60 +10,60 @@ $transparent: transparent;
 $transparent-hover: rgba(0, 0, 0, 0.08);
 $transparent-pressed: rgba(0, 0, 0, 0.12);
 
-$white: #FFFFFF;
-$white-hover: #E7E7E7;
-$white-pressed: #DBDBDB;
+$white: #ffffff;
+$white-hover: #e7e7e7;
+$white-pressed: #dbdbdb;
 
-$lightgrey: #E7E7E7;
-$lightgrey-hover: #F5F5F5;
-$lightgrey-pressed: #DBDBDB;
+$lightgrey: #e7e7e7;
+$lightgrey-hover: #f5f5f5;
+$lightgrey-pressed: #dbdbdb;
 
-$grey: #BBBBBB;
-$grey-hover: #C7C7C7;
-$grey-pressed: #ADADAD;
+$grey: #bbbbbb;
+$grey-hover: #c7c7c7;
+$grey-pressed: #adadad;
 
 $darkgrey: #868686;
 $darkgrey-hover: #949494;
-$darkgrey-pressed: #7A7A7A;
+$darkgrey-pressed: #7a7a7a;
 
 $black: #000000;
 $black-hover: #404040;
-$black-pressed: #7A7A7A;
+$black-pressed: #7a7a7a;
 
-$red: #F5325C;
-$red-hover: #F64B70;
-$red-pressed: #F41A49;
+$red: #f5325c;
+$red-hover: #f64b70;
+$red-pressed: #f41a49;
 
-$orange: #FF8500;
-$orange-hover: #FF911A;
-$orange-pressed: #E67800;
+$orange: #ff8500;
+$orange-hover: #ff911a;
+$orange-pressed: #e67800;
 
-$green: #7ED320;
-$green-hover: #8CDF2F;
-$green-pressed: #72BE1D;
+$green: #7ed320;
+$green-hover: #8cdf2f;
+$green-pressed: #72be1d;
 
-$blue: #007AB8;
-$blue-hover: #008BD1;
-$blue-pressed: #00699E;
+$blue: #007ab8;
+$blue-hover: #008bd1;
+$blue-pressed: #00699e;
 
-$purple: #7854F6;
-$purple-hover: #8C6EF7;
-$purple-pressed: #663DF5;
+$purple: #7854f6;
+$purple-hover: #8c6ef7;
+$purple-pressed: #663df5;
 
 $recessed-bg: #f9f9f9;
 
-$yellow: #FFC000;
+$yellow: #ffc000;
 
 // Brand Colors
-$spoke-primary-color: #2F80ED;
-$twitter-primary-color: #6FC0FD;
-$slack-primary-color: #611F69;
-$discord--primary-color: #7289DA;
+$spoke-primary-color: #2f80ed;
+$twitter-primary-color: #6fc0fd;
+$slack-primary-color: #611f69;
+$discord--primary-color: #7289da;
 
 // Discord Bot Page Colors
-$discord-bg-color: #2A2D32;
+$discord-bg-color: #2a2d32;
 $discord-text1-color: white;
-$discord-text2-color: #A3A3A3;
+$discord-text2-color: #a3a3a3;
 $discord-text3-color: rgb(127, 127, 127);
 $discord-text4-color: rgb(64, 64, 64);
 
@@ -271,4 +271,3 @@ $tile-button-bg-color: var(--tile-button-bg-color);
 $tile-button-bg-color-hover: var(--tile-button-bg-color-hover);
 $tile-button-bg-color-pressed: var(--tile-button-bg-color-pressed);
 $tile-button-border-color: var(--tile-button-border-color);
-