Merge pull request #3687 from mozilla/redesign/landing-page

Room UI Redesign: Landing Page and Static Page Styling
Hubs-Foundation · Jan 9, 2021 · d665e39 · d665e39
2 parents 52bc345 + e3c188d
commit d665e39
Show file tree

Hide file tree

Showing 45 changed files with 642 additions and 523 deletions.
diff --git a/src/assets/locales/ja.json b/src/assets/locales/ja.json
@@ -43,7 +43,7 @@
   "header.sign-out": "サインアウト",
   "header.signed-in-as": "ログインしました {email}",
   "header.source": "ソース",
-  "home-page.add-to-discord": "Discordに <a>{appName} Bot</a> を追加する",
+  "home-page.add-to-discord": "Discordに {appName} Bot を追加する",
   "home-page.have-code": "ルームコードをお持ちですか？",
   "hubs-cloud-page.get-started": "クイックスタートガイド",
   "hubs-cloud-page.hero-button.enterprise": "Get Hubs Cloud Enterprise",

diff --git a/src/assets/locales/pt.json b/src/assets/locales/pt.json
@@ -42,7 +42,7 @@
   "header.sign-in": "Entrar",
   "header.sign-out": "Sair",
   "header.signed-in-as": "Entrou como {email}",
-  "home-page.add-to-discord": "Adicionar o <a>Bot {appName}</a> ao Discord",
+  "home-page.add-to-discord": "Adicionar o Bot {appName} ao Discord",
   "home-page.have-code": "Tém um código de sala?",
   "hubs-cloud-page.get-started": "Guia rápido",
   "hubs-cloud-page.hero-button.enterprise": "Adquira o Hubs Cloud Enterprise",

diff --git a/src/assets/locales/ru.json b/src/assets/locales/ru.json
@@ -46,7 +46,7 @@
   "header.sign-out": "Выйти из системы",
   "header.signed-in-as": "Учётная запись {email}",
   "header.source": "Источник",
-  "home-page.add-to-discord": "Добавить <a>бот {appName}</a> в Discord",
+  "home-page.add-to-discord": "Добавить бот {appName} в Discord",
   "home-page.have-code": "У вас есть код комнаты?",
   "hubs-cloud-page.get-started": "Руководство для быстрого старта",
   "hubs-cloud-page.hero-button.enterprise": "Настроить корпоративный Hubs Cloud",

diff --git a/src/assets/locales/zh.json b/src/assets/locales/zh.json
@@ -46,7 +46,7 @@
   "header.sign-out": "退出",
   "header.signed-in-as": "登录为 {email}",
   "header.source": "来源",
-  "home-page.add-to-discord": "添加 <a>{appName} 自动程序</a> 到Discord",
+  "home-page.add-to-discord": "添加 {appName} 自动程序 到Discord",
   "home-page.have-code": "持有房间号?",
   "hubs-cloud-page.get-started": "快速开始指南",
   "hubs-cloud-page.hero-button.enterprise": "获得企业 Hubs Cloud",

