diff --git a/src/assets/images/hub-preview-white.png b/src/assets/images/hub-preview-white.png
index dd83924b037ec54eafc7ca63a14557ed4b44c473..a2ce192fa9022afdd85511302595798a49b178ad 100755
Binary files a/src/assets/images/hub-preview-white.png and b/src/assets/images/hub-preview-white.png differ
diff --git a/src/assets/images/moz-logo-black.png b/src/assets/images/moz-logo-black.png
new file mode 100755
index 0000000000000000000000000000000000000000..f6d2ae4a012a798acc5030c9d462c2bf20366c38
Binary files /dev/null and b/src/assets/images/moz-logo-black.png differ
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index ebead263f24b472f915effd1887f6b4db8460ed8..7e576ef24cccf6930defb09e2686f80ee7ec8f4b 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -1,5 +1,20 @@
@import 'shared';
+:local(.placeholder) {
+ width: 690px;
+ height: 460px;
+
+ @media (max-width: 768px) , (max-height: 715px) {
+ width: 525px;
+ height: 350px;
+ }
+
+ @media (max-width: 520px) {
+ width: 90%;
+ height: 300px;
+ }
+}
+
:local(.create-panel) {
display: flex;
flex-direction: column;
@@ -50,13 +65,11 @@
font-size: 1.5em;
width: 100%;
text-align: center;
- margin-top: 275px;
}
@media (max-width: 520px) {
padding-left: 15px;
font-size: 1.2em;
- margin-top: 165px;
}
}
@@ -81,7 +94,6 @@
width: 700px;
height: 100%;
box-sizing: border-box;
- border: 3px solid white;
border-radius: 14px;
overflow: hidden;
pointer-events: none;
@@ -101,6 +113,7 @@
height: 100%;
object-fit: cover;
position: absolute;
+ filter: contrast(0.9) brightness(1.1);
}
:local(.labels) {
@@ -109,8 +122,7 @@
height: 100%;
top: 0;
left: 0;
- background: rgb(2,0,36);
- background: linear-gradient(0deg, rgba(2,0,36,0.324) 0%, rgba(1,0,11,0.1189076314119398) 60%, rgba(0,0,0,0.3242297602634804) 100%);
+ background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.2) 100%);
:local(.custom-button) {
@extend %default-font;
@@ -200,30 +212,6 @@
}
}
}
-
- :local(.link-code) {
- position: absolute;
-
- bottom: -36px;
-
- @media (max-height: 715px) {
- bottom: -28px;
- }
-
- width: 100%;
- text-shadow: 0px 0px 4px rgba(0, 0, 0, 1.0);
- text-align: center;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
-
- :local(.link) {
- color: white;
- font-size: 1.2em;
- text-decoration-color: $light-grey;
- }
- }
}
}
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index ed742c0a9b1f707031b5cdb417ca727dcd4a3b5a..4423a6f3401e3ce52a4aa5e9a5eef4ce9722ccc4 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -11,8 +11,8 @@ $header-section-width: 350px;
body {
margin: 0;
padding: 0;
- background-color: black;
- color: white;
+ background-color: white;
+ color: black;
}
.home-root {
@@ -47,20 +47,22 @@ body {
position: fixed;
top: 0;
left: 0;
- opacity: 0.5;
+ opacity: 0.3;
min-width: 100%;
- filter: saturate(1.5);
min-height: 100%;
z-index: 1;
}
:local(.header-content) {
padding: 0.5em 1.75em 0.5em 1.75em;
- background-color: $darkest-transparent;
+ background-color: white;
min-height: 65px;
height: 65px;
display: flex;
- border-bottom: 1px solid $darkest-grey;
+
+ @media (max-width: 768px) {
+ display: none;
+ }
:local(.title-and-nav) {
display: flex;
@@ -97,12 +99,16 @@ body {
align-items: center;
a {
- margin: 0px 16px 0px 0px;
- color: white;
+ margin: 0px 32px 0px 0px;
+ color: black;
font-weight: bold;
font-size: 1.4em;
text-decoration: none;
}
+
+ a:first-child {
+ margin-left: 16px;
+ }
}
}
@@ -118,123 +124,121 @@ body {
min-height: 740px;
display: flex;
flex-direction: column;
+ justify-content: center;
position: relative;
@media (max-width: 768px) {
- padding: 1em 1.5em 1em 1.5em;
- justify-content: space-around;
+ padding: 0px;
min-height: 490px;
}
:local(.attribution) {
position: absolute;
right: 12px;
- bottom: 12px;
- color: $grey-text;
- text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
- opacity: 0.5;
+ top: 12px;
+ color: white;
+ opacity: 0.8;
a {
- color: $grey-text;
+ font-weight: bold;
+ color: white;
+ }
+
+ @media (max-width: 768px) {
+ display: none;
}
}
:local(.container) {
- padding-top: 2vw;
- padding-left: 2.1em;
- padding-right: 2.1em;
- flex: 2;
- text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
- @media (max-height: 720px) {
- padding-bottom: 0px;
- flex: 1;
+ :local(.logo) {
+ width: 350px;
}
+ padding: 2em;
+
:local(.title) {
- font-size: 4vw;
+ text-align: center;
+ font-size: 1.5em;
font-weight: bold;
-
- @media (max-width: 768px) , (max-height: 715px) {
- font-size: 1.9em;
- }
-
- @media (max-width: 768px) {
- text-align: center;
- }
-
- @media (min-width: 1824px) {
- font-size: 4.5em;
- }
- }
-
- :local(.subtitle) {
- font-size: 2.5vw;
- font-weight: lighter;
- color: $light-text;
-
- @media (max-width: 768px) , (max-height: 715px) {
- font-size: 1.1em;
- margin-top: 0.2em;
- }
-
- @media (max-width: 768px) {
- text-align: center;
- }
-
- @media (min-width: 1824px) {
- font-size: 2.8em;
- }
-
- @media (max-height: 720px) {
- display: none;
- }
}
}
:local(.create) {
padding: 2.1em;
padding-bottom: 3.5vw;
- flex: 4;
position: relative;
@media (max-width: 768px) {
padding: 0.5em;
}
}
+
+ :local(.join-button) {
+ display: flex;
+ justify-content: center;
+
+ a {
+ margin-top: 12px;
+ @extend %action-button;
+ }
+ }
}
:local(.footer-content) {
padding: 1em 2.25em 1em 2.25em;
- background-color: $darkest-transparent;
+
+ @media (max-width: 768px) {
+ padding: 1em;
+ }
+
min-height: 80px;
display: flex;
- border-top: 2px solid #242424;
align-items: center;
- justify-content: center;
+ justify-content: flex-end;
:local(.links) {
text-align: center;
- color: $dark-grey;
+ color: black;
display: flex;
flex-direction: column;
+ :local(.moz-logo) {
+ width: 172px;
+ height: 49px;
+ margin-left: 18px;
+
+ @media (max-width: 768px) {
+ width: 113px;
+ height: 32px;
+ margin: 0;
+ }
+ }
+
:local(.top) {
display: flex;
justify-content: space-between;
+ align-items: flex-end;
}
:local(.link) {
- color: $grey-text;
- margin-left: 8px;
- margin-right: 8px;
+ color: black;
+ font-weight: bold;
+ margin: 0 18px;
+
+ @media (max-width: 768px) {
+ display: none;
+ }
}
:local(.bottom) {
margin-top: 8px;
a {
- color: $grey-text;
+ color: black;
}
}
}
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index e81425cfe23065ac4316cfe52cd433e429dd550b..bcbd9deb52d5da4c9c8c05b56ab881c706219dfb 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -9,7 +9,7 @@ $light-grey: lightgrey;
$dark-grey: rgba(128, 128, 128, 1.0);
$darker-grey: rgba(64, 64, 64, 1.0);
$darkest-grey: rgba(32, 32, 32, 1.0);
-$action-color: #2F80ED;
+$action-color: #FF3464;
%unselectable {
-moz-user-select: none;
@@ -19,11 +19,11 @@ $action-color: #2F80ED;
}
%default-font {
- font-family: 'Zilla Slab', sans-serif;
+ font-family: 'Open Sans', sans-serif;
}
%glass-text {
- font-family: 'Zilla Slab', sans-serif;
+ font-family: 'Open Sans', sans-serif;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1.0);
color: white;
}
@@ -48,13 +48,21 @@ $action-color: #2F80ED;
%big-action-button {
@extend %default-font;
outline-style: none;
- font-size: 2em;
+ font-size: 18px;
font-weight: bold;
cursor: pointer;
- border: 3px solid white;
- border-radius: 26px;
- padding: 12px 64px 12px 64px;
- background: #2F80ED;
+ border-radius: 32px;
+ border: 0;
+ width: 350px;
+ padding: 18px;
+ text-decoration: none;
+
+ @media (max-width: 768px) {
+ width: auto;
+ padding: 18px 48px;
+ }
+
+ background: #FF3464;
color: white;
display: flex;
align-items: center;
@@ -80,15 +88,16 @@ $action-color: #2F80ED;
%action-button {
@extend %default-font;
+ text-decoration: none;
outline-style: none;
font-weight: bold;
cursor: pointer;
border: 0;
border-radius: 26px;
- height: 64px;
- padding: 12px;
- background: #2F80ED;
- font-size: 1.3em;
+ padding: 18px 18px;
+
+ background: #FF3464;
+ font-size: 1em;
color: white;
display: flex;
align-items: center;
@@ -104,7 +113,7 @@ $action-color: #2F80ED;
%bottom-action-button {
@extend %bottom-button;
- background: #2F80ED;
+ background: #FF3464;
font-size: 1.3em;
}
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index 0de53b2874508c94b1a66260369a95de05e2971a..29793981ace4d45cc708dcae08fc0c84cf2d4535 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -32,10 +32,6 @@
}
}
-.blurred {
- filter: blur(5px) saturate(1.1) brightness(1.1);
-}
-
:local(.ui-dialog) {
position: absolute;
top: 0;
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index a8826193d469e1193d8f095ba6da8bdf931a5ba5..20c41fee6001dfc4c2628441b5aba4a84f8b1c2b 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -57,21 +57,20 @@
"autoexit.subtitle": "You have started another session.",
"autoexit.cancel": "CANCEL",
"home.room_create_options": "options",
- "home.room_create_button": "create a room",
+ "home.room_create_button": "Create Room",
"home.create_name.validation_warning": "Invalid name, limited to 4 to 64 characters and limited symbols.",
"home.join_us": "Join the Conversation",
+ "home.join_room": "Join Room",
"home.report_issue": "Report Issues",
- "home.source_link": "source",
- "home.about_link": "about",
+ "home.source_link": "Source",
+ "home.about_link": "About",
"home.privacy_notice": "Privacy Notice",
"home.terms_of_use": "Terms of Use",
"home.get_updates": "Get Updates",
- "home.hero_title": "A new way to get together online.",
- "home.hero_subtitle": "Laugh, play, get stuff done, or just hang out.",
+ "home.hero_title": "A new way to get together",
"home.made_with_love": "made with 🦆 by ",
"home.environment_author_by": " by ",
"home.dialog.close": "CLOSE",
- "home.have_entry_code": "have a link code?",
"mailing_list.privacy_label": "I'm okay with Mozilla handling my info as explained in",
"mailing_list.privacy_link": "this Privacy Notice",
"link.link_page_header_entry": "Enter your code:",
diff --git a/src/hub.html b/src/hub.html
index 16dd5bdade66eef08ede23d13c7e104b49847882..41940d3efd2955b8e3e15d4d8432f564660d0145 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -10,6 +10,7 @@
<link rel="shortcut icon" type="image/png" href="/favicon.ico">
<title>Get together | Hubs by Mozilla</title>
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,700" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
</head>
<body>
diff --git a/src/index.html b/src/index.html
index f7807252dc6d6756e8d95102347eeeb84e450bce..4b0e8c6f52e5b008935fa17083b7551ebbbae55f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
<title>Get together | Hubs by Mozilla</title>
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,700" rel="stylesheet">
</head>
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index 266adef27d395461ceced2a525361f38c076ae94..2e46e12fe0aeac25efa127ea487f1c655edd7550 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -6,6 +6,8 @@ import en from "react-intl/locale-data/en";
import { lang, messages } from "../utils/i18n";
import homeVideoWebM from "../assets/video/home.webm";
import homeVideoMp4 from "../assets/video/home.mp4";
+import hubLogo from "../assets/images/hub-preview-white.png";
+import mozLogo from "../assets/images/moz-logo-black.png";
import classNames from "classnames";
import { ENVIRONMENT_URLS } from "../assets/environments/environments";
import { connectToReticulum } from "../utils/phoenix-utils";
@@ -182,19 +184,17 @@ class HomeRoot extends Component {
<div className={styles.home}>
<div className={mainContentClassNames}>
<div className={styles.headerContent}>
- <div className={styles.titleAndNav} onClick={() => (document.location = "/")}>
- <div className={styles.hubs}>hubs</div>
- <div className={styles.preview}>preview</div>
+ <div className={styles.titleAndNav}>
<div className={styles.links}>
- <a href="https://github.com/mozilla/hubs" rel="noreferrer noopener">
- <FormattedMessage id="home.source_link" />
- </a>
<a
href="https://blog.mozvr.com/introducing-hubs-a-new-way-to-get-together-online/"
rel="noreferrer noopener"
>
<FormattedMessage id="home.about_link" />
</a>
+ <a href="https://github.com/mozilla/hubs" rel="noreferrer noopener">
+ <FormattedMessage id="home.source_link" />
+ </a>
</div>
</div>
<div className={styles.ident} />
@@ -211,20 +211,21 @@ class HomeRoot extends Component {
</a>
</div>
<div className={styles.container}>
+ <img className={styles.logo} src={hubLogo} />
<div className={styles.title}>
<FormattedMessage id="home.hero_title" />
</div>
- <div className={styles.subtitle}>
- <FormattedMessage id="home.hero_subtitle" />
- </div>
</div>
<div className={styles.create}>
- {this.state.environments.length > 0 && (
- <HubCreatePanel
- initialEnvironment={this.props.initialEnvironment}
- environments={this.state.environments}
- />
- )}
+ <HubCreatePanel
+ initialEnvironment={this.props.initialEnvironment}
+ environments={this.state.environments}
+ />
+ </div>
+ <div className={styles.joinButton}>
+ <a href="/link">
+ <FormattedMessage id="home.join_room" />
+ </a>
</div>
</div>
<div className={styles.footerContent}>
@@ -270,12 +271,8 @@ class HomeRoot extends Component {
>
<FormattedMessage id="home.privacy_notice" />
</a>
- </div>
- <div className={styles.bottom}>
- <div>
- <FormattedMessage id="home.made_with_love" />
- <span style={{ fontWeight: "bold", color: "white" }}>Mozilla</span>
- </div>
+
+ <img className={styles.mozLogo} src={mozLogo} />
</div>
</div>
</div>
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 0492946479fd0302d94ebfb9e20900633b000efc..40550c9a025acfeed3c29f1d42c8e37cbfef1bf2 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -162,7 +162,7 @@ class HubCreatePanel extends Component {
if (!this.state.ready) return null;
if (this.props.environments.length == 0) {
- return <div />;
+ return <div className={styles.placeholder} />;
}
const environment = this.props.environments[this.state.environmentIndex];
@@ -236,13 +236,6 @@ class HubCreatePanel extends Component {
<FormattedMessage id="home.room_create_button" />
</button>
</div>
- <div className={styles.linkCode}>
- <div>
- <a className={styles.link} href="/link" rel="nofollow">
- <FormattedMessage id="home.have_entry_code" />
- </a>
- </div>
- </div>
</div>
</div>
</form>