diff --git a/src/assets/images/account.svg b/src/assets/images/account.svg
index a39a815fd97c9157c2de36ea7fd7fc98888cb58f..f3edafbfaceda74d3ec551e0a146a63843d8177e 100755
--- a/src/assets/images/account.svg
+++ b/src/assets/images/account.svg
@@ -4,7 +4,7 @@
<g id="Canvas" transform="translate(-42 105)">
<g id="account">
<g id="Vector">
-<use xlink:href="#path0_fill" transform="translate(42 -105)" fill="#FFFFFF"/>
+<use xlink:href="#path0_fill" transform="translate(42 -105)" fill="#FF3464"/>
</g>
</g>
</g>
diff --git a/src/assets/stylesheets/audio.scss b/src/assets/stylesheets/audio.scss
index b5c786a0ade69b9c4208dab9b95a4ed15f840115..7b784427543ab8e9baab0179930aef73474890f1 100644
--- a/src/assets/stylesheets/audio.scss
+++ b/src/assets/stylesheets/audio.scss
@@ -43,14 +43,16 @@
@extend %glass-text;
appearance: none;
- background-color: rgba(64, 64, 64, 0.2);
+ background-color: white;
-moz-appearance: none;
-webkit-appearance: none;
+ border: 1px solid #e2e2e2;
padding: 6px;
+ font-weight: bold;
+ font-size: 0.9em;
padding-left: 15px;
padding-right: 30px;
color: white;
- font-size: 1.1em;
width: 90%;
height: 50px;
}
diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index 04f15e84f90df3851181ea9b1362016ae0d5ebf3..b2b3235b9bed50c0bc6376132f3c7c11ec4c38f7 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -9,6 +9,7 @@
:local(.collapse) {
@extend %fa-icon-button;
+ color: black;
position: absolute;
top: 0px;
right: 12px;
@@ -18,6 +19,7 @@
:local(.expand) {
@extend %fa-icon-button;
+ color: white;
position: absolute;
top: -48px;
right: 12px;
@@ -28,7 +30,7 @@
:local(.entry-button) {
@extend %action-button;
- width: 256px;
+ width: 272px;
display: flex;
text-align: left;
flex-direction: row;
@@ -48,9 +50,10 @@
:local(.label) {
@extend %glass-text;
+ color: white;
flex: 10 1 auto;
margin-left: 20px;
- font-size: 0.8em;
+ font-size: 1.0em;
display: flex;
flex-direction: column;
justify-content: center;
@@ -61,7 +64,7 @@
}
:local(.subtitle) {
- font-size: 0.7em;
+ font-size: 0.8em;
font-weight: normal;
color: $light-text;
}
@@ -81,6 +84,8 @@
@extend %top-title;
@extend %glass-text;
margin-bottom: 12px;
+ margin-right: 8px;
+ margin-left: 8px;
}
:local(.center) {
@@ -92,6 +97,8 @@
margin-top: 4px;
margin-bottom: 16px;
@extend %default-font;
+ font-size: 1.1em;
+ color: $action-color;
cursor: pointer;
font-weight: bold;
display: flex;
@@ -153,6 +160,6 @@
text-align: center;
margin-top: 10px;
cursor: pointer;
- color: $grey-text;
+ color: $dark-grey-text;
}
}
diff --git a/src/assets/stylesheets/invite-dialog.scss b/src/assets/stylesheets/invite-dialog.scss
index 4a42f4a83fdb8e69deb518b96ecdde84334896e0..65f264d52a37d8eb6a500a090b029d8c5371abe7 100644
--- a/src/assets/stylesheets/invite-dialog.scss
+++ b/src/assets/stylesheets/invite-dialog.scss
@@ -11,7 +11,8 @@
padding: 14px;
text-align: center;
position: relative;
- font-size: 1.1em;
+ font-size: 1.0em;
+ color: white;
a {
color: white;
@@ -42,7 +43,6 @@
:local(.code) {
color: black;
- font-family: monospace;
font-weight: bold;
text-decoration: none;
font-size: 2.0em;
diff --git a/src/assets/stylesheets/link-dialog.scss b/src/assets/stylesheets/link-dialog.scss
index 8b83edc03296e1a4c03dc3b73248f7ee5b005f16..d137a31fb2fffea16af362eb4a6adcb999081d4e 100644
--- a/src/assets/stylesheets/link-dialog.scss
+++ b/src/assets/stylesheets/link-dialog.scss
@@ -2,9 +2,10 @@
:local(.dialog) {
position: absolute;
+ color: white;
width: 100%;
height: 100%;
- background-color: rgba(0, 0, 0, 0.85);
+ background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
@@ -17,6 +18,11 @@
font-size: 2em;
font-weight: bold;
margin-bottom: 12px;
+ text-align: center;
+
+ @media(max-height: 420px) {
+ display: none;
+ }
}
:local(.contents) {
@@ -50,7 +56,6 @@
:local(.code) {
color: black;
- font-family: monospace;
font-weight: bold;
text-decoration: none;
font-size: 2.5em;
@@ -59,13 +64,17 @@
}
:local(.imageHeader) {
- width: 175px;
- height: 175px;
+ width: 100px;
+ height: 100px;
background-color: white;
- border-radius: 100px;
+ border-radius: 50px;
fill: black;
margin-bottom: 24px;
- padding-right: 6px;
+ padding-right: 4px;
+
+ @media(max-height: 420px) {
+ display: none;
+ }
}
:local(.keep-open) {
diff --git a/src/assets/stylesheets/loader.scss b/src/assets/stylesheets/loader.scss
index 74ccb011d068d9013c78f61817d4c4d1f24053ab..ff7e4098dca76956fe35013765d158930c3b6c5f 100644
--- a/src/assets/stylesheets/loader.scss
+++ b/src/assets/stylesheets/loader.scss
@@ -11,7 +11,7 @@
position: absolute;
top: 0;
left: 0;
- background-color: black;
+ background-color: #d7e5ec;
width: 100%;
height: 100%;
display: flex;
@@ -21,8 +21,8 @@
}
.loading-panel__logo {
- width: 165px;
- height: 33px;
+ width: 247px;
+ height: 57px;
margin: 20px 0;
}
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index 1787895d29fcb96e0935596f85dea8f8a7c722ff..aff94690786fa837eab42c310b8a7e042f9df90b 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -1,4 +1,5 @@
$light-transparent: rgba(0, 0, 0, 0.2);
+$white-transparent: rgba(255, 255, 255, 0.90);
$dark-transparent: rgba(0, 0, 0, 0.4);
$darker-transparent: rgba(0, 0, 0, 0.6);
$darkest-transparent: rgba(0, 0, 0, 0.9);
@@ -24,8 +25,7 @@ $action-color: #FF3464;
%glass-text {
font-family: 'Open Sans', sans-serif;
- text-shadow: 0px 0px 4px rgba(0, 0, 0, 1.0);
- color: white;
+ color: black;
}
%glass-icon {
@@ -119,7 +119,7 @@ $action-color: #FF3464;
}
%top-title {
- font-size: 1.4em;
+ font-size: 1.5em;
font-weight: bold;
}
@@ -169,7 +169,7 @@ $action-color: #FF3464;
display: block;
background: none;
border: none;
- color: white;
+ color: black;
cursor: pointer;
font-size: 0.8em;
outline-style: none;
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index 29793981ace4d45cc708dcae08fc0c84cf2d4535..410fd51bfceef00b08e6471c7354443e6473860b 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -9,7 +9,6 @@
left: 0;
position: absolute;
pointer-events: none;
- color: white;
:local(.help-icon) {
@extend %fa-icon-button;
@@ -19,12 +18,12 @@
right: 14px;
i {
- background: rgba(33, 33, 33, 0.5);
+ background: white;
border-radius: 36px;
display: inline-block;
font-size: 22px;
vertical-align: sub;
- line-height: 38px;
+ line-height: 34px;
border: 0;
width: 36px;
height: 36px;
@@ -43,14 +42,10 @@
display: flex;
justify-content: flex-end;
align-items: center;
-
- &--darkened {
- background-color: $dark-transparent;
- }
}
:local(.ui-dialog-box-contents) {
- background-color: $light-transparent;
+ background-color: $white-transparent;
border-radius: 18px 18px 0 0;
width: 100%;
max-width: 600px;
@@ -147,15 +142,17 @@
align-items: center;
justify-content: flex-end;
font-size: 1.3em;
- text-shadow: 0px 0px 4px rgba(0, 0, 0, 1.0);
- -webkit-filter: drop-shadow( 0px 0px 3px #606060 );
- filter: drop-shadow( 0px 0px 3px #606060 );
+ background-color: white;
+ border-radius: 24px;
+ font-weight: bold;
+ padding: 8px 18px;
@media (min-width: 769px) and (min-height: 421px) {
flex: 1;
}
@media (max-width: 768px) , (max-height: 420px) {
- margin: 16px 8px;
+ margin: 16px 0;
+ padding: 2px 8px;
}
:local(.occupant-count) {
margin: 0 12px;
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 20c41fee6001dfc4c2628441b5aba4a84f8b1c2b..80437e73c44ebd1ae0f24e0badfcb058378b0e9a 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -5,7 +5,7 @@
"auth.verified": "Your email has been verified!",
"auth.spoke-verified": "You email has been verified! {br} You can now close this browser tab and return to Spoke.",
"entry.enter-room-title": "Lobby",
- "entry.enter-room": "enter room",
+ "entry.enter-room": "Enter Room",
"entry.screen-prefix": "Enter on ",
"entry.desktop-screen": "Screen",
"entry.mobile-screen": "Phone",
@@ -37,10 +37,10 @@
"profile.avatar-selector.loading": "Loading Avatars...",
"profile.terms_of_use": "Terms of Use",
"profile.privacy_notice": "Privacy Notice",
- "audio.title": "Test your audio",
+ "audio.title": "Audio Setup",
"audio.subtitle-desktop": "Confirm HMD speaker output",
"audio.subtitle-mobile": "Earphones are recommended",
- "audio.enter-now": "enter now",
+ "audio.enter-now": "Enter Now",
"audio.hmd-mic-warning": "Your HMD mic is not chosen",
"audio.grant-title": "Grant mic permissions",
"audio.grant-subtitle": "Mic access needed to be heard by others",
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index 7812ec5556ad70934d07c1c0e769c1403c96d242..74577ff1ec0291d8bd14665fe0a7054c8a0f70e3 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -8,7 +8,6 @@ import uiStyles from "../assets/stylesheets/ui-root.scss";
const TopHUD = ({ muted, frozen, onToggleMute, onToggleFreeze, onSpawnPen, onSpawnCamera }) => (
<div className={cx(styles.container, styles.top, styles.unselectable)}>
<div className={cx(uiStyles.uiInteractive, styles.panel, styles.left)}>
- <div className={cx(styles.iconButton)} />
<div
className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })}
title={muted ? "Unmute Mic" : "Mute Mic"}
diff --git a/src/react-components/help-dialog.js b/src/react-components/help-dialog.js
index dc0ba425a3f4e9cd12db05c503280fc1c19ce3d7..2d528cc625d837c08730db9e91c93760b67452de 100644
--- a/src/react-components/help-dialog.js
+++ b/src/react-components/help-dialog.js
@@ -12,24 +12,16 @@ export default class HelpDialog extends Component {
Use your controller's action button to teleport from place to place. If it has a trigger, use it to
pick up objects.
</p>
- <p style={{ textAlign: "center" }}>
- In VR, <b>look up</b> to find your menu:
- <img
- className="info-dialog__help__hud"
- src="../assets/images/help-hud.png"
- srcSet="../assets/images/help-hud@2x.png 2x"
- />
+ <p>
+ In VR, <b>look up</b> to find your menu.
</p>
<p>
The <b>Mic Toggle</b> mutes your mic.
</p>
<p>
- The <b>Pause/Resume Toggle</b> pauses all other avatars. You can then block them from having further
+ The <b>Pause/Resume Toggle</b> pauses all other avatars and lets you block others or remove objects.
interactions with you.
</p>
- <p>
- The <b>Bubble Toggle</b> hides avatars that enter your personal space.
- </p>
<p className="dialog__box__contents__links">
<a target="_blank" rel="noopener noreferrer" href="https://github.com/mozilla/hubs/blob/master/TERMS.md">
<FormattedMessage id="profile.terms_of_use" />
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 336ec8ee52c6654c24d1ef16fbf95e169cdc9798..c3dbfac78fccf556d92dea6c5f689bf4f90a7463 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -627,7 +627,7 @@ class UIRoot extends Component {
</div>
</div>
- <img className="loading-panel__logo" src="../assets/images/logo.svg" />
+ <img className="loading-panel__logo" src="../assets/images/hub-preview-light-no-shadow.png" />
</div>
</IntlProvider>
);