diff --git a/src/assets/stylesheets/cloud.scss b/src/assets/stylesheets/cloud.scss
@@ -1,8 +1,15 @@
-@import 'root-vars';
-@import 'shared';
+@use "../../react-components/styles/theme.scss";
 
 :local(.hero) {
-  background-color: #F3F3F3;
+  background-color: theme.$recessed-bg;
+
+  h1 {
+    margin-bottom: 20px;
+  }
+
+  iframe {
+    margin-bottom: 20px;
+  }
 
   & > section {
     display: flex; 
@@ -17,55 +24,33 @@
     height: 240px;
     width: 100%;
 
-    @media(min-width: $breakpoint-sm) {
+    @media(min-width: theme.$breakpoint-sm) {
       height: 300px;
     }
 
-    @media(min-width: $breakpoint-md) {
+    @media(min-width: theme.$breakpoint-md) {
       height: 360px;
     }
 
-    @media(min-width: $breakpoint-lg) {
+    @media(min-width: theme.$breakpoint-lg) {
       height: 100%;
     }
   }
 
-  @media(min-width: $breakpoint-lg) {
+  @media(min-width: theme.$breakpoint-lg) {
     margin-right: 40px;
   }
 }
 
 :local(.hero-content) {
   flex: 10;
 
-  :local(.primary-button) {
-    margin-top: 20px;
-
-    @media(min-width: $breakpoint-lg) {
-      margin-top: 0;
-    }
-  }
-}
-
-:local(.get-started) {
-  margin-top: 20px;
-
-  a {
-    color: var(--home-text-color);
+  & > * {
+    margin-bottom: theme.$spacing-md;
   }
-}
 
-:local(.primary-button) {
-  @extend %action-button;
-  height: 64px;
-  border-radius: 4px;
-  background-color: $action-color;
-  font-size: 1.2em;
-  max-width: 300px;
-
-  @media(min-width: $breakpoint-md) {
-    font-size: 1em;
-    height: 56px;
+  & > :last-child {
+    margin-bottom: 0;
   }
 }
 
@@ -74,43 +59,59 @@
   padding: 5px;
 
   & > * {
-    margin: 5px;
+    margin: theme.$spacing-md;
+  }
+
+  :local(.center) {
+    & > * {
+      margin-bottom: theme.$spacing-md;
+    }
+
+    & > :last-child {
+      margin-bottom: 0;
+    }
   }
 }
 
 // Utility Classes
 :local(.hide-lg-down) {
-  @media(max-width: $breakpoint-lg) {
+  @media(max-width: theme.$breakpoint-lg) {
     display: none;
   }
 }
 
 :local(.hide-lg-up) {
-  @media(min-width: $breakpoint-lg) {
+  @media(min-width: theme.$breakpoint-lg) {
     display: none;
   }
 }
 
 :local(.row) {
   display: flex;
   justify-content: space-evenly !important;
+
+  & > * {
+    margin: theme.$spacing-sm;
+  }
 }
 
 :local(.col-lg) {
   flex-direction: column;
 
-  @media(min-width: $breakpoint-lg) {
+  @media(min-width: theme.$breakpoint-lg) {
     flex-direction: row;
   }
 }
 
 :local(.center) {
-  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
 }
 
 :local(.center-lg) {
-  @media(max-width: $breakpoint-lg) {
+  @media(max-width: theme.$breakpoint-lg) {
     text-align: center;
     align-items: center;
   }

diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
@@ -28,11 +28,11 @@ $breakpoint-xxl: 1600px; // Extra Large Desktops
 }
 
 %default-font {
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 %glass-text {
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: var(--panel-text-color);
 }
 

diff --git a/src/assets/stylesheets/support.scss b/src/assets/stylesheets/support.scss
@@ -1,5 +1,5 @@
 :local(.support-main) {
-  font-family: 'Open Sans', sans-serif;
+  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   z-index: 10000;
   position: absolute;
   width: 100%;

diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
@@ -144,7 +144,6 @@ body.vr-mode {
   span {
     font-size: 22px;
     font-weight: bold;
-    font-family: 'Open Sans', sans-serif;
   }
   @media(min-width: 501px) {
     width: 90px;

diff --git a/src/assets/stylesheets/whats-new.scss b/src/assets/stylesheets/whats-new.scss
@@ -1,58 +1,25 @@
-@import 'shared';
-@import 'loader';
-
-body {
-  margin: 0;
-  padding: 0;
-  @extend %default-font;
-}
-
-html, body, #ui-root, .container {
-  height: 100%;
-}
-#ui-root > div {
-  display: flex;
-  flex-direction: column;
-}
-.container {
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.logo {
-  height: 3em;
-  margin-left: 1.5em;
-  vertical-align: middle;
-}
+@use "../../react-components/styles/theme.scss";
 
 .main {
-  background: linear-gradient(to bottom, #ecfaff 0, white 30em);
   display: flex;
   justify-content: center;
   flex: 1;
+
+  h1 {
+    font-size: theme.$font-size-xl;
+    text-align: center;
+    margin-bottom: 20px;
+  }
 }
 
 .content {
   padding: 1em;
-  width: 45em;
+  width: 100%;
+  max-width: 45em;
   display: flex;
   flex-direction: column;
 }
 
-.loader-wrap {
-  align-self: center;
-}
-
-h1 {
-  text-align: center;
-}
-
 .note-header { 
   display: flex; 
   @media (max-width: 768px) {
@@ -63,10 +30,11 @@ h1 {
   margin: 0;
 }
 .title a:link, .title a:active .title a:hover, .title a:visited {
-  color: var(--home-text-color);
+  color: theme.$black;
 }
 .title {
   flex: 1;
+  margin-bottom: 16px;
   @media (max-width: 768px) {
     align-self: flex-start;
   }
@@ -82,8 +50,14 @@ h1 {
 
 .body {
   margin-left: 120px;
+
+  p {
+    margin-bottom: 16px;
+  }
+
   @media (max-width: 768px) {
     margin-left: 0;
   }
+
   img { width: 100%; }
 }
diff --git a/src/avatar.html b/src/avatar.html
@@ -9,7 +9,7 @@
 
     <link rel="shortcut icon" type="image/png" href="/favicon.ico">
     <title>Avatar</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
     <script>
     if (navigator.doNotTrack !== "1") {
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/src/cloud.html b/src/cloud.html
@@ -18,7 +18,7 @@
     <meta name="twitter:url" value="https://hubs.mozilla.com/cloud">
     <link rel="shortcut icon" type="image/png" href="/favicon.ico">
     <title>Get Hubs Cloud</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&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>

diff --git a/src/cloud.js b/src/cloud.js
@@ -7,6 +7,8 @@ import { WrappedIntlProvider } from "./react-components/wrapped-intl-provider";
 import { PageContainer } from "./react-components/layout/PageContainer";
 import { AuthContextProvider } from "./react-components/auth/AuthContext";
 import Store from "./storage/store";
+import { Container } from "./react-components/layout/Container";
+import { Button } from "./react-components/input/Button";
 
 import registerTelemetry from "./telemetry";
 import { FormattedMessage } from "react-intl";
@@ -17,7 +19,7 @@ function HubsCloudPage() {
   return (
     <PageContainer>
       <div className={styles.hero}>
-        <section className={styles.colLg}>
+        <Container className={styles.colLg}>
           <div className={classNames(styles.hideLgUp, styles.centerLg)}>
             <h1>
               <FormattedMessage id="hubs-cloud-page.page-heading" defaultMessage="Introducing Hubs Cloud" />
@@ -49,25 +51,25 @@ function HubsCloudPage() {
               <FormattedMessage id="hubs-cloud-page.hero-cta" defaultMessage="Get it today on the AWS Marketplace" />
             </h3>
             <div className={classNames(styles.row, styles.colLg, styles.centerLg)}>
-              <a className={styles.primaryButton} href="https://aws.amazon.com/marketplace/pp/B084RZH56R">
+              <Button as="a" preset="blue" href="https://aws.amazon.com/marketplace/pp/B084RZH56R">
                 <FormattedMessage id="hubs-cloud-page.hero-button.personal" defaultMessage="Get Hubs Cloud Personal" />
-              </a>
-              <a className={styles.primaryButton} href="https://aws.amazon.com/marketplace/pp/B084WNGRRP">
+              </Button>
+              <Button as="a" preset="blue" href="https://aws.amazon.com/marketplace/pp/B084WNGRRP">
                 <FormattedMessage
                   id="hubs-cloud-page.hero-button.enterprise"
                   defaultMessage="Get Hubs Cloud Enterprise"
                 />
-              </a>
+              </Button>
             </div>
             <div className={classNames(styles.getStarted, styles.center)}>
-              <a href="https://hubs.mozilla.com/docs/hubs-cloud-aws-quick-start.html">
+              <Button as="a" preset="transparent" href="https://hubs.mozilla.com/docs/hubs-cloud-aws-quick-start.html">
                 <FormattedMessage id="hubs-cloud-page.get-started" defaultMessage="Quick Start Guide" />
-              </a>
+              </Button>
             </div>
           </div>
-        </section>
+        </Container>
       </div>
-      <section className={classNames(styles.features, styles.colLg, styles.centerLg)}>
+      <Container className={classNames(styles.features, styles.colLg, styles.centerLg)}>
         <div className={styles.center}>
           <h3>
             <FormattedMessage id="hubs-cloud-page.features.diy-events-title" defaultMessage="Do-It-Yourself Events" />
@@ -108,7 +110,7 @@ function HubsCloudPage() {
             />
           </p>
         </div>
-      </section>
+      </Container>
     </PageContainer>
   );
 }

diff --git a/src/discord.html b/src/discord.html
@@ -18,7 +18,7 @@
     <meta name="twitter:url" value="https://hubs.mozilla.com/discord">
     <link rel="shortcut icon" type="image/png" href="/favicon.ico">
     <title>Hubs by Mozilla for Discord</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&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>