diff --git a/src/fonts.scss b/src/fonts.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a6910ed3b4cc81f5bc2480531bc92f7f9348bfea
--- /dev/null
+++ b/src/fonts.scss
@@ -0,0 +1,17 @@
+/* latin-ext */
+@font-face {
+ font-family: 'Zilla Slab';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Zilla Slab'), local('ZillaSlab-Regular'), url('./fonts/zilla-slab_latin-ext.woff2') format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+ font-family: 'Zilla Slab';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Zilla Slab'), local('ZillaSlab-Regular'), url('./fonts/zilla-slab_latin.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/src/fonts/zilla-slab_latin-ext.woff2 b/src/fonts/zilla-slab_latin-ext.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..60259781df0d9a85f8e9f88ef7ed3dcf8b69b12b
Binary files /dev/null and b/src/fonts/zilla-slab_latin-ext.woff2 differ
diff --git a/src/fonts/zilla-slab_latin.woff2 b/src/fonts/zilla-slab_latin.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..18b5d6e8f5f3bd37ffe7effde8414b7ff3ed0409
Binary files /dev/null and b/src/fonts/zilla-slab_latin.woff2 differ
diff --git a/src/react-components/name-entry-panel.js b/src/react-components/name-entry-panel.js
index fb0022efc02e8694d11beafdef83198399db94bf..3e39a73669358cc2f7b682c31b8eb7ed5281d27b 100644
--- a/src/react-components/name-entry-panel.js
+++ b/src/react-components/name-entry-panel.js
@@ -30,18 +30,27 @@ export default class NameEntryPanel extends Component {
render () {
return (
- <div>
- Name Entry
- <form onSubmit={this.saveName}>
- <label>Name:
- <input
- value={this.state.name} onChange={(e) => this.setState({name: e.target.value})}
- required pattern={SCHEMA.definitions.profile.properties.display_name.pattern}
- title="Alphanumerics and hyphens. At least 3 characters, no more than 32"
- ref={inp => this.nameInput = inp}/>
- </label>
- <input type="submit" value="Save" />
- </form>
+ <div class="name-entry">
+ <div class="name-entry__box name-entry__box--darkened">
+ <div class="name-entry__subtitle">
+ Set your identity
+ </div>
+ <div class="name-entry__form">
+ <form onSubmit={this.saveName}>
+ <div class="name-entry__form-fields">
+ <input
+ class="name-entry__form-field-text"
+ value={this.state.name} onChange={(e) => this.setState({name: e.target.value})}
+ required pattern={SCHEMA.definitions.profile.properties.display_name.pattern}
+ title="Alphanumerics and hyphens. At least 3 characters, no more than 32"
+ ref={inp => this.nameInput = inp}/>
+ <div class="name-entry__form-submit">
+ <input type="submit" value="Save" />
+ </div>
+ </div>
+ </form>
+ </div>
+ </div>
</div>
);
}
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 3d079883e9a1c09e26af057f31abe2b0dc2f18b7..4d897fa8afa80828827a7229ad8fe03cc0adf227 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -107,7 +107,9 @@ class UIRoot extends Component {
secondsRemainingBeforeAutoExit: Infinity,
sceneLoaded: false,
- exited: false
+ exited: false,
+
+ showingNameEntry: true
}
componentDidMount() {
@@ -401,12 +403,10 @@ class UIRoot extends Component {
const dialogContents = this.isWaitingForAutoExit() ?
(<AutoExitWarning secondsRemaining={this.state.secondsRemainingBeforeAutoExit} onCancel={this.endAutoExitTimer} />) :
(
- <div>
+ <div class="entry-dialog">
{entryPanel}
{micPanel}
{audioSetupPanel}
-
- <NameEntryPanel store={this.props.store}></NameEntryPanel>
</div>
);
@@ -415,13 +415,20 @@ class UIRoot extends Component {
'ui-dialog--darkened': this.state.entryStep !== ENTRY_STEPS.finished
});
+ const dialogBoxClassNames = classNames({
+ 'ui-dialog-box': true,
+ 'ui-dialog-box--lighter': this.state.showingNameEntry
+ });
+
return !this.state.exited ?
(
<div className={dialogClassNames}>
{
this.state.entryStep !== ENTRY_STEPS.finished &&
(
- <div className='ui-dialog-box'>
+ <div className={dialogBoxClassNames}>
+ {this.state.showingNameEntry && (
+ <NameEntryPanel store={this.props.store}></NameEntryPanel>)}
{dialogContents}
</div>
)
diff --git a/src/room.scss b/src/room.scss
index 5ff47a719ddd7ed8441532d86593657694c25250..94ead21b3efefe4f521027e2c07d59fc286c4802 100644
--- a/src/room.scss
+++ b/src/room.scss
@@ -1,5 +1,11 @@
-$dark-transparent: rgba(0, 0, 0, 0.5);
-$darker-transparent: rgba(0, 0, 0, 0.7);
+@import 'src/fonts';
+
+$dark-transparent: rgba(0, 0, 0, 0.4);
+$darker-transparent: rgba(0, 0, 0, 0.6);
+$grey-text: rgba(192, 192, 192, 1.0);
+$light-text: rgba(240, 240, 240, 1.0);
+$dark-grey: rgba(128, 128, 128, 1.0);
+$darker-grey: rgba(64, 64, 64, 1.0);
.a-enter-vr {
display: none;
@@ -12,6 +18,7 @@ $darker-transparent: rgba(0, 0, 0, 0.7);
left: 0;
position: absolute;
pointer-events: none;
+ font-family: 'Zilla Slab', sans-serif;
color: white;
}
@@ -38,6 +45,11 @@ $darker-transparent: rgba(0, 0, 0, 0.7);
border-radius: 4px;
pointer-events: auto;
padding: 10px;
+ position: relative;
+}
+
+.ui-dialog-box--lighter {
+ background-color: $dark-transparent;
}
.loading-panel {
@@ -50,3 +62,59 @@ $darker-transparent: rgba(0, 0, 0, 0.7);
top: auto;
bottom: 20px;
}
+
+.entry-dialog {
+ display: flex;
+}
+
+.name-entry {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+}
+
+.name-entry__box {
+ width: 80%;
+ height: 20%;
+ border-radius: 4px;
+ max-height: 200px;
+ display: flex;
+ flex-direction: column;
+}
+
+.name-entry__box--darkened {
+ background-color: $darker-transparent;
+}
+
+.name-entry__subtitle {
+ width: 100%;
+ text-align: center;
+ color: $grey-text;
+}
+
+.name-entry__form-fields {
+ display: flex;
+ justify-content: flex-start;
+}
+
+.name-entry__form-field-text {
+ color: $light-text;
+ font-size: 0.8em;
+ background-color: $darker-grey;
+ border: 3px solid white;
+ box-sizing: border-box;
+ border-radius: 12px;
+ line-height: 2.0em;
+ padding-left: 1.25em;
+ padding-right: 1.25em;
+ font-family: 'Zilla Slab', sans-serif;
+}
+
+.name-entry__form-submit {
+ flex: 1 1 30%;
+}
diff --git a/webpack.config.js b/webpack.config.js
index 7626670bf1877522b6f5d7a087c56612d031a5bc..ead5eb9228be58fa9fc96f4ea593e58cbb8357aa 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -166,7 +166,7 @@ const config = {
})
},
{
- test: /\.(png|jpg|gif|glb|ogg)$/,
+ test: /\.(png|jpg|gif|glb|ogg|woff2)$/,
use: {
loader: "file-loader",
options: {