diff --git a/src/assets/stylesheets/audio.scss b/src/assets/stylesheets/audio.scss
index 5e3582fd4b5383a8a0cef94c73f6d2591b242a14..d73a85eddc926c4b9a2f58c21fd4a97521822fd8 100644
--- a/src/assets/stylesheets/audio.scss
+++ b/src/assets/stylesheets/audio.scss
@@ -104,7 +104,7 @@
@extend %top-subtitle;
}
- &__icon {
+ &__button-container {
flex: 10;
display: flex;
justify-content: center;
@@ -114,9 +114,16 @@
height: 111px;
}
+ &__button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
&__next {
@extend %bottom-button;
- margin: auto;
- flex: 1 1 20px;
+ padding-top: 0;
+ padding-bottom: 0;
+ flex: 1 1;
}
}
diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index bdd20d1ee7af717ac0b2808b696c85fe49c8d775..04d1bbfadcb30a3e78bb7d73f00c7b8e0061537c 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -58,6 +58,10 @@
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
+ background: none;
+ color: white;
+ border: none;
+ @extend %default-font;
&__icon {
flex: 1 1 90px;
diff --git a/src/assets/stylesheets/profile.scss b/src/assets/stylesheets/profile.scss
index 000e974bbad3aec3760eb51e9863c78755a590fc..53af72edee17d527bbffdbd73f5efb19b36dd5e6 100644
--- a/src/assets/stylesheets/profile.scss
+++ b/src/assets/stylesheets/profile.scss
@@ -55,18 +55,8 @@
}
&__form-submit {
- @extend %default-font;
- border: none;
-
- margin: 8px;
- width: 100px;
- line-height: 1.5em;
- font-size: 1.0em;
-
- background-color: transparent;
- font-weight: bold;
- color: white;
- cursor: pointer;
+ @extend %bottom-button;
+ margin: 0;
}
}
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index c2d4f013de5b853664b751400969602b356a53f9..796dc23b87193ee76e707228346087b190024202 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -17,11 +17,17 @@ $darker-grey: rgba(64, 64, 64, 1.0);
}
%bottom-button {
+ @extend %default-font;
font-size: 1em;
font-weight: bold;
margin-top: auto;
margin-bottom: 30px;
cursor: pointer;
+ border: 4px solid white;
+ border-radius: 16px;
+ padding: 12px;
+ background: none;
+ color: white;
}
%top-title {
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 1757ec61cce5b97855750537a7812efe5349a57e..9201daed28e62f6e2ac6df1ddfda5d83137f4ad0 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -26,7 +26,6 @@
"audio.grant-subtitle": "Mic access needed to be heard by others",
"audio.granted-title": "Mic permissions granted",
"audio.granted-subtitle": "You can still mute yourself in-game",
- "audio.grant-next": " ",
"audio.granted-next": "NEXT",
"exit.subtitle": "Your session has ended.",
"autoexit.title": "Auto-ending session in ",
diff --git a/src/hub.html b/src/hub.html
index 91e3f1c4f2f07e4f6c4e8aa4f355bc5c69d7428b..b4085c040feeac207db87d00ee408aefd2574058 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -3,10 +3,11 @@
<head>
<meta charset="utf-8">
- <title>moz://a duck</title>
-
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="<%= ORIGIN_TRIAL_EXPIRES %>" content="<%= ORIGIN_TRIAL_TOKEN %>">
+ <title>moz://a duck</title>
+ <link href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,700" rel="stylesheet">
+
<% if(NODE_ENV === "production") { %>
<script src="https://cdn.rawgit.com/brianpeiris/aframe/845825ae694449524c185c44a314d361eead4680/dist/aframe-master.min.js"></script>
<% } else { %>
diff --git a/src/react-components/entry-buttons.js b/src/react-components/entry-buttons.js
index 8ed8b171d6e7ec08d82d59af2c5314d9353a7910..92d0ef5ef8ccd4992d9913bfb30144fff018c0b9 100644
--- a/src/react-components/entry-buttons.js
+++ b/src/react-components/entry-buttons.js
@@ -12,7 +12,7 @@ import DaydreamEntyImg from "../assets/images/daydream_entry.svg";
const mobiledetect = new MobileDetect(navigator.userAgent);
const EntryButton = props => (
- <div className="entry-button" onClick={props.onClick}>
+ <button className="entry-button" onClick={props.onClick}>
<img src={props.iconSrc} className="entry-button__icon" />
<div className="entry-button__label">
<div className="entry-button__label__contents">
@@ -25,7 +25,7 @@ const EntryButton = props => (
{props.subtitle && <div className="entry-button__subtitle">{props.subtitle}</div>}
</div>
</div>
- </div>
+ </button>
);
EntryButton.propTypes = {
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 8f8906ad2dba161ace6fae67e8cc9bfb8dfd1df7..f0d364dbc6ac3c148391e17135b5cffce0938c5b 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -588,26 +588,22 @@ class UIRoot extends Component {
id={this.state.entryStep == ENTRY_STEPS.mic_grant ? "audio.grant-subtitle" : "audio.granted-subtitle"}
/>
</div>
- <div className="mic-grant-panel__icon">
+ <div className="mic-grant-panel__button-container">
{this.state.entryStep == ENTRY_STEPS.mic_grant ? (
- <img
- onClick={this.onMicGrantButton}
- src="../assets/images/mic_denied.png"
- srcSet="../assets/images/mic_denied@2x.png 2x"
- />
+ <button className="mic-grant-panel__button" onClick={this.onMicGrantButton}>
+ <img src="../assets/images/mic_denied.png" srcSet="../assets/images/mic_denied@2x.png 2x" />
+ </button>
) : (
- <img
- onClick={this.onMicGrantButton}
- src="../assets/images/mic_granted.png"
- srcSet="../assets/images/mic_granted@2x.png 2x"
- />
+ <button className="mic-grant-panel__button" onClick={this.onMicGrantButton}>
+ <img src="../assets/images/mic_granted.png" srcSet="../assets/images/mic_granted@2x.png 2x" />
+ </button>
)}
</div>
- <div className="mic-grant-panel__next" onClick={this.onMicGrantButton}>
- <FormattedMessage
- id={this.state.entryStep == ENTRY_STEPS.mic_grant ? "audio.grant-next" : "audio.granted-next"}
- />
- </div>
+ {this.state.entryStep == ENTRY_STEPS.mic_granted && (
+ <button className="mic-grant-panel__next" onClick={this.onMicGrantButton}>
+ <FormattedMessage id="audio.granted-next" />
+ </button>
+ )}
</div>
) : null;
@@ -711,9 +707,9 @@ class UIRoot extends Component {
</span>
</div>
)}
- <div className="audio-setup-panel__enter-button" onClick={this.onAudioReadyButton}>
+ <button className="audio-setup-panel__enter-button" onClick={this.onAudioReadyButton}>
<FormattedMessage id="audio.enter-now" />
- </div>
+ </button>
</div>
) : null;