From d5a863f1d0d235c8439f71180766b2212fff1c10 Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Tue, 10 Apr 2018 17:13:11 -0700
Subject: [PATCH] unify button styling. fix fonts
---
src/assets/stylesheets/audio.scss | 13 ++++++++---
src/assets/stylesheets/entry.scss | 4 ++++
src/assets/stylesheets/profile.scss | 14 ++----------
src/assets/stylesheets/shared.scss | 6 +++++
src/assets/translations.data.json | 1 -
src/hub.html | 5 +++--
src/react-components/entry-buttons.js | 4 ++--
src/react-components/ui-root.js | 32 ++++++++++++---------------
8 files changed, 41 insertions(+), 38 deletions(-)
diff --git a/src/assets/stylesheets/audio.scss b/src/assets/stylesheets/audio.scss
index 5e3582fd4..d73a85edd 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 bdd20d1ee..04d1bbfad 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 000e974bb..53af72ede 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 c2d4f013d..796dc23b8 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 1757ec61c..9201daed2 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 91e3f1c4f..b4085c040 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 8ed8b171d..92d0ef5ef 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 8f8906ad2..f0d364dbc 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;
--
GitLab