diff --git a/.stylelintrc b/.stylelintrc
new file mode 100644
index 0000000000000000000000000000000000000000..806eeab4265711a76a9ce0eca891ea5d97b7c372
--- /dev/null
+++ b/.stylelintrc
@@ -0,0 +1,8 @@
+{
+ "extends": "stylelint-config-recommended-scss",
+ "rules": {
+ "indentation": 2,
+ "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["local"] }],
+ "no-descending-specificity": false
+ }
+}
diff --git a/Jenkinsfile b/Jenkinsfile
index 5951a3a73926717b32d52927973e298a09cff5c6..b5b5499fe3d17d3c5adf65f63e181ee15d72a74b 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -24,7 +24,7 @@ pipeline {
stages {
stage('pre-build') {
steps {
- sh 'rm -rf ./build ./tmp'
+ sh 'rm -rf ./dist ./tmp'
}
}
diff --git a/package.json b/package.json
index bd90eeb5bbed5981f3626bac0b61537a2b099dff..09ec5d4fae8461b61b25f679bd66933a338a92a1 100644
--- a/package.json
+++ b/package.json
@@ -19,19 +19,20 @@
"doc": "node ./scripts/doc/build.js",
"prettier": "prettier --write '*.js' 'src/**/*.js'",
"lint:js": "eslint '*.js' 'scripts/**/*.js' 'src/**/*.js'",
- "lint:html": "node ./scripts/lint-html.js 'src/**/*.html'",
+ "lint:html": "htmlhint 'src/**/*.html'",
"lint": "npm run lint:js && npm run lint:html"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.2",
"@fortawesome/free-solid-svg-icons": "^5.2.0",
"@fortawesome/react-fontawesome": "^0.1.0",
+ "aframe": "github:aframevr/aframe#1be48d9204f0919d6362ef4c4dfa955e4ef64439",
"aframe-billboard-component": "^1.0.0",
"aframe-extras": "github:MozillaReality/aframe-extras#feature/precompute-nav-mesh",
"aframe-input-mapping-component": "github:mozillareality/aframe-input-mapping-component#hubs/master",
"aframe-motion-capture-components": "github:mozillareality/aframe-motion-capture-components#1ca616fa67b627e447b23b35a09da175d8387668",
"aframe-physics-extras": "^0.1.3",
- "aframe-physics-system": "github:mozillareality/aframe-physics-system#fb58518f0d0b3a422096957674c9eaf873d9a42e",
+ "aframe-physics-system": "github:mozillareality/aframe-physics-system#ecc5c9c533d6d9c71f8d6453ab961ed074d44b1c",
"aframe-rounded": "^1.0.3",
"aframe-slice9-component": "^1.0.0",
"aframe-teleport-controls": "github:mozillareality/aframe-teleport-controls#hubs/master",
@@ -80,7 +81,6 @@
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.1.0",
"htmlhint": "^0.9.13",
- "lodash": "^4.17.5",
"node-sass": "^4.7.2",
"prettier": "^1.7.0",
"rimraf": "^2.6.2",
@@ -88,6 +88,9 @@
"selfsigned": "^1.10.2",
"shelljs": "^0.8.1",
"style-loader": "^0.20.2",
+ "stylelint": "^9.4.0",
+ "stylelint-config-recommended-scss": "^3.2.0",
+ "stylelint-scss": "^3.2.0",
"url-loader": "^1.0.1",
"webpack": "^4.16.2",
"webpack-cli": "^2.0.9",
diff --git a/scripts/hab-build-and-push.sh b/scripts/hab-build-and-push.sh
index 4c08106ba6ed167062d29e0fe739f3cbf28f37e8..a9290dff3223a3825898bc013addd115c5d12cae 100755
--- a/scripts/hab-build-and-push.sh
+++ b/scripts/hab-build-and-push.sh
@@ -21,10 +21,13 @@ rm /usr/bin/env
ln -s "$(hab pkg path core/coreutils)/bin/env" /usr/bin/env
hab pkg install -b core/coreutils core/bash core/node core/git core/aws-cli
+# todo: consider more elegant ways to accomplish this
+cp scripts/default.env .env
+
npm ci --verbose --no-progress
npm run build
mkdir dist/pages
mv dist/*.html dist/pages
-aws s3 sync --acl public-read --cache-control "max-age=31556926" build/assets "$TARGET_S3_URL/assets"
-aws s3 sync --acl public-read --cache-control "no-cache" --delete build/pages "$TARGET_S3_URL/pages/latest"
+aws s3 sync --acl public-read --cache-control "max-age=31556926" dist/assets "$TARGET_S3_URL/assets"
+aws s3 sync --acl public-read --cache-control "no-cache" --delete dist/pages "$TARGET_S3_URL/pages/latest"
diff --git a/scripts/lint-html.js b/scripts/lint-html.js
deleted file mode 100644
index d8891e836d3e9ed9cf0a8b7dea0aee107188a6fe..0000000000000000000000000000000000000000
--- a/scripts/lint-html.js
+++ /dev/null
@@ -1,36 +0,0 @@
-#!/usr/bin/env node
-
-const { promisify } = require("util");
-const fs = require("fs");
-const mkdtemp = promisify(fs.mkdtemp);
-const path = require("path");
-const os = require("os");
-const shell = require("shelljs");
-
-(async function() {
- function lintFile(tempDir, arg, file) {
- const out = path.join(tempDir, file);
- shell.mkdir("-p", path.dirname(out));
- shell.sed(/<%.+%>/, "", file).to(out);
- const result = shell.exec(`node_modules/.bin/htmlhint ${arg} --config=.htmlhintrc ${out}`);
- return result.code;
- }
-
- let result = 0;
- if (process.argv.length > 2) {
- const tempDir = await mkdtemp(path.join(os.tmpdir(), "lint-html-"));
- let files;
- let arg = "";
- if (process.argv.length === 4) {
- arg = process.argv[2];
- files = process.argv[3];
- } else {
- files = process.argv[2];
- }
- const results = shell.ls(files).map(lintFile.bind(null, tempDir, arg));
- result = results.reduce((a, r) => a + r, 0);
- shell.rm("-r", tempDir);
- }
-
- shell.exit(result);
-})();
diff --git a/src/assets/hud/create_object-hover.png b/src/assets/hud/create_object-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..3936231f84148e546ce366987e47f4667012f765
Binary files /dev/null and b/src/assets/hud/create_object-hover.png differ
diff --git a/src/assets/hud/create_object.png b/src/assets/hud/create_object.png
new file mode 100644
index 0000000000000000000000000000000000000000..af63116b547ba073bb97d95ff2e24e3cec5dd0ae
Binary files /dev/null and b/src/assets/hud/create_object.png differ
diff --git a/src/assets/hud/tooltip.9.png b/src/assets/hud/tooltip.9.png
old mode 100755
new mode 100644
diff --git a/src/assets/images/daydream_entry.svg b/src/assets/images/daydream_entry.svg
index dc91f66a5e722e7fa4356b23c8b5da25ea58e87d..1b61b29ffe41f915c27ab8e6d42fed323ce96530 100755
--- a/src/assets/images/daydream_entry.svg
+++ b/src/assets/images/daydream_entry.svg
@@ -1,77 +1,41 @@
-<svg width="94" height="94" viewBox="0 0 94 94" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>daydream_entry</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(-659 -395)">
-<g id="daydream_entry">
-<g id="Oval Copy">
-<use xlink:href="#path0_fill" transform="translate(661 397)" fill="#D8D8D8" fill-opacity="0.01"/>
-<use xlink:href="#path1_stroke" transform="translate(661 397)" fill="#FFFFFF"/>
-</g>
-<g id="daydream logo">
-<g id="change this to change color">
-<use xlink:href="#path2_fill" transform="translate(682.904 416.825)" fill="url(#paint2_radial)"/>
-</g>
-<g id="white gradients">
-<g id="Path 2 Copy 11" opacity="0.65">
-<use xlink:href="#path3_fill" transform="translate(682.931 423.817)" fill="url(#paint3_radial)"/>
-</g>
-<g id="Path 2 Copy 6" opacity="0.65">
-<use xlink:href="#path4_fill" transform="matrix(0.497686 -0.867357 0.864683 0.502317 679 452.35)" fill="url(#paint4_radial)"/>
-</g>
-<g id="Path 2 Copy 7" opacity="0.65">
-<use xlink:href="#path5_fill" transform="matrix(-0.497686 -0.867357 0.864683 -0.502317 701.592 470)" fill="url(#paint5_radial)"/>
-</g>
-<g id="Path 2 Copy 8" opacity="0.65">
-<use xlink:href="#path6_fill" transform="matrix(-1 1.23223e-16 -1.21711e-16 -1 728.052 459.16)" fill="url(#paint6_radial)"/>
-</g>
-<g id="Path 2 Copy 9" opacity="0.65">
-<use xlink:href="#path7_fill" transform="matrix(-0.497686 0.867357 -0.864683 -0.502317 732 430.682)" fill="url(#paint7_radial)"/>
-</g>
-<g id="Path 2 Copy 10" opacity="0.65">
-<use xlink:href="#path8_fill" transform="matrix(0.497686 0.867357 -0.864683 0.502317 709.534 413)" fill="url(#paint8_radial)"/>
-</g>
-</g>
-</g>
-</g>
-</g>
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88.5 45C88.5 69.0244 69.0244 88.5 45 88.5C20.9756 88.5 1.5 69.0244 1.5 45C1.5 20.9756 20.9756 1.5 45 1.5C69.0244 1.5 88.5 20.9756 88.5 45Z" fill="#2F80ED" stroke="white" stroke-width="3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0352 16.2517L24.0362 16.2536L29.7039 12.0451L24.0352 16.2517ZM33.2408 9.42045L33.3011 9.37578C32.06 1.60484 24.3347 -1.25267 19.4698 0.495649C16.7573 1.47041 14.5183 4.04674 14.868 7.7953C15.6821 8.10795 16.5948 8.56465 17.536 9.16258C16.8441 8.73008 16.1155 8.34044 15.352 7.99818C15.3281 7.98729 15.3024 7.97584 15.2753 7.96409L15.2316 7.94517L15.1892 7.92717C15.0808 7.88136 14.9644 7.83424 14.8737 7.79756L16.0569 19.2312L16.0547 19.2311L14.8688 7.80232C7.55981 4.99833 1.0708 10.1695 0.143126 15.283C-0.374147 18.134 0.798705 21.4164 4.19989 22.986C4.29376 22.9102 4.39099 22.8341 4.49145 22.7579C4.39184 22.8342 4.284 22.92 4.20044 22.9868L14.6263 27.6703L4.20117 22.9903C-1.8667 27.9573 -0.632447 36.2375 3.30481 39.6027C5.49817 41.4773 8.87268 41.9886 11.9222 39.8159C11.9226 39.8182 11.9229 39.8205 11.9233 39.8228C13.1672 47.5898 20.8544 50.7252 25.7183 48.9773C28.4307 48.0025 30.636 45.3177 30.2863 41.5692L30.2842 41.5684L29.1584 30.1621C29.9004 30.1975 30.6449 30.1873 31.3873 30.131C30.6648 30.1875 29.9228 30.2008 29.1659 30.1629L30.2872 41.5648C37.5962 44.3688 44.1041 39.1928 45.0319 34.0793C45.5486 31.2308 44.3566 28.0236 40.9621 26.4526L40.9681 26.4478L40.9768 26.4518C47.0447 21.4848 45.8285 13.2045 41.8912 9.8394C39.6967 7.9637 36.3506 7.2043 33.2998 9.38105L33.2996 9.37947L33.2408 9.42045ZM11.8336 39.0404C11.7841 38.4644 11.762 37.8917 11.7664 37.3237C11.7582 37.9294 11.7823 38.5047 11.8336 39.0404ZM13.5902 29.5318C13.8549 28.9848 14.1464 28.451 14.4634 27.9321C14.1392 28.4578 13.8491 28.9924 13.5902 29.5318ZM22.9946 35.9856C22.3098 35.117 21.691 34.1657 21.1791 33.1383L21.1803 33.1375C21.6982 34.1405 22.3046 35.0942 22.9946 35.9856ZM29.8655 41.3963L29.8961 41.4097L29.9335 41.426C29.4347 41.2141 28.9065 40.9503 28.3627 40.6368C28.8473 40.9107 29.3484 41.1643 29.8655 41.3963ZM40.5527 26.7652C39.4503 27.5638 38.2872 28.2194 37.0853 28.7352C38.4524 28.1575 39.6294 27.4643 40.5527 26.7652ZM33.2643 14.5439L33.2563 14.5952L33.2476 14.6505C33.3387 14.0502 33.4002 13.4419 33.4306 12.8275C33.4058 13.3863 33.3538 13.9605 33.2643 14.5439ZM33.327 9.67726C33.3475 9.88878 33.3664 10.1061 33.383 10.3291C33.3741 10.2272 33.3643 10.1252 33.3537 10.0231C33.3511 9.99919 33.3485 9.97062 33.3459 9.93886L33.3433 9.90513L33.3386 9.8408L33.3318 9.74559L33.327 9.67726ZM23.8401 15.8842C23.3004 14.8945 22.6726 13.955 21.9626 13.08C22.6559 13.925 23.2943 14.8602 23.8401 15.8842ZM15.604 19.2154C14.4546 19.1897 13.3005 19.2735 12.1589 19.469C13.2774 19.2655 14.4367 19.1677 15.604 19.2154ZM5.24286 22.2272C5.18664 22.2647 5.13061 22.3025 5.07471 22.3407C5.03424 22.3684 4.99383 22.3963 4.95349 22.4243C4.88074 22.4749 4.80829 22.5261 4.73602 22.578C4.69299 22.6088 4.65002 22.6399 4.60718 22.6712L4.60419 22.6734C4.80511 22.5245 5.01837 22.3754 5.24286 22.2272Z" transform="translate(21.9045 19.8255)" fill="url(#paint0_radial)"/>
+<path opacity="0.65" fill-rule="evenodd" clip-rule="evenodd" d="M16.0295 12.229L14.8425 0.790123C7.53357 -2.01386 1.04458 3.15736 0.116862 8.2708C-0.400378 11.1218 0.772477 14.4042 4.17365 15.9738C6.59782 14.0154 11.2827 11.8803 16.0295 12.229Z" transform="translate(21.9307 26.8173)" fill="url(#paint1_radial)"/>
+<path opacity="0.65" fill-rule="evenodd" clip-rule="evenodd" d="M16.1176 12.1553L14.9278 0.782117C7.58484 -2.00893 1.04493 3.18264 0.112904 8.27249C-0.406741 11.1103 0.84878 14.2947 4.26577 15.857C6.697 13.8998 11.129 11.9068 16.1176 12.1553Z" transform="matrix(0.497686 -0.867357 0.864683 0.502317 18 55.3502)" fill="url(#paint2_radial)"/>
+<path opacity="0.65" fill-rule="evenodd" clip-rule="evenodd" d="M16.0926 12.1431L14.9659 0.790397C7.62292 -2.00065 1.04732 3.10738 0.115298 8.19723C-0.404347 11.035 0.809439 14.2841 4.22643 15.8464C6.63823 13.9 11.2588 11.8587 16.0926 12.1431Z" transform="matrix(-0.497686 -0.867357 0.864683 -0.502317 40.5922 73)" fill="url(#paint3_radial)"/>
+<path opacity="0.65" fill-rule="evenodd" clip-rule="evenodd" d="M15.9815 12.1915L14.8602 0.789647C7.5512 -2.01434 1.04328 3.16169 0.115562 8.27513C-0.401678 11.1261 0.792924 14.3363 4.1941 15.9059C6.54445 13.9641 10.9322 11.9386 15.9815 12.1915Z" transform="translate(67.0519 62.1595) rotate(180)" fill="url(#paint4_radial)"/>
+<path opacity="0.65" fill-rule="evenodd" clip-rule="evenodd" d="M16.0794 12.148L14.9513 0.783652C7.60839 -2.0074 1.05938 3.16856 0.127349 8.25841C-0.392295 11.0962 0.632515 14.3774 4.0495 15.9397C5.24452 15.0732 6.74795 14.0894 8.52884 13.3998C10.7325 12.5465 13.2716 12.0251 16.0794 12.148Z" transform="matrix(-0.497686 0.867357 -0.864683 -0.502317 71 33.6823)" fill="url(#paint5_radial)"/>
+<path opacity="0.65" fill-rule="evenodd" clip-rule="evenodd" d="M16.0401 12.2374L14.7485 0.773668C7.40559 -2.01738 1.05413 3.26113 0.122106 8.35098C-0.397539 11.1888 0.705495 14.4131 4.12248 15.9754C6.50059 14.048 11.0115 11.9513 16.0401 12.2374Z" transform="matrix(0.497686 0.867357 -0.864683 0.502317 48.5344 16)" fill="url(#paint6_radial)"/>
<defs>
-<radialGradient id="paint2_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(59.6722 79.9412 -73.0523 65.2993 11.4524 -69.2011)">
-<stop offset="0" stop-color="#5C5C5C"/>
+<radialGradient id="paint0_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.4524 -69.2011) scale(94.3261 103.221) rotate(50.7566)">
+<stop stop-color="#808DFF"/>
<stop offset="0.412807" stop-color="#EDEDED"/>
-<stop offset="1" stop-color="#5E5E5E"/>
+<stop offset="1" stop-color="#6575FF"/>
</radialGradient>
-<radialGradient id="paint3_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.88312 -21.1218 21.1955 -4.86615 -1.78495 30.4596)">
-<stop offset="0" stop-color="#FFFFFF"/>
-<stop offset="1" stop-color="#FFFFFF" stop-opacity="0.01"/>
+<radialGradient id="paint1_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(-1.78495 30.4596) scale(21.7507 21.6751) rotate(-102.974)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.01"/>
</radialGradient>
-<radialGradient id="paint4_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.90994 -20.9673 21.3119 -4.83057 -1.79475 30.2369)">
-<stop offset="0" stop-color="#FFFFFF"/>
-<stop offset="1" stop-color="#FFFFFF" stop-opacity="0.01"/>
+<radialGradient id="paint2_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(-1.79475 30.2369) scale(21.8702 21.5166) rotate(-102.974)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.01"/>
</radialGradient>
-<radialGradient id="paint5_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.90233 -20.9533 21.2788 -4.82733 -1.79197 30.2166)">
-<stop offset="0" stop-color="#FFFFFF"/>
-<stop offset="1" stop-color="#FFFFFF" stop-opacity="0.01"/>
+<radialGradient id="paint3_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(-1.79197 30.2166) scale(21.8362 21.5022) rotate(-102.974)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.01"/>
</radialGradient>
-<radialGradient id="paint6_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.86849 -21.032 21.1319 -4.84546 -1.7796 30.3301)">
-<stop offset="0" stop-color="#FFFFFF"/>
-<stop offset="1" stop-color="#FFFFFF" stop-opacity="0.01"/>
+<radialGradient id="paint4_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(-1.7796 30.3301) scale(21.6855 21.5829) rotate(-102.974)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.01"/>
</radialGradient>
-<radialGradient id="paint7_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.8983 -21.0767 21.2613 -4.85577 -1.7905 30.3946)">
-<stop offset="0" stop-color="#FFFFFF"/>
-<stop offset="1" stop-color="#FFFFFF" stop-opacity="0.01"/>
+<radialGradient id="paint5_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(-1.7905 30.3946) scale(21.8183 21.6288) rotate(-102.974)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.01"/>
</radialGradient>
-<radialGradient id="paint8_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.88634 -21.1239 21.2094 -4.86663 -1.78613 30.4626)">
-<stop offset="0" stop-color="#FFFFFF"/>
-<stop offset="1" stop-color="#FFFFFF" stop-opacity="0.01"/>
+<radialGradient id="paint6_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(-1.78613 30.4626) scale(21.765 21.6772) rotate(-102.974)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.01"/>
</radialGradient>
-<path id="path0_fill" fill-rule="evenodd" d="M 45 90C 69.8528 90 90 69.8528 90 45C 90 20.1472 69.8528 0 45 0C 20.1472 0 0 20.1472 0 45C 0 69.8528 20.1472 90 45 90Z"/>
-<path id="path1_stroke" d="M 45 91.5C 70.6812 91.5 91.5 70.6812 91.5 45L 88.5 45C 88.5 69.0244 69.0244 88.5 45 88.5L 45 91.5ZM 91.5 45C 91.5 19.3188 70.6812 -1.5 45 -1.5L 45 1.5C 69.0244 1.5 88.5 20.9756 88.5 45L 91.5 45ZM 45 -1.5C 19.3188 -1.5 -1.5 19.3188 -1.5 45L 1.5 45C 1.5 20.9756 20.9756 1.5 45 1.5L 45 -1.5ZM -1.5 45C -1.5 70.6812 19.3188 91.5 45 91.5L 45 88.5C 20.9756 88.5 1.5 69.0244 1.5 45L -1.5 45Z"/>
-<path id="path2_fill" fill-rule="evenodd" d="M 24.0352 16.2517L 24.0362 16.2536L 29.7039 12.0451L 24.0352 16.2517ZM 33.2408 9.42045L 33.3011 9.37578C 32.06 1.60484 24.3347 -1.25267 19.4698 0.495649C 16.7573 1.47041 14.5183 4.04674 14.868 7.7953C 15.6821 8.10795 16.5948 8.56465 17.536 9.16258C 16.8441 8.73008 16.1155 8.34044 15.352 7.99818C 15.3281 7.98729 15.3024 7.97584 15.2753 7.96409L 15.2316 7.94517L 15.1892 7.92717C 15.0808 7.88136 14.9644 7.83424 14.8737 7.79756L 16.0569 19.2312L 16.0547 19.2311L 14.8688 7.80232C 7.55981 4.99833 1.0708 10.1695 0.143126 15.283C -0.374147 18.134 0.798705 21.4164 4.19989 22.986C 4.29376 22.9102 4.39099 22.8341 4.49145 22.7579C 4.39184 22.8341 4.284 22.92 4.20044 22.9868L 14.6263 27.6703L 4.20117 22.9903C -1.8667 27.9573 -0.632447 36.2375 3.30481 39.6027C 5.49817 41.4773 8.87268 41.9886 11.9222 39.8159C 11.9226 39.8182 11.9229 39.8205 11.9233 39.8228C 13.1672 47.5898 20.8544 50.7252 25.7183 48.9773C 28.4307 48.0025 30.636 45.3177 30.2863 41.5692L 30.2842 41.5684L 29.1584 30.1621C 29.9005 30.1975 30.6449 30.1873 31.3873 30.131C 30.6648 30.1875 29.9228 30.2008 29.1659 30.1629L 30.2872 41.5648C 37.5962 44.3688 44.1041 39.1928 45.0319 34.0793C 45.5486 31.2308 44.3566 28.0236 40.9621 26.4526L 40.9681 26.4478L 40.9768 26.4518C 47.0447 21.4848 45.8285 13.2045 41.8912 9.8394C 39.6967 7.9637 36.3506 7.2043 33.2998 9.38106L 33.2996 9.37947L 33.2408 9.42045ZM 11.8336 39.0404C 11.7841 38.4644 11.762 37.8917 11.7664 37.3237C 11.7582 37.9294 11.7823 38.5047 11.8336 39.0404ZM 13.5902 29.5318C 13.8549 28.9848 14.1464 28.451 14.4634 27.9321C 14.1392 28.4578 13.8491 28.9924 13.5902 29.5318ZM 22.9946 35.9856C 22.3098 35.117 21.691 34.1657 21.1791 33.1383L 21.1803 33.1375C 21.6982 34.1405 22.3046 35.0942 22.9946 35.9856ZM 29.8655 41.3963L 29.8961 41.4097L 29.9335 41.426C 29.4347 41.2141 28.9065 40.9503 28.3627 40.6368C 28.8473 40.9107 29.3484 41.1643 29.8655 41.3963ZM 40.5527 26.7651C 39.4503 27.5638 38.2872 28.2194 37.0853 28.7352C 38.4524 28.1575 39.6294 27.4643 40.5527 26.7651ZM 33.2643 14.5439L 33.2563 14.5952L 33.2476 14.6505C 33.3387 14.0502 33.4002 13.4419 33.4306 12.8275C 33.4058 13.3863 33.3538 13.9605 33.2643 14.5439ZM 33.327 9.67726C 33.3475 9.88878 33.3664 10.1061 33.383 10.3291C 33.3741 10.2272 33.3643 10.1252 33.3537 10.0231C 33.3511 9.99919 33.3485 9.97062 33.3459 9.93886L 33.3433 9.90513L 33.3386 9.8408L 33.3318 9.74559L 33.327 9.67726ZM 23.8401 15.8842C 23.3004 14.8945 22.6726 13.955 21.9626 13.08C 22.6559 13.925 23.2943 14.8602 23.8401 15.8842ZM 15.604 19.2154C 14.4546 19.1897 13.3005 19.2735 12.1589 19.469C 13.2774 19.2655 14.4367 19.1677 15.604 19.2154ZM 5.24286 22.2272C 5.18664 22.2647 5.13061 22.3025 5.07471 22.3407C 5.03424 22.3684 4.99383 22.3963 4.95349 22.4243C 4.88074 22.4749 4.80829 22.5261 4.73602 22.578C 4.69299 22.6088 4.65002 22.6399 4.60718 22.6712L 4.60419 22.6734C 4.80511 22.5245 5.01837 22.3754 5.24286 22.2272Z"/>
-<path id="path3_fill" fill-rule="evenodd" d="M 16.0295 12.229L 14.8425 0.790123C 7.53357 -2.01386 1.04458 3.15736 0.116862 8.2708C -0.400378 11.1218 0.772477 14.4042 4.17365 15.9738C 6.59782 14.0154 11.2827 11.8803 16.0295 12.229Z"/>
-<path id="path4_fill" fill-rule="evenodd" d="M 16.1176 12.1553L 14.9278 0.782117C 7.58484 -2.00893 1.04493 3.18264 0.112904 8.27249C -0.406741 11.1103 0.84878 14.2947 4.26577 15.857C 6.697 13.8998 11.129 11.9068 16.1176 12.1553Z"/>
-<path id="path5_fill" fill-rule="evenodd" d="M 16.0926 12.1431L 14.9659 0.790397C 7.62292 -2.00065 1.04732 3.10738 0.115298 8.19723C -0.404347 11.035 0.809439 14.2841 4.22643 15.8464C 6.63823 13.9 11.2588 11.8587 16.0926 12.1431Z"/>
-<path id="path6_fill" fill-rule="evenodd" d="M 15.9815 12.1915L 14.8602 0.789647C 7.55119 -2.01434 1.04328 3.16169 0.115562 8.27513C -0.401678 11.1261 0.792924 14.3363 4.1941 15.9059C 6.54445 13.9641 10.9322 11.9386 15.9815 12.1915Z"/>
-<path id="path7_fill" fill-rule="evenodd" d="M 16.0794 12.148L 14.9513 0.783652C 7.60839 -2.0074 1.05938 3.16856 0.127349 8.25841C -0.392295 11.0962 0.632515 14.3774 4.0495 15.9397C 5.24452 15.0732 6.74795 14.0894 8.52884 13.3998C 10.7325 12.5465 13.2716 12.0251 16.0794 12.148Z"/>
-<path id="path8_fill" fill-rule="evenodd" d="M 16.0401 12.2374L 14.7485 0.773668C 7.40559 -2.01738 1.05413 3.26113 0.122106 8.35098C -0.397539 11.1888 0.705495 14.4131 4.12248 15.9754C 6.50059 14.048 11.0115 11.9513 16.0401 12.2374Z"/>
</defs>
</svg>
diff --git a/src/assets/images/desktop_screen_entry.svg b/src/assets/images/desktop_screen_entry.svg
index fbc322893f6fadd710782074e4f2781130ef1747..8e25150d633190c696e3aa4e984227c4d9d3c0e1 100755
--- a/src/assets/images/desktop_screen_entry.svg
+++ b/src/assets/images/desktop_screen_entry.svg
@@ -1,24 +1,5 @@
-<svg width="94" height="94" viewBox="0 0 94 94" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>desktop_screen_entry</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(-659 -277)">
-<g id="desktop_screen_entry">
-<g id="Oval Copy">
-<use xlink:href="#path0_fill" transform="translate(661 279)" fill="#D8D8D8" fill-opacity="0.01"/>
-<use xlink:href="#path1_stroke" transform="translate(661 279)" fill="#FFFFFF"/>
-</g>
-<g id="Rectangle 3">
-<use xlink:href="#path2_fill" transform="translate(696 341)" fill="#FFFFFF"/>
-</g>
-<g id="desktop">
-<use xlink:href="#path3_fill" transform="translate(685 307)" fill="#FFFFFF"/>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" fill-rule="evenodd" d="M 45 90C 69.8528 90 90 69.8528 90 45C 90 20.1472 69.8528 0 45 0C 20.1472 0 0 20.1472 0 45C 0 69.8528 20.1472 90 45 90Z"/>
-<path id="path1_stroke" d="M 45 91.5C 70.6812 91.5 91.5 70.6812 91.5 45L 88.5 45C 88.5 69.0244 69.0244 88.5 45 88.5L 45 91.5ZM 91.5 45C 91.5 19.3188 70.6812 -1.5 45 -1.5L 45 1.5C 69.0244 1.5 88.5 20.9756 88.5 45L 91.5 45ZM 45 -1.5C 19.3188 -1.5 -1.5 19.3188 -1.5 45L 1.5 45C 1.5 20.9756 20.9756 1.5 45 1.5L 45 -1.5ZM -1.5 45C -1.5 70.6812 19.3188 91.5 45 91.5L 45 88.5C 20.9756 88.5 1.5 69.0244 1.5 45L -1.5 45Z"/>
-<path id="path2_fill" d="M 0 0L 20 0L 20 3L 0 3L 0 0Z"/>
-<path id="path3_fill" fill-rule="evenodd" d="M 3 0C 1.34314 0 0 1.34314 0 3L 0 31C 0 32.6569 1.34314 34 3 34L 38 34C 39.6569 34 41 32.6569 41 31L 41 3C 41 1.34314 39.6569 0 38 0L 3 0ZM 36 6L 5 6L 5 28L 36 28L 36 6Z"/>
-</defs>
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88.5 45C88.5 69.0244 69.0244 88.5 45 88.5C20.9756 88.5 1.5 69.0244 1.5 45C1.5 20.9756 20.9756 1.5 45 1.5C69.0244 1.5 88.5 20.9756 88.5 45Z" fill="#2F80ED" stroke="white" stroke-width="3"/>
+<rect width="20" height="3" transform="translate(35 62)" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0C1.34314 0 0 1.34314 0 3V31C0 32.6569 1.34314 34 3 34H38C39.6569 34 41 32.6569 41 31V3C41 1.34314 39.6569 0 38 0H3ZM36 6H5V28H36V6Z" transform="translate(24 28)" fill="white"/>
</svg>
diff --git a/src/assets/images/device_entry.svg b/src/assets/images/device_entry.svg
index f406f0c8058b65ca14a04aee952f1cccc071ae6d..b0512c0a3e35d0cfce07d07525d17289dea4bf44 100755
--- a/src/assets/images/device_entry.svg
+++ b/src/assets/images/device_entry.svg
@@ -1,17 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94">
- <g fill="none">
- <path fill="#D8D8D8" fill-opacity=".01" fill-rule="evenodd" d="M47 92c24.853 0 45-20.147 45-45S71.853 2 47 2 2 22.147 2 47s20.147 45 45 45z" clip-rule="evenodd"/>
- <path stroke="#fff" stroke-width="3" d="M47 92c24.853 0 45-20.147 45-45S71.853 2 47 2 2 22.147 2 47s20.147 45 45 45z"/>
- <path fill="#C4C4C4" d="M59.5 39c1.792.29 5.44 1.047 6.43 1.549C65.525 28.767 59.048 26.819 55.5 29c4.222 1.121 4.102 7.456 4 10z"/>
- <path fill="#C4C4C4" d="M59.5 39c1.792.29 5.44 1.047 6.43 1.549C65.525 28.767 59.048 26.819 55.5 29c4.222 1.121 4.102 7.456 4 10z"/>
- <path fill="#fff" fill-rule="evenodd" stroke="#fff" d="M49.52 43.729a3 3 0 0 0 3.16-1.846 49.424 49.424 0 0 1 1.577-3.51c1.206.038 2.299.077 3.243.127 5.107.27 8.46 1.781 10.542 3.82-1.43.633-3.15 1.481-4.801 2.328a238.752 238.752 0 0 0-6.04 3.212l-.41.225-.147.081a1.5 1.5 0 0 0-.76 1.499l.01 8.465c.06.474.34.89.757 1.123.422.24.918.178 1.4.034l.13-.06a120.01 120.01 0 0 0 1.345-.628c.269-.127.567-.268.889-.422l.242-.116c1.51-.72 4.234-2.02 6.072-2.974a95.31 95.31 0 0 0 3.542-1.926c-.385 1.003-.908 1.845-1.501 2.425L51.5 65c-1.417-1.043-.933-1.604-.068-2.603 1.538-1.778 4.278-4.946-.35-14.69-5.62-4.425-18.234-4.507-23.614-4.543-1.739-.01-2.722-.017-2.468-.164 1.715-.99 12.942-4.158 16.658-5.076a149.626 149.626 0 0 1-.37.794 3 3 0 0 0 2.332 4.258l5.9.753z" clip-rule="evenodd"/>
- <path fill="#fff" d="M44 40l5.9.753c7.82-19.229 15.691-11.946 16.2.548-.05-8.196-2.693-14.35-10.397-14.3C49.539 27.04 46.127 35.5 44 40z"/>
- <mask id="a" fill="#fff">
- <path d="M17.038 1.115C4.277 2.707.865 1.717 0 14.395c0 13.783 7.5 9.45 19.16 7.594 8.824-1.89 13.932-1.037 13.932-13.732C32.243-2.03 29.087-.39 17.038 1.115z"/>
- </mask>
- <g mask="url(#a)" transform="matrix(-1 0 0 1 55.092 41.876)">
- <path fill="#fff" d="M0 14.395l-3.99-.272-.01.136v.136h4zm17.038-13.28l-.495-3.97.495 3.97zm16.054 7.142h4v-.165l-.014-.164-3.986.329zM19.159 21.989l.63 3.95.104-.016.104-.023-.838-3.911zM3.991 14.668c.436-6.386 1.492-7.26 2.128-7.642.579-.348 1.58-.681 3.606-.994 2.071-.32 4.408-.524 7.808-.948l-.99-7.939c-2.98.372-5.856.643-8.04.98-2.23.345-4.529.856-6.506 2.044C-2.479 2.86-3.56 7.83-3.99 14.123l7.982.545zm13.542-9.584c3.216-.401 5.411-.754 7.384-.955 1.975-.202 2.849-.133 3.247-.02.035.01.005-.093.144.198.276.582.593 1.798.797 4.279l7.973-.658c-.22-2.663-.615-5.099-1.546-7.056-1.068-2.247-2.8-3.776-5.166-4.453-2.003-.574-4.23-.456-6.262-.249-2.034.208-4.752.625-7.561.975l.99 7.939zm11.559 3.173c0 6.022-1.247 7.164-1.898 7.605-.552.373-1.418.71-3.007 1.065-.775.174-1.624.332-2.624.517-.978.181-2.076.384-3.241.634l1.675 7.822c1.04-.223 2.033-.406 3.023-.59.969-.18 1.967-.364 2.911-.575 1.852-.413 3.917-1.01 5.745-2.247 4.109-2.78 5.416-7.559 5.416-14.231h-8zM18.53 18.039c-2.982.475-5.911 1.147-8.04 1.557-2.36.456-3.825.61-4.797.49-.676-.082-.754-.224-.892-.459C4.465 19.057 4 17.62 4 14.395h-8c0 3.667.473 6.856 1.908 9.293 1.632 2.77 4.158 4.014 6.814 4.34 2.362.288 4.958-.128 7.283-.576 2.556-.494 4.937-1.06 7.783-1.513l-1.258-7.9z"/>
- </g>
- <path fill="#fff" d="M58.692 56v-5.897C62.741 48.19 67.26 45.81 70 44.5c1.86-.889 3.371-.179 3.74 1.69.26 1.31-.586 2.684-1.74 3.31-1.154.626-13.308 6.5-13.308 6.5z"/>
- </g>
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88.5 45C88.5 69.0244 69.0244 88.5 45 88.5C20.9756 88.5 1.5 69.0244 1.5 45C1.5 20.9756 20.9756 1.5 45 1.5C69.0244 1.5 88.5 20.9756 88.5 45Z" fill="#2F80ED" stroke="white" stroke-width="3"/>
+<path d="M6.43085 10.78C4.63879 11.0707 0.989932 11.8268 0 12.3286C0.407286 0.547339 6.88406 -1.40044 10.4308 0.779999C6.20865 1.90137 6.32903 8.23614 6.43085 10.78Z" transform="translate(63.9308 26.22) scale(-1 1)" fill="#C4C4C4"/>
+<path d="M6.43085 10.78C4.63879 11.0707 0.989932 11.8268 0 12.3286C0.407286 0.547339 6.88406 -1.40044 10.4308 0.779999C6.20865 1.90137 6.32903 8.23614 6.43085 10.78Z" transform="translate(63.9308 26.22) scale(-1 1)" fill="#EFEFEF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5605 5.80482C25.9101 5.97699 27.2066 5.21939 27.7191 3.95909C28.2562 2.6386 28.7836 1.47353 29.2965 0.449768C30.5023 0.486954 31.5953 0.526215 32.5396 0.576248C37.6468 0.846878 41.0005 2.3575 43.082 4.39674C41.652 5.02917 39.9324 5.87749 38.2806 6.7238C36.5808 7.59465 34.9323 8.47398 33.7101 9.1348C33.0986 9.46544 32.5928 9.74187 32.2397 9.93584C32.063 10.0328 31.9245 10.1093 31.8299 10.1615L31.6837 10.2425C31.1482 10.5401 30.8475 11.1333 30.924 11.741L30.9331 20.2067C30.9927 20.6802 31.274 21.097 31.6908 21.3294C32.1127 21.5701 32.6088 21.5076 33.0902 21.3629L33.2202 21.3031C33.3336 21.2509 33.4994 21.1743 33.71 21.0762C33.9433 20.9677 34.2318 20.8327 34.5654 20.6754C34.8342 20.5487 35.1323 20.4074 35.4543 20.2536L35.6971 20.1377C37.2061 19.4175 39.9301 18.1175 41.7683 17.163C42.9724 16.5377 44.1934 15.8805 45.311 15.2375C44.9258 16.2405 44.4028 17.0819 43.8096 17.6619L26.5396 27.0762C25.1221 26.0333 25.607 25.4727 26.4716 24.473C28.0096 22.6948 30.7492 19.5272 26.1215 9.78375C20.5023 5.35844 7.8877 5.27588 2.50793 5.24068C0.768799 5.22929 -0.214233 5.22285 0.0396118 5.07625C1.75507 4.08553 12.9818 0.917801 16.6978 0C16.611 0.1875 16.5275 0.367569 16.4472 0.539215C16.4064 0.626404 16.3665 0.711426 16.3274 0.794144C15.9169 1.6626 15.947 2.67513 16.4086 3.51761C16.8701 4.36008 17.7072 4.93059 18.66 5.05214L24.5605 5.80482Z" transform="translate(22.9604 35.9238)" fill="white" stroke="white"/>
+<path d="M22.1005 13L16.2 13.7527C8.38013 -5.47592 0.509107 1.80677 0 14.3013C0.0509108 6.10544 2.69312 -0.0498744 10.3976 0.000304595C16.5612 0.0404478 19.9736 8.50061 22.1005 13Z" transform="translate(64.1005 25) scale(-1 1)" fill="white"/>
+<path d="M3.07742 20.6423C2.4711 19.613 2.00635 17.7557 2.00006 14.4631C2.43733 8.15539 3.498 6.26762 5.0883 5.3118C6.01698 4.75364 7.34242 4.37637 9.41959 4.05502C10.6769 3.86051 12.0676 3.70364 13.6888 3.52076C14.7747 3.39827 15.9639 3.26412 17.2858 3.09918C18.6038 2.93472 19.7807 2.77388 20.8505 2.62767C22.3081 2.42847 23.567 2.25642 24.7135 2.13937C26.7031 1.93625 27.9151 1.95812 28.7146 2.18707C29.3326 2.36405 29.7427 2.66797 30.1138 3.44848C30.5489 4.36362 30.8831 5.86199 31.0919 8.33907C31.0808 14.4601 29.8232 16.4976 28.3144 17.5182C27.4432 18.1075 26.2773 18.5099 24.6232 18.8794C23.8055 19.062 22.9194 19.2267 21.9273 19.4105L21.8974 19.4161C20.9396 19.5935 19.8961 19.7869 18.7925 20.0223C16.8122 20.3393 14.9038 20.7345 13.1884 21.0899C12.3664 21.2601 11.5886 21.4212 10.8685 21.5601C8.517 22.0137 6.76926 22.233 5.45062 22.0716C4.27945 21.9284 3.58934 21.5113 3.07742 20.6423Z" transform="translate(53.092 39.8761) scale(-1 1)" stroke="white" stroke-width="4"/>
+<path d="M0 10.3292L0.685179 4.47255C4.92876 3.04264 9.69318 1.20359 12.5676 0.221048C14.5183 -0.445764 15.9365 0.435362 16.0866 2.33438C16.1919 3.66552 15.1923 4.93186 13.973 5.41957C12.7537 5.90728 0 10.3292 0 10.3292Z" transform="translate(55.4919 43.7408) rotate(-6.67284)" fill="white"/>
</svg>
diff --git a/src/assets/images/expand_dots_icon.svg b/src/assets/images/expand_dots_icon.svg
deleted file mode 100755
index 8d765ad21b0d4de41fa4c09771ebf83761cafd06..0000000000000000000000000000000000000000
--- a/src/assets/images/expand_dots_icon.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="26" height="6" viewBox="0 0 26 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>expand_dots_icon</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(455 -258)">
-<g id="expand_dots_icon">
-<g id="Ellipse">
-<use xlink:href="#path0_fill" transform="translate(-455 258)" fill="#FFFFFF"/>
-</g>
-<g id="Ellipse">
-<use xlink:href="#path0_fill" transform="translate(-435 258)" fill="#FFFFFF"/>
-</g>
-<g id="Ellipse">
-<use xlink:href="#path0_fill" transform="translate(-445 258)" fill="#FFFFFF"/>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" d="M 6 3C 6 4.65685 4.65685 6 3 6C 1.34315 6 0 4.65685 0 3C 0 1.34315 1.34315 0 3 0C 4.65685 0 6 1.34315 6 3Z"/>
-</defs>
-</svg>
diff --git a/src/assets/images/gearvr_entry.svg b/src/assets/images/gearvr_entry.svg
index c4ac081d1c451345486b7cd575e147825583f75f..61ef3c355239abff48cd87af97751e55d5998845 100755
--- a/src/assets/images/gearvr_entry.svg
+++ b/src/assets/images/gearvr_entry.svg
@@ -1,27 +1,4 @@
-<svg width="94" height="94" viewBox="0 0 94 94" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>gearvr_entry</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(-659 -395)">
-<g id="gearvr_entry">
-<g id="Oval Copy">
-<use xlink:href="#path0_fill" transform="translate(661 397)" fill="#D8D8D8" fill-opacity="0.01"/>
-<use xlink:href="#path1_stroke" transform="translate(661 397)" fill="#FFFFFF"/>
-</g>
-<g id="Rectangle 3" opacity="0.995697">
-<use xlink:href="#path2_fill" transform="translate(683 429)" fill="#D8D8D8" fill-opacity="0.01"/>
-<mask id="mask0_outline_ins">
-<use xlink:href="#path2_fill" fill="white" transform="translate(683 429)"/>
-</mask>
-<g mask="url(#mask0_outline_ins)">
-<use xlink:href="#path3_stroke_2x" transform="translate(683 429)" fill="#FFFFFF"/>
-</g>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" fill-rule="evenodd" d="M 45 90C 69.8528 90 90 69.8528 90 45C 90 20.1472 69.8528 0 45 0C 20.1472 0 0 20.1472 0 45C 0 69.8528 20.1472 90 45 90Z"/>
-<path id="path1_stroke" d="M 45 91.5C 70.6812 91.5 91.5 70.6812 91.5 45L 88.5 45C 88.5 69.0244 69.0244 88.5 45 88.5L 45 91.5ZM 91.5 45C 91.5 19.3188 70.6812 -1.5 45 -1.5L 45 1.5C 69.0244 1.5 88.5 20.9756 88.5 45L 91.5 45ZM 45 -1.5C 19.3188 -1.5 -1.5 19.3188 -1.5 45L 1.5 45C 1.5 20.9756 20.9756 1.5 45 1.5L 45 -1.5ZM -1.5 45C -1.5 70.6812 19.3188 91.5 45 91.5L 45 88.5C 20.9756 88.5 1.5 69.0244 1.5 45L -1.5 45Z"/>
-<path id="path2_fill" fill-rule="evenodd" d="M 0 14C 0 6.26801 6.26801 0 14 0L 31 0C 38.732 0 45 6.26801 45 14C 45 21.732 38.732 28 31 28L 14 28C 6.26801 28 0 21.732 0 14Z"/>
-<path id="path3_stroke_2x" d="M 14 9L 31 9L 31 -9L 14 -9L 14 9ZM 31 19L 14 19L 14 37L 31 37L 31 19ZM 14 19C 11.2386 19 9 16.7614 9 14L -9 14C -9 26.7025 1.29745 37 14 37L 14 19ZM 36 14C 36 16.7614 33.7614 19 31 19L 31 37C 43.7025 37 54 26.7025 54 14L 36 14ZM 31 9C 33.7614 9 36 11.2386 36 14L 54 14C 54 1.29745 43.7025 -9 31 -9L 31 9ZM 14 -9C 1.29745 -9 -9 1.29745 -9 14L 9 14C 9 11.2386 11.2386 9 14 9L 14 -9Z"/>
-</defs>
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88.5 45C88.5 69.0244 69.0244 88.5 45 88.5C20.9756 88.5 1.5 69.0244 1.5 45C1.5 20.9756 20.9756 1.5 45 1.5C69.0244 1.5 88.5 20.9756 88.5 45Z" fill="#2F80ED" stroke="white" stroke-width="3"/>
+<path opacity="0.995697" d="M14 4.5H31C36.2467 4.5 40.5 8.75329 40.5 14C40.5 19.2467 36.2467 23.5 31 23.5H14C8.75329 23.5 4.5 19.2467 4.5 14C4.5 8.75329 8.75329 4.5 14 4.5Z" transform="translate(22 32)" fill="#D8D8D8" fill-opacity="0.01" stroke="white" stroke-width="9"/>
</svg>
diff --git a/src/assets/images/generic_vr_entry.svg b/src/assets/images/generic_vr_entry.svg
index 6d0a21948a016438edf526bcae6e88f9dc8a8d94..a47a2e8fd8aec7ececd8742b6a061991c9f8fcc4 100755
--- a/src/assets/images/generic_vr_entry.svg
+++ b/src/assets/images/generic_vr_entry.svg
@@ -1,20 +1,4 @@
-<svg width="94" height="94" viewBox="0 0 94 94" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>generic_vr_entry</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(-659 -395)">
-<g id="generic_vr_entry">
-<g id="Oval Copy">
-<use xlink:href="#path0_fill" transform="translate(661 397)" fill="#D8D8D8" fill-opacity="0.01"/>
-<use xlink:href="#path1_stroke" transform="translate(661 397)" fill="#FFFFFF"/>
-</g>
-<g id="Imported Layers">
-<use xlink:href="#path2_fill" transform="translate(683 429)" fill="#FFFFFF"/>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" fill-rule="evenodd" d="M 45 90C 69.8528 90 90 69.8528 90 45C 90 20.1472 69.8528 0 45 0C 20.1472 0 0 20.1472 0 45C 0 69.8528 20.1472 90 45 90Z"/>
-<path id="path1_stroke" d="M 45 91.5C 70.6812 91.5 91.5 70.6812 91.5 45L 88.5 45C 88.5 69.0244 69.0244 88.5 45 88.5L 45 91.5ZM 91.5 45C 91.5 19.3188 70.6812 -1.5 45 -1.5L 45 1.5C 69.0244 1.5 88.5 20.9756 88.5 45L 91.5 45ZM 45 -1.5C 19.3188 -1.5 -1.5 19.3188 -1.5 45L 1.5 45C 1.5 20.9756 20.9756 1.5 45 1.5L 45 -1.5ZM -1.5 45C -1.5 70.6812 19.3188 91.5 45 91.5L 45 88.5C 20.9756 88.5 1.5 69.0244 1.5 45L -1.5 45Z"/>
-<path id="path2_fill" fill-rule="evenodd" d="M 42.1704 1.9159e-15L 2.71227 1.9159e-15C 1.24057 1.9159e-15 0 1.22604 0 2.73805L 0 25.2622C 0 26.7742 1.24057 28 2.77108 28L 13.5496 28C 14.7053 28 15.6958 27.3015 16.112 26.3081L 19.2462 18.8289C 19.7747 17.5677 21.0324 16.6805 22.5 16.6805C 23.9676 16.6805 25.2253 17.5677 25.7538 18.8289L 28.888 26.3081C 29.3042 27.3015 30.2947 28 31.3916 28L 42.1704 28C 43.7594 28 45 26.7742 45 25.2622L 45 2.73805C 45 1.22604 43.7594 1.9159e-15 42.1704 1.9159e-15ZM 12.2939 18.9274C 9.53693 18.9274 7.30457 16.7226 7.30457 14C 7.30457 11.2774 9.53693 9.07287 12.2939 9.07287C 15.0507 9.07287 17.2785 11.2774 17.2785 14C 17.2785 16.7226 15.0459 18.9274 12.2939 18.9274ZM 32.7086 18.9251C 29.9531 18.9251 27.7215 16.7214 27.7215 14C 27.7215 11.2789 29.9531 9.07514 32.7086 9.07514C 35.4641 9.07514 37.6957 11.2789 37.6957 14C 37.6957 16.7214 35.4641 18.9251 32.7086 18.9251Z"/>
-</defs>
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88.5 45C88.5 69.0244 69.0244 88.5 45 88.5C20.9756 88.5 1.5 69.0244 1.5 45C1.5 20.9756 20.9756 1.5 45 1.5C69.0244 1.5 88.5 20.9756 88.5 45Z" fill="#2F80ED" stroke="white" stroke-width="3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.1704 0H2.71227C1.24057 0 0 1.22604 0 2.73805V25.2622C0 26.7742 1.24057 28 2.77108 28H13.5496C14.7053 28 15.6958 27.3015 16.112 26.3081L19.2462 18.8289C19.7747 17.5677 21.0324 16.6805 22.5 16.6805C23.9676 16.6805 25.2253 17.5677 25.7538 18.8289L28.888 26.3081C29.3042 27.3015 30.2947 28 31.3916 28H42.1704C43.7594 28 45 26.7742 45 25.2622V2.73805C45 1.22604 43.7594 0 42.1704 0ZM12.294 18.9274C9.53693 18.9274 7.30457 16.7226 7.30457 14C7.30457 11.2774 9.53693 9.07287 12.294 9.07287C15.0507 9.07287 17.2785 11.2774 17.2785 14C17.2785 16.7226 15.0459 18.9274 12.294 18.9274ZM32.7086 18.9251C29.9531 18.9251 27.7215 16.7214 27.7215 14C27.7215 11.2789 29.9531 9.07514 32.7086 9.07514C35.4641 9.07514 37.6957 11.2789 37.6957 14C37.6957 16.7214 35.4641 18.9251 32.7086 18.9251Z" transform="translate(22 32)" fill="white"/>
</svg>
diff --git a/src/assets/images/hub_create_button_disabled.svg b/src/assets/images/hub_create_button_disabled.svg
deleted file mode 100755
index 168e43e80b55792126e69e85cd75ae5da2ec51e8..0000000000000000000000000000000000000000
--- a/src/assets/images/hub_create_button_disabled.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="55" height="55" viewBox="0 0 55 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>hub_create_button_disabled</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(-92 -236)">
-<g id="hub_create_button_disabled">
-<g id="Oval Copy">
-<use xlink:href="#path0_stroke" transform="translate(94 238)" fill="#C0C0C0"/>
-</g>
-<g id="Group 7">
-<g id="Union">
-<use xlink:href="#path1_fill" transform="translate(112.7 255.567)" fill="#C0C0C0"/>
-</g>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_stroke" d="M 25.5 52.5C 40.4117 52.5 52.5 40.4117 52.5 25.5L 49.5 25.5C 49.5 38.7548 38.7548 49.5 25.5 49.5L 25.5 52.5ZM 52.5 25.5C 52.5 10.5883 40.4117 -1.5 25.5 -1.5L 25.5 1.5C 38.7548 1.5 49.5 12.2452 49.5 25.5L 52.5 25.5ZM 25.5 -1.5C 10.5883 -1.5 -1.5 10.5883 -1.5 25.5L 1.5 25.5C 1.5 12.2452 12.2452 1.5 25.5 1.5L 25.5 -1.5ZM -1.5 25.5C -1.5 40.4117 10.5883 52.5 25.5 52.5L 25.5 49.5C 12.2452 49.5 1.5 38.7548 1.5 25.5L -1.5 25.5Z"/>
-<path id="path1_fill" fill-rule="evenodd" d="M 6.8 1.52588e-05L 15.3 7.65001L 6.8 15.3L 6.80001 10.2L 7.62939e-06 10.2L 7.62939e-06 5.10002L 6.80001 5.10002L 6.8 1.52588e-05Z"/>
-</defs>
-</svg>
diff --git a/src/assets/images/hub_create_button_enabled.svg b/src/assets/images/hub_create_button_enabled.svg
deleted file mode 100755
index f696984717b06cf6448829a45f80fcdab17b1800..0000000000000000000000000000000000000000
--- a/src/assets/images/hub_create_button_enabled.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="55" height="55" viewBox="0 0 55 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>hub_create_button_enabled</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(-92 -236)">
-<g id="hub_create_button_enabled">
-<g id="Oval Copy">
-<use xlink:href="#path0_fill" transform="translate(94 238)" fill="#2F80ED"/>
-<use xlink:href="#path1_stroke" transform="translate(94 238)" fill="#FFFFFF"/>
-</g>
-<g id="Union">
-<use xlink:href="#path2_fill" transform="translate(112.7 255.567)" fill="#FFFFFF"/>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" fill-rule="evenodd" d="M 25.5 51C 39.5833 51 51 39.5833 51 25.5C 51 11.4167 39.5833 0 25.5 0C 11.4167 0 0 11.4167 0 25.5C 0 39.5833 11.4167 51 25.5 51Z"/>
-<path id="path1_stroke" d="M 25.5 52.5C 40.4117 52.5 52.5 40.4117 52.5 25.5L 49.5 25.5C 49.5 38.7548 38.7548 49.5 25.5 49.5L 25.5 52.5ZM 52.5 25.5C 52.5 10.5883 40.4117 -1.5 25.5 -1.5L 25.5 1.5C 38.7548 1.5 49.5 12.2452 49.5 25.5L 52.5 25.5ZM 25.5 -1.5C 10.5883 -1.5 -1.5 10.5883 -1.5 25.5L 1.5 25.5C 1.5 12.2452 12.2452 1.5 25.5 1.5L 25.5 -1.5ZM -1.5 25.5C -1.5 40.4117 10.5883 52.5 25.5 52.5L 25.5 49.5C 12.2452 49.5 1.5 38.7548 1.5 25.5L -1.5 25.5Z"/>
-<path id="path2_fill" fill-rule="evenodd" d="M 6.8 0L 15.3 7.64999L 6.8 15.3L 6.8 10.2L 0 10.2L 0 5.10001L 6.8 5.10001L 6.8 0Z"/>
-</defs>
-</svg>
diff --git a/src/assets/images/level_background.png b/src/assets/images/level_background.png
index 9d53b3c6dc75552b225d5717fa6fb8cd883b05cb..5e0a40e2cfd8499413dc5bcdeef03e8742eceecc 100755
Binary files a/src/assets/images/level_background.png and b/src/assets/images/level_background.png differ
diff --git a/src/assets/images/level_background@2x.png b/src/assets/images/level_background@2x.png
index 4a9f08acc76396f4133673faed5b4ae38ca6cc87..3ecfb6efa54aa24de6de19ba825841182ca18e18 100755
Binary files a/src/assets/images/level_background@2x.png and b/src/assets/images/level_background@2x.png differ
diff --git a/src/assets/images/mic_small.png b/src/assets/images/mic_small.png
old mode 100644
new mode 100755
index c6831f4f320d34f3550fdb0afc64845ed38ab83b..cc41c2bb0d36ace15751bffae7d342369da2b0b3
Binary files a/src/assets/images/mic_small.png and b/src/assets/images/mic_small.png differ
diff --git a/src/assets/images/mic_small@2x.png b/src/assets/images/mic_small@2x.png
index b94cede41804adacdf7e268e6082baffca4403cb..cc41c2bb0d36ace15751bffae7d342369da2b0b3 100644
Binary files a/src/assets/images/mic_small@2x.png and b/src/assets/images/mic_small@2x.png differ
diff --git a/src/assets/images/mobile_screen_entry.svg b/src/assets/images/mobile_screen_entry.svg
index 8c249bfd80edfd5ca80461790ff76cdf594e87cd..5c5b77cda1c2796d18090b29052e3981631131e6 100755
--- a/src/assets/images/mobile_screen_entry.svg
+++ b/src/assets/images/mobile_screen_entry.svg
@@ -1,20 +1,8 @@
-<svg width="94" height="94" viewBox="0 0 94 94" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>mobile_screen_entry</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(-659 -277)">
-<g id="mobile_screen_entry">
-<g id="Oval Copy">
-<use xlink:href="#path0_fill" transform="translate(661 279)" fill="#D8D8D8" fill-opacity="0.01"/>
-<use xlink:href="#path1_stroke" transform="translate(661 279)" fill="#FFFFFF"/>
-</g>
-<g id="Phone Copy">
-<use xlink:href="#path2_fill" transform="translate(693 305)" fill="#FFFFFF"/>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" fill-rule="evenodd" d="M 45 90C 69.8528 90 90 69.8528 90 45C 90 20.1472 69.8528 0 45 0C 20.1472 0 0 20.1472 0 45C 0 69.8528 20.1472 90 45 90Z"/>
-<path id="path1_stroke" d="M 45 91.5C 70.6812 91.5 91.5 70.6812 91.5 45L 88.5 45C 88.5 69.0244 69.0244 88.5 45 88.5L 45 91.5ZM 91.5 45C 91.5 19.3188 70.6812 -1.5 45 -1.5L 45 1.5C 69.0244 1.5 88.5 20.9756 88.5 45L 91.5 45ZM 45 -1.5C 19.3188 -1.5 -1.5 19.3188 -1.5 45L 1.5 45C 1.5 20.9756 20.9756 1.5 45 1.5L 45 -1.5ZM -1.5 45C -1.5 70.6812 19.3188 91.5 45 91.5L 45 88.5C 20.9756 88.5 1.5 69.0244 1.5 45L -1.5 45Z"/>
-<path id="path2_fill" fill-rule="evenodd" d="M 5 0C 2.23859 0 0 2.23859 0 5L 0 33C 0 35.7614 2.23859 38 5 38L 20 38C 22.7614 38 25 35.7614 25 33L 25 5C 25 2.23859 22.7614 0 20 0L 5 0ZM 22 4L 3 4L 3 29L 22 29L 22 4Z"/>
-</defs>
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M88.5 45C88.5 69.0244 69.0244 88.5 45 88.5C20.9756 88.5 1.5 69.0244 1.5 45C1.5 20.9756 20.9756 1.5 45 1.5C69.0244 1.5 88.5 20.9756 88.5 45Z" fill="#2F80ED" stroke="white" stroke-width="3"/>
+<mask id="path-2-inside-1" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C2.23859 0 0 2.23859 0 5V33C0 35.7614 2.23859 38 5 38H20C22.7614 38 25 35.7614 25 33V5C25 2.23859 22.7614 0 20 0H5ZM22 4H3V29H22V4Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C2.23859 0 0 2.23859 0 5V33C0 35.7614 2.23859 38 5 38H20C22.7614 38 25 35.7614 25 33V5C25 2.23859 22.7614 0 20 0H5ZM22 4H3V29H22V4Z" transform="translate(32 26)" fill="#2F80ED"/>
+<path d="M3 4V1H0V4H3ZM22 4H25V1H22V4ZM3 29H0V32H3V29ZM22 29V32H25V29H22ZM3 5C3 3.89544 3.89544 3 5 3V-3C0.581732 -3 -3 0.581732 -3 5H3ZM3 33V5H-3V33H3ZM5 35C3.89544 35 3 34.1046 3 33H-3C-3 37.4183 0.581732 41 5 41V35ZM20 35H5V41H20V35ZM22 33C22 34.1046 21.1046 35 20 35V41C24.4183 41 28 37.4183 28 33H22ZM22 5V33H28V5H22ZM20 3C21.1046 3 22 3.89544 22 5H28C28 0.581732 24.4183 -3 20 -3V3ZM5 3H20V-3H5V3ZM3 7H22V1H3V7ZM6 29V4H0V29H6ZM22 26H3V32H22V26ZM19 4V29H25V4H19Z" transform="translate(32 26)" fill="white" mask="url(#path-2-inside-1)"/>
</svg>
diff --git a/src/assets/images/webvr_cube.svg b/src/assets/images/webvr_cube.svg
deleted file mode 100755
index 4ccbc7fee2c47d58d80ff9b8c11b6007786508e6..0000000000000000000000000000000000000000
--- a/src/assets/images/webvr_cube.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<svg width="30" height="35" viewBox="0 0 30 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<title>webvr_cube</title>
-<desc>Created using Figma</desc>
-<g id="Canvas" transform="translate(-269 391)">
-<g id="webvr_cube">
-<g id="Vector">
-<use xlink:href="#path0_fill" transform="translate(269.099 -382.765)" fill="#2F80ED"/>
-</g>
-<g id="Vector 4">
-<use xlink:href="#path1_fill" transform="translate(269 -391)" fill="#B8D5FC"/>
-</g>
-<g id="Vector 3">
-<use xlink:href="#path2_fill" transform="translate(283.882 -382.5)" fill="#6DA4ED"/>
-</g>
-</g>
-</g>
-<defs>
-<path id="path0_fill" d="M 14.7831 8.69853L 0 0L 0 17.9118L 14.8325 26.7647L 14.7831 8.69853Z"/>
-<path id="path1_fill" d="M 14.882 0L 30 8.5L 14.882 16.9338L 0 8.33823L 14.882 0Z"/>
-<path id="path2_fill" d="M 15.1181 17.5L 0.0494418 26.5L 0.0494418 25.9338L 0 8.43381L 15.1181 0L 15.1181 17.5Z"/>
-</defs>
-</svg>
diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index 475e4615923a6e1359984b1c6ea9be72e9242947..edc8b391990a9c81dd67ca2579ffc2991a169ac3 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -2,13 +2,20 @@
:local(.container) {
position: absolute;
- top: 10px;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
width: 100%;
user-select: none;
+
+ &:local(.top) {
+ top: 10px;
+ }
+
+ &:local(.bottom) {
+ bottom: 20px;
+ }
}
:local(.panel) {
@@ -46,12 +53,6 @@
cursor: pointer;
}
-:local(.addMediaButton) {
- position: absolute;
- top: 90px;
- background-color: #404040;
-}
-
:local(.iconButton.small) {
width: 30px;
height: 30px;
@@ -101,3 +102,10 @@
:local(.iconButton.freeze.active:hover) {
background-image: url(../hud/freeze_on-hover.png);
}
+
+:local(.iconButton.create-object) {
+ background-image: url(../hud/create_object.png);
+}
+:local(.iconButton.create-object:hover) {
+ background-image: url(../hud/create_object-hover.png);
+}
diff --git a/src/assets/stylesheets/audio.scss b/src/assets/stylesheets/audio.scss
index 1cfd75286aa7ea74e03a3c625f7121af31494926..c12b548a2ce6f89e379b6bd3d8301bbbc3f47422 100644
--- a/src/assets/stylesheets/audio.scss
+++ b/src/assets/stylesheets/audio.scss
@@ -4,22 +4,26 @@
display: flex;
flex-direction: column;
height: 100%;
+ width: 100%;
&__enter-button-container {
flex: 1;
display: flex;
justify-content: center;
+ align-items: flex-end;
}
&__enter-button {
- @extend %bottom-button;
+ @extend %bottom-action-button;
}
&__title {
@extend %top-title;
+ @extend %glass-text;
}
&__subtitle {
@extend %top-subtitle;
+ @extend %glass-text;
}
&__device-chooser {
@@ -29,15 +33,17 @@
align-items: center;
position: relative;
margin: 8px 0;
+ width: 100%;
&__dropdown {
@extend %rounded-border;
@extend %default-font;
+ @extend %glass-text;
appearance: none;
+ background-color: rgba(64, 64, 64, 0.2);
-moz-appearance: none;
-webkit-appearance: none;
- background-color: black;
padding: 6px;
padding-left: 15px;
padding-right: 30px;
@@ -50,7 +56,8 @@
&__mic-icon {
pointer-events: none;
position: absolute;
- left: 8%;
+ left: 9%;
+ width: 12px;
}
&__dropdown-arrow {
@@ -115,10 +122,12 @@
&__title {
@extend %top-title;
+ @extend %glass-text;
}
&__subtitle {
@extend %top-subtitle;
+ @extend %glass-text;
}
&__button-container {
diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index 2d86cf428b6a9c2210fcd119acba58925a3f9fa4..5dc16221c4584917a1ae14997f608bb048073bab 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -1,58 +1,109 @@
-.entry-dialog {
+@import 'shared';
+
+:local(.entry-dialog) {
display: flex;
flex-direction: column;
height: 100%;
+ align-items: center;
}
-.entry-button--bolded {
- font-weight: bold;
-}
+:local(.entry-button) {
+ display: flex;
+ margin: 20px 0;
+ margin-bottom: 0;
+ cursor: pointer;
+ background: none;
+ color: white;
+ border: none;
+ align-items: center;
+ @extend %default-font;
-.entry-button__subtitle {
- font-size: 0.7em;
- color: $light-text;
+ :local(.icon) {
+ @extend %glass-icon;
+ flex: 1 1 90px;
+ min-width: 90px;
+ min-height: 90px;
+ }
+
+ :local(.label) {
+ @extend %glass-text;
+ flex: 10 1 auto;
+ margin-left: 20px;
+ font-size: 1.5em;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ :local(.bolded) {
+ font-weight: bold;
+ }
+
+ :local(.subtitle) {
+ font-size: 0.7em;
+ color: $light-text;
+ }
}
-.entry-panel {
+:local(.entry-panel) {
overflow-y: auto;
display: flex;
flex-direction: column;
flex: 1;
- &__button-container {
+ :local(.button-container) {
margin: auto;
+ margin-top: -72px;
text-align: center;
flex: 10;
display: flex;
flex-direction: column;
min-height: max-content;
justify-content: center;
+
+ :local(.invite-button) {
+ @extend %action-button;
+ align-self: center;
+ width: 75%;
+ margin-top: 28px;
+ }
+
+ :local(.presence-info) {
+ margin: 18px;
+ font-size: 1.3em;
+
+ :local(.people) {
+ font-weight: bold;
+ }
+ }
}
- &__webvr-link-container {
+
+ :local(.webvr-link-container) {
text-align: center;
margin-bottom: 24px;
}
- &__webvr-link {
+
+ :local(.webvr-link) {
color: white;
flex: 1;
min-height: max-content;
}
- &__screen-sharing {
+ :local(.screen-sharing) {
font-size: 1.4em;
margin-left: 2.95em;
margin-top: 0.6em;
- &__checkbox {
+ :local(.checkbox) {
@extend %checkbox;
}
- &__checkbox:checked {
+
+ :local(.checkbox:checked) {
@extend %checkbox-checked;
}
}
-
- &__secondary {
+ :local(.secondary) {
width: 100%;
text-align: center;
margin-top: 10px;
@@ -60,30 +111,3 @@
color: $grey-text;
}
}
-
-.entry-button {
- display: flex;
- margin: 20px 0;
- margin-bottom: 0;
- cursor: pointer;
- background: none;
- color: white;
- border: none;
- align-items: center;
- @extend %default-font;
-
- &__icon {
- flex: 1 1 90px;
- min-width: 90px;
- min-height: 90px;
- }
-
- &__label {
- flex: 10 1 auto;
- margin-left: 20px;
- font-size: 1.5em;
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
-}
diff --git a/src/assets/stylesheets/footer.scss b/src/assets/stylesheets/footer.scss
deleted file mode 100644
index ee9439da0cc2755dca67bc69d9acf39a1e0421e4..0000000000000000000000000000000000000000
--- a/src/assets/stylesheets/footer.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-@import 'shared';
-
-:local(.container) {
- position: absolute;
- width: 100%;
- bottom: 0;
- font-size: 1.3em;
- display: flex;
- flex-direction: column;
- // Position above virtual gamepad controls on mobile
- z-index: 1;
- user-select: none;
-
- @media (min-width: 769px) and (min-height: 421px) {
- pointer-events: auto;
- }
-}
-
-:local(.floatingButton) {
- display: flex;
- justify-content: center;
-}
-:local(.header), :local(.menu-header) {
- display: flex;
- justify-content: center;
-}
-:local(.header) {
- border-bottom: 1px solid rgba(32, 32, 32, 0.65);
-
- @media (max-width: 768px) , (max-height: 340px) {
- border-bottom: none;
- pointer-events: none;
- }
-}
-:local(.menu-header) {
- background-color: transparent;
- border-bottom: 1px solid rgba(32, 32, 32, 0.65);
-
- @media (min-width: 769px) , (max-height: 421px) {
- display: none;
- }
-}
-:local(.header) {
- background-color: rgba(0, 0, 0, 0.65);
-
- @media (max-width: 768px) , (max-height: 420px) {
- background-color: transparent;
- }
-
- :local(.hub-info) {
- @media (max-width: 768px) , (max-height: 420px) {
- display: none;
- }
- }
-
- :local(.hub-stats) {
- @media (max-width: 768px) , (max-height: 420px) {
- display: none;
- }
- }
-}
-
-:local(.hub-info) {
- flex: 1;
- margin: 16px 24px;
- display: flex;
- align-items: center;
- @media (max-width: 768px) , (max-height: 420px) {
- margin: 16px 8px;
- margin-left: 24px;
- font-size: 0.9em;
- }
-}
-:local(.hub-stats) {
- text-align: right;
- margin: 16px 24px;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- @media (min-width: 769px) and (min-height: 421px) {
- flex: 1;
- }
- @media (max-width: 768px) , (max-height: 420px) {
- margin: 16px 8px;
- }
- :local(.hub-participant-count) {
- margin: 0 12px;
- }
-}
-
-:local(.menu) {
- padding: 5px 0;
- background-color: rgba(0, 0, 0, 0.85);
- display: flex;
- flex-direction: column;
-}
-:local(.menu-buttons) {
- margin: 0 auto;
-}
-:local(.menu-button) {
- @extend %fa-icon-button;
- pointer-events: auto;
-
- :local(.menu-button__icon) {
- @extend %fa-icon-button-icon;
- }
-
- :local(.menu-button__text) {
- @extend %fa-icon-button-text;
- }
-
- :local(.menu-button__narrow-close-icon) {
- @media (max-width: 768px) , (max-height: 420px) {
- display: none;
- }
- }
-
- :local(.menu-button__wide-close-icon) {
- @media (min-width: 769px) and (min-height: 421px) {
- display: none;
- }
- }
-}
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index 899f0bce6e444815ba455563e6c238de32db4889..ebead263f24b472f915effd1887f6b4db8460ed8 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -1,37 +1,26 @@
-.create-panel {
+@import 'shared';
+
+:local(.create-panel) {
display: flex;
flex-direction: column;
+ align-items: center;
- @media (max-width: 768px) {
- align-items: center;
- }
-
- &__header {
- color: $grey-text;
- font-size: 1.2em;
- margin-bottom: 14px;
- margin-left: 12px;
- text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
-
- @media (max-width: 768px) {
- text-align: center;
- }
- }
-
- &__form {
+ :local(.form) {
position: relative;
- width: 700px;
+ width: 690px;
+ height: 460px;
@media (max-width: 768px) , (max-height: 715px) {
- width: auto;
- width: 500px;
+ width: 525px;
+ height: 350px;
}
@media (max-width: 520px) {
- width: 300px;
+ width: 90%;
+ height: 300px;
}
- &__name {
+ :local(.name) {
@extend %rounded-border;
@extend %default-font;
@@ -43,204 +32,198 @@
padding-right: 90px;
width: 100%;
line-height: 40px;
+ margin-top: 340px;
+ border-radius: 0px 0px 14px 14px;
&::selection {
- background-color: #2F80ED;
- color: white;
+ background-color: #2F80ED;
+ color: white;
}
&::-moz-selection {
- background-color: #2F80ED;
- color: white;
+ background-color: #2F80ED;
+ color: white;
}
@media (max-width: 768px) , (max-height: 715px) {
- min-width: auto;
- font-size: 1.5em;
- width: 100%;
- text-align: center;
+ min-width: auto;
+ font-size: 1.5em;
+ width: 100%;
+ text-align: center;
+ margin-top: 275px;
}
@media (max-width: 520px) {
- padding-left: 15px;
- font-size: 1.2em;
- }
-
- &--expanded {
- margin-top: 340px;
- border-radius: 0px 0px 14px 14px;
-
- @media (max-width: 768px) , (max-height: 715px) {
- margin-top: 275px;
- }
-
- @media (max-width: 520px) {
- margin-top: 165px;
- }
+ padding-left: 15px;
+ font-size: 1.2em;
+ margin-top: 165px;
}
}
- &__submit-button , &__rotate-button {
- appearance: none;
- -moz-appearance: none;
- -webkit-appearance: none;
- background: transparent;
- border: none;
- cursor: pointer;
- }
-
- &__left-container {
- position: absolute;
- height: 100%;
- width: 90px;
- height: 95px;
- left: 4px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- bottom: 0;
-
- @media (max-width: 520px) {
- display: none;
- }
+ :local(.submit-button) {
+ @extend %big-action-button;
}
- &__right-container {
+ :local(.container) {
position: absolute;
- height: 95px;
- width: 90px;
- right: 4px;
+ width: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
- bottom: 0;
+ bottom: 5%;
}
- &__environment {
+ :local(.environment) {
position: absolute;
top: 0px;
left: 0px;
width: 700px;
height: 100%;
box-sizing: border-box;
- border-radius: 14px;
border: 3px solid white;
border-radius: 14px;
overflow: hidden;
pointer-events: none;
@media (max-width: 768px) , (max-height: 715px) {
- width: 100%;
+ width: 100%;
}
- &__picker {
- width: 100%;
- height: 340px;
- border-bottom: 2px solid white;
- overflow: hidden;
- position: relative;
-
- @media (max-width: 768px) , (max-height: 715px) {
- height: 280px;
- }
-
- @media (max-width: 520px) {
- height: 165px;
- }
-
- &__image {
- width: 106%;
- position: absolute;
- top: -3%;
- left: -3%;
- }
-
- &__labels {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background: rgb(2,0,36);
- background: linear-gradient(0deg, rgba(2,0,36,0) 0%, rgba(1,0,11,0.2189076314119398) 60%, rgba(0,0,0,0.5242297602634804) 100%);
-
- &__footer {
- position: absolute;
- bottom: 14px;
- left: 12px;
- font-size: 1.2em;
- text-shadow: 0px 0px 6px #202020;
- color: $light-text;
- }
-
- &__header {
- position: absolute;
- top: 14px;
- left: 18px;
- display: flex;
- flex-direction: column;
- text-shadow: 0px 0px 3px #404040;
-
- &__title {
- font-size: 1.6em;
- font-weight: bold;
- color: white;
- }
-
- &__author {
- color: $light-text;
- font-size: 1.4em;
-
- @media (max-width: 520px) {
- display: none;
- }
- }
-
- &__org {
- color: $light-text;
- font-size: 1.0em;
- display: inline;
-
- @media (max-width: 520px) {
- display: none;
- }
- }
-
- a {
- pointer-events: all;
+ :local(.picker) {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ position: relative;
+
+ :local(.image) {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ }
+
+ :local(.labels) {
+ position: absolute;
+ width: 100%;
+ 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%);
+
+ :local(.custom-button) {
+ @extend %default-font;
+ cursor: pointer;
+ position: absolute;
+ top: 14px;
+ right: 12px;
+ font-size: 1.3em;
+ text-shadow: 0px 0px 6px #202020;
+ color: $light-text;
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ background: transparent;
+ border: none;
+ pointer-events: auto;
+
+ @media (max-width: 520px) {
+ display: none;
+ }
+ }
+
+ :local(.header) {
+ position: absolute;
+ top: 14px;
+ left: 18px;
+ display: flex;
+ flex-direction: column;
+ text-shadow: 0px 0px 3px #404040;
+
+ :local(.title) {
+ font-size: 1.6em;
+ font-weight: bold;
+ color: white;
+ }
+
+ :local(.author) {
+ color: $light-text;
+ font-size: 1.4em;
+
+ @media (max-width: 520px) {
+ display: none;
+ }
+ }
+
+ :local(.org) {
+ color: $light-text;
+ font-size: 1.0em;
+ display: inline;
+
+ @media (max-width: 520px) {
+ display: none;
+ }
+ }
+
+ a {
+ pointer-events: all;
+ }
+ }
+ }
+
+ :local(.controls) {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+
+ :local(.next), :local(.prev) {
+ @extend %big-icon-button;
+
+ position: absolute;
+ top: 50%;
+ margin-top: -0.5em;
+ pointer-events: auto;
+ cursor: pointer;
+ padding: 0;
+ }
+
+ :local(.prev) {
+ left: 0.2em;
+ }
+
+ :local(.next) {
+ right: 0.2em;
+ }
+ }
}
- }
- }
-
- &__controls {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
-
- &__next, &__prev {
- @extend %big-icon-button;
-
- position: absolute;
- top: 50%;
- margin-top: -0.5em;
- pointer-events: auto;
- cursor: pointer;
- padding: 0;
- }
+ }
+
+ :local(.link-code) {
+ position: absolute;
- &__prev {
- left: 0.2em;
- }
+ bottom: -36px;
- &__next {
- right: 0.2em;
- }
- }
+ @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 6b13dabd4f325a0884a47d221e7297430df7d4f6..ed742c0a9b1f707031b5cdb417ca727dcd4a3b5a 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -24,46 +24,48 @@ body {
padding: 0;
}
-.home {
+:local(.home) {
position: absolute;
display: flex;
width: 100%;
height: 100%;
}
-.main-content {
+:local(.main-content) {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
z-index: 2;
- &--noninteractive {
+ &:local(.noninteractive) {
pointer-events: none;
}
}
-.background-video {
+:local(.background-video) {
position: fixed;
top: 0;
left: 0;
- opacity: 0.45;
+ opacity: 0.5;
min-width: 100%;
+ filter: saturate(1.5);
min-height: 100%;
z-index: 1;
}
-.header-content {
- padding: 1.5em 2.5em 1.5em 2.5em;
+:local(.header-content) {
+ padding: 0.5em 1.75em 0.5em 1.75em;
background-color: $darkest-transparent;
- min-height: 90px;
- height: 90px;
+ min-height: 65px;
+ height: 65px;
display: flex;
border-bottom: 1px solid $darkest-grey;
- &__title {
+ :local(.title-and-nav) {
display: flex;
width: $header-section-width;
+ cursor: pointer;
@media (max-width: 768px) {
justify-content: center;
@@ -73,97 +75,45 @@ body {
flex: 1 1 $header-section-width;
}
- &__name {
+ :local(.name) {
width: 200px;
}
- &__preview {
- color: $grey-text;
- margin-left: 10px;
+ :local(.hubs) {
+ font-size: 2.5em;
+ font-weight: bold;
+ pointer-events: none;
}
- }
- &__entry-code {
- @media (max-width: 1024px) {
- display: none;
+ :local(.preview) {
+ color: $grey-text;
+ margin-left: 10px;
+ margin-right: 20px;
+ pointer-events: none;
}
- flex: 10;
- text-align: center;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
+ :local(.links) {
+ display: flex;
+ align-items: center;
- &__link {
- color: white;
- text-decoration-color: $light-grey;
+ a {
+ margin: 0px 16px 0px 0px;
+ color: white;
+ font-weight: bold;
+ font-size: 1.4em;
+ text-decoration: none;
+ }
}
}
- &__experiment {
+ :local(.ident) {
text-align: right;
flex: 1 1 $header-section-width;
width: $header-section-width;
- color: $grey-text;
- font-size: 1.0em;
- font-weight: lighter;
- white-space: nowrap;
-
- @media (max-width: 768px) {
- display: none;
- }
-
- &__container {
- display: flex;
- justify-content: flex-end;
- }
-
- &__icon {
- margin-left: 12px;
- margin-right: 12px;
- }
-
- &__info {
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- &__header {
- a {
- color: $grey-text;
- }
- }
-
- &__link {
- color: $dark-grey;
- font-size: 0.8em;
- }
- }
}
}
-.header-subtitle {
- @media (min-width: 1024px) {
- display: none;
- }
-
- padding: 8px;
- background-color: $darkest-transparent;
- text-align: center;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- border-bottom: 2px solid $darkest-grey;
-
- &__link {
- color: white;
- text-decoration-color: $light-grey;
- }
-}
-
-.hero-content {
+:local(.hero-content) {
flex: 10;
min-height: 740px;
display: flex;
@@ -176,7 +126,7 @@ body {
min-height: 490px;
}
- &__attribution {
+ :local(.attribution) {
position: absolute;
right: 12px;
bottom: 12px;
@@ -189,70 +139,72 @@ body {
}
}
- &__container {
+ :local(.container) {
padding-top: 2vw;
padding-left: 2.1em;
padding-right: 2.1em;
- flex: 10;
+ flex: 2;
text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
- @media (max-height: 812px) , (max-width: 768px) {
- flex: 0 0 auto;
- }
-
@media (max-height: 720px) {
padding-bottom: 0px;
+ flex: 1;
}
- &__title {
+ :local(.title) {
font-size: 4vw;
font-weight: bold;
@media (max-width: 768px) , (max-height: 715px) {
- font-size: 1.9em;
+ font-size: 1.9em;
}
@media (max-width: 768px) {
- text-align: center;
+ text-align: center;
}
@media (min-width: 1824px) {
- font-size: 4.5em;
+ font-size: 4.5em;
}
}
- &__subtitle {
+ :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;
+ font-size: 1.1em;
+ margin-top: 0.2em;
}
@media (max-width: 768px) {
- text-align: center;
+ text-align: center;
}
@media (min-width: 1824px) {
- font-size: 2.8em;
+ font-size: 2.8em;
+ }
+
+ @media (max-height: 720px) {
+ display: none;
}
}
}
- &__create {
+ :local(.create) {
padding: 2.1em;
padding-bottom: 3.5vw;
+ flex: 4;
+ position: relative;
@media (max-width: 768px) {
padding: 0.5em;
- align-self: center;
}
}
}
-.footer-content {
+:local(.footer-content) {
padding: 1em 2.25em 1em 2.25em;
background-color: $darkest-transparent;
min-height: 80px;
@@ -261,28 +213,28 @@ body {
align-items: center;
justify-content: center;
- &__links {
+ :local(.links) {
text-align: center;
color: $dark-grey;
display: flex;
flex-direction: column;
- &__top {
+ :local(.top) {
display: flex;
justify-content: space-between;
}
- &__link {
+ :local(.link) {
color: $grey-text;
margin-left: 8px;
margin-right: 8px;
}
- &__bottom {
+ :local(.bottom) {
margin-top: 8px;
a {
- color: $grey-text;
+ color: $grey-text;
}
}
}
diff --git a/src/assets/stylesheets/info-dialog.scss b/src/assets/stylesheets/info-dialog.scss
index 58b2259fc71f0097d8f2b032b1fcc9bfa5305251..11c79e6de8bb8a08692be706a96b4216c77ca894 100644
--- a/src/assets/stylesheets/info-dialog.scss
+++ b/src/assets/stylesheets/info-dialog.scss
@@ -11,14 +11,10 @@
.dialog {
display: grid;
grid-template-columns: 1fr 20px minmax(200px, 525px) 20px 1fr;
- grid-template-rows: 1fr 20px 275px 20px 1fr;
+ grid-template-rows: 1fr 20px minmax(200px, max-content) 20px 1fr;
width: 100%;
height: 100%;
- background-color: rgba(0,0,0,.6);
-
- &--tall {
- grid-template-rows: 1fr 20px minmax(200px, max-content) 20px 1fr;
- }
+ background-color: rgba(0,0,0,.2);
&__box {
grid-column: 3;
@@ -28,29 +24,29 @@
&__contents {
padding: 30px;
- background-color: rgba(0,0,0,0.8);
+ background-color: rgba(0,0,0,0.9);
box-shadow: 0px 0px 30px 1px #202020;
border-radius: 8px;
- height: 100%;
display: flex;
flex-direction: column;
text-align: center;
position: relative;
&__title {
- @extend %top-title;
- margin-bottom: 20px;
+ @extend %top-title;
+ margin-bottom: 20px;
}
&__body {
- font-size: 1.1em;
- color: $grey-text;
- display: flex;
- flex-direction: column;
- height: 100%;
- overflow-y: auto;
-
- a { color: white }
+ font-size: 1.1em;
+ color: $grey-text;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow-y: auto;
+ margin: 10px 0;
+
+ a { color: white }
}
&__links {
@@ -65,21 +61,21 @@
&__close {
- position: absolute;
- left: 12px;
- top: 6px;
- color: white;
- font-size: 1.4em;
-
- background: none;
- cursor: pointer;
- border: none;
+ position: absolute;
+ left: 12px;
+ top: 6px;
+ color: white;
+ font-size: 1.4em;
+
+ background: none;
+ cursor: pointer;
+ border: none;
}
}
}
}
-.invite-form, .add-media-form {
+.invite-form, .add-media-form, .custom-scene-form {
display: flex;
flex-direction: column;
align-items: center;
@@ -111,7 +107,7 @@
}
&__action-button {
- @extend %bottom-button;
+ @extend %bottom-action-button;
margin-left: 6px;
margin-right: 6px;
appearance: none;
@@ -149,7 +145,6 @@
&__submit {
@extend %bottom-button;
- border: 0;
margin-top: 0;
margin-bottom: 0;
}
@@ -162,6 +157,7 @@
&__privacy_checkbox {
@extend %checkbox;
vertical-align: middle;
+ margin-bottom: 18px;
}
&__privacy_checkbox:checked {
diff --git a/src/assets/stylesheets/profile.scss b/src/assets/stylesheets/profile.scss
index 734212f9ebd6251d5da8e1956bdbdf4ae4bcfd12..e0434e022f35280e56848c6b12e609928567237a 100644
--- a/src/assets/stylesheets/profile.scss
+++ b/src/assets/stylesheets/profile.scss
@@ -15,6 +15,10 @@
margin-bottom: 0.5em;
width: 95%;
text-align: center;
+
+ .loading-panel {
+ background: transparent;
+ }
}
&__avatar-selector {
@@ -30,7 +34,7 @@
}
&__box {
- border-radius: 8px;
+ border-radius: 18px;
box-shadow: 0px 0px 30px 1px #202020;
display: flex;
flex-direction: column;
@@ -52,8 +56,8 @@
margin: 16px;
a {
- margin: 0px 12px;
- color: $light-text;
+ margin: 0px 12px;
+ color: $light-text;
}
}
@@ -87,7 +91,7 @@
}
&__form-submit {
- @extend %bottom-button;
+ @extend %bottom-action-button;
margin: 0;
min-height: max-content;
}
@@ -101,17 +105,18 @@
&__menu-buttons {
display: flex;
- margin: 0 20px;
+ margin: 0 0 0 20px;
&__menu-button {
@extend %fa-icon-button;
margin-left: 16px;
&__icon {
- @extend %fa-icon-button-icon;
- background: transparent;
- border-color: $darker-grey;
- color: $light-grey;
+ @extend %glass-icon;
+ @extend %fa-icon-big;
+
+ background: transparent;
+ color: white;
}
}
}
@@ -124,6 +129,14 @@
}
&__profile_display_name {
+ margin: 0 30px 0 0;
+
+ @extend %glass-text;
+
+ img {
+ @extend %glass-icon;
+ }
+
margin-left: 16px;
cursor: pointer;
font-size: 1.2em;
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index e54447f58f853687b1f3f3d2be6d136d95df01c1..1e52392c3cd57c4704d7822c3f31e8adf79c086c 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -1,3 +1,4 @@
+$light-transparent: rgba(0, 0, 0, 0.2);
$dark-transparent: rgba(0, 0, 0, 0.4);
$darker-transparent: rgba(0, 0, 0, 0.6);
$darkest-transparent: rgba(0, 0, 0, 0.9);
@@ -12,24 +13,59 @@ $darkest-grey: rgba(32, 32, 32, 1.0);
font-family: 'Zilla Slab', sans-serif;
}
+%glass-text {
+ font-family: 'Zilla Slab', sans-serif;
+ text-shadow: 0px 0px 4px rgba(0, 0, 0, 1.0);
+ color: white;
+}
+
+%glass-icon {
+ -webkit-filter: drop-shadow( 0px 0px 3px #606060 );
+ filter: drop-shadow( 0px 0px 3px #606060 );
+}
+
%rounded-border {
border: 3px solid white;
box-sizing: border-box;
border-radius: 14px;
}
+%big-action-button {
+ @extend %default-font;
+ outline-style: none;
+ font-size: 2em;
+ font-weight: bold;
+ cursor: pointer;
+ border: 3px solid white;
+ border-radius: 26px;
+ padding: 12px 64px 12px 64px;
+ background: #2F80ED;
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 150px;
+ margin-right: 12px;
+ margin-left: 12px;
+ white-space: nowrap;
+}
+
%bottom-button {
+ @extend %action-button;
+ margin: 16px 0;
+}
+
+%action-button {
@extend %default-font;
outline-style: none;
- font-size: 1em;
font-weight: bold;
- margin-top: auto;
- margin-bottom: 24px;
cursor: pointer;
border: 3px solid white;
- border-radius: 14px;
+ border-radius: 26px;
+ height: 64px;
padding: 12px;
- background: none;
+ background: #2F80ED;
+ font-size: 1.3em;
color: white;
display: flex;
align-items: center;
@@ -38,8 +74,15 @@ $darkest-grey: rgba(32, 32, 32, 1.0);
min-width: 150px;
}
+%bottom-action-button {
+ @extend %bottom-button;
+ background: #2F80ED;
+ font-size: 1.3em;
+}
+
%top-title {
font-size: 1.3em;
+ font-weight: bold;
}
%top-subtitle {
@@ -89,6 +132,18 @@ $darkest-grey: rgba(32, 32, 32, 1.0);
outline-style: none;
}
+%fa-icon-big {
+ width: 40px !important;
+ height: 40px;
+ display: inline-block;
+ font-size: 22px;
+ vertical-align: sub;
+ line-height: 42px;
+ svg {
+ margin-left: 0px;
+ }
+}
+
%fa-icon-button-icon {
background: black;
width: 40px !important;
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index 5fe3b55f81ff8db50a7502cc401c4caeef6a2de5..4c10d1b97c30efbb3768064e4543325503e5c033 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -1,3 +1,5 @@
+@import 'shared';
+
#ui-root .ui {
@extend %default-font;
@@ -31,7 +33,7 @@
}
.blurred {
- filter: blur(5px);
+ filter: blur(5px) saturate(1.1) brightness(1.1);
}
.ui-dialog {
@@ -54,8 +56,8 @@
}
.ui-dialog-box-contents {
- background-color: $darker-transparent;
- border-radius: 8px;
+ background-color: $light-transparent;
+ border-radius: 18px;
width: 100%;
height: 100%;
@@ -69,3 +71,45 @@
.ui-interactive {
pointer-events: auto;
}
+
+:local(.invite-nag-button) {
+ position: absolute;
+ top: 110px;
+ left: 0;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 80px;
+ pointer-events: none;
+
+ button {
+ @extend %big-action-button;
+ pointer-events: auto;
+ }
+}
+
+:local(.presence-info) {
+ text-align: right;
+ position: absolute;
+ top: 0;
+ right: 16px;
+ margin: 16px 0;
+ display: flex;
+ 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 );
+
+ @media (min-width: 769px) and (min-height: 421px) {
+ flex: 1;
+ }
+ @media (max-width: 768px) , (max-height: 420px) {
+ margin: 16px 8px;
+ }
+ :local(.occupant-count) {
+ margin: 0 12px;
+ }
+}
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 1f8ae6a1b0986b0576ad3dd567b1fc8bb96c1d86..c326deb1b1555bbd246c1e33ffb050af23ef1811 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -4,23 +4,25 @@
"entry.desktop-screen": "Screen",
"entry.mobile-screen": "Phone",
"entry.mobile-safari": "Safari",
- "entry.generic-prefix": "Enter in ",
- "entry.generic-medium": "VR",
+ "entry.generic-prefix": "Enter with ",
+ "entry.generic-medium": "PC VR",
"entry.generic-subtitle-desktop": "Oculus or SteamVR",
"entry.gearvr-prefix": "Enter on ",
"entry.gearvr-medium": "Gear VR",
- "entry.device-prefix-desktop": "Send to ",
- "entry.device-prefix-mobile": "Enter on ",
- "entry.device-medium": "Device",
- "entry.device-subtitle-desktop": "Standalone Headset or Phone",
- "entry.device-subtitle-mobile": "Mobile Headset or PC",
+ "entry.device-prefix-desktop": "Use a ",
+ "entry.device-prefix-mobile": "Use a ",
+ "entry.device-medium": "Mobile Headset",
+ "entry.device-subtitle-desktop": "Standalone or Phone Clip-in",
+ "entry.device-subtitle-mobile": "Standalone or Phone Clip-in",
"entry.device-subtitle-vr": "Phone or PC",
"entry.cardboard": "Enter on Google Cardboard",
"entry.daydream-prefix": "Enter on ",
"entry.daydream-medium": "Daydream",
"entry.daydream-via-chrome": "Using Google Chrome",
+ "entry.invite-others": "invite others",
+ "entry.invite-others-nag": "invite others to join",
"entry.enable-screen-sharing": "Share my desktop",
- "profile.save": "SAVE",
+ "profile.save": "save",
"profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
"profile.header": "Your display name:",
"profile.avatar-selector.loading": "Loading Avatars...",
@@ -29,13 +31,13 @@
"audio.title": "Test your audio",
"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",
"audio.granted-title": "Mic permissions granted",
"audio.granted-subtitle": "You can still mute yourself in-game",
- "audio.granted-next": "NEXT",
+ "audio.granted-next": "next",
"exit.subtitle.exited": "Your session has ended. Refresh your browser to start a new one.",
"exit.subtitle.closed": "This room is no longer available.",
"exit.subtitle.full": "This room is full, please try again later.",
@@ -45,15 +47,13 @@
"autoexit.title_units": " seconds",
"autoexit.subtitle": "You have started another session.",
"autoexit.cancel": "CANCEL",
- "home.create_header": "Name your room:",
- "home.environment_picker_footer": "Choose a scene",
+ "home.room_create_options": "options",
+ "home.room_create_button": "create a room",
"home.create_name.validation_warning": "Invalid name, limited to 4 to 64 characters and limited symbols.",
- "home.webvr_disclaimer_pre": "A ",
- "home.webvr_disclaimer_post": " experiment by ",
- "home.webvr_disclaimer_mr_team": "Mozilla Mixed Reality",
- "home.view_source": "View Source",
"home.join_us": "Join the Conversation",
"home.report_issue": "Report Issues",
+ "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",
@@ -62,15 +62,16 @@
"home.made_with_love": "made with 🦆by ",
"home.environment_author_by": " by ",
"home.dialog.close": "CLOSE",
- "home.have_entry_code": "Have a link code?",
+ "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.in_your_browser": "In your device's browser, go to:",
+ "link.in_your_browser": "In your headset's browser, go to:",
"link.enter_code": "Then, enter this link code:",
"link.do_not_close": "Keep this dialog open to use this code.",
"link.link_page_header": "Enter your code:",
"link.dont_have_a_code": "Don't have a code?",
"link.create_a_room": "Create a Room",
- "link.try_again": "We couldn't find that code. Please try again."
+ "link.try_again": "We couldn't find that code. Please try again.",
+ "help.report_issue": "Report an Issue"
}
}
diff --git a/src/avatar-selector.html b/src/avatar-selector.html
index d125ca51622c0ed77dec9b1285e2a1b0380c8a27..44e92f4e6d19b5d7cc2258e56cfa76c08a20558a 100644
--- a/src/avatar-selector.html
+++ b/src/avatar-selector.html
@@ -5,11 +5,6 @@
<meta charset="utf-8">
<title>avatar selector</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
- <% if(NODE_ENV === "production") { %>
- <script src="https://cdn.rawgit.com/aframevr/aframe/1be48d9/dist/aframe-master.min.js" integrity="sha384-SXrfoMHbXpA5RZhIyhgaR6tQ764dDZsbFk3PiokC/tc0+NnW1yaYQMUzWtL06hnq" crossorigin="anonymous"></script>
- <% } else { %>
- <script src="https://cdn.rawgit.com/aframevr/aframe/1be48d9/dist/aframe-master.js" integrity="sha384-AmjDGOMbvTrrUFdeVWcBIlXRINIWnO8iwj/4VS21OWbYDsa/7nheOIyPAPJSkR6J" crossorigin="anonymous"></script>
- <% } %>
</head>
<body>
diff --git a/src/avatar-selector.js b/src/avatar-selector.js
index 296b94e4dd1608abd97e4a6f6e7f4f1270a80301..f9ecc3bd59986636a49cc190bb6cb86b3a45f11b 100644
--- a/src/avatar-selector.js
+++ b/src/avatar-selector.js
@@ -1,3 +1,4 @@
+import "aframe";
import ReactDOM from "react-dom";
import React from "react";
import { IntlProvider, addLocaleData } from "react-intl";
@@ -25,16 +26,19 @@ addLocaleData([...en]);
registerTelemetry();
-const hash = new URLSearchParams(location.hash.replace(/^#/, "?"));
+function getHashArg(arg) {
+ return new URLSearchParams(location.hash.replace(/^#/, "?")).get(arg);
+}
+
window.APP = new App();
-window.APP.quality = hash.get("quality") || AFRAME.utils.device.isMobile() ? "low" : "high";
+window.APP.quality = getHashArg("quality") || AFRAME.utils.device.isMobile() ? "low" : "high";
function postAvatarIdToParent(newAvatarId) {
window.parent.postMessage({ avatarId: newAvatarId }, location.origin);
}
function mountUI() {
- const avatarId = hash.get("avatar_id");
+ const avatarId = getHashArg("avatar_id");
ReactDOM.render(
<IntlProvider locale={lang} messages={messages}>
<AvatarSelector {...{ avatars, avatarId, onChange: postAvatarIdToParent }} />
diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js
index e2e4b61e214a278c3f9da580464cc3af12a3e4d0..b5904f0fc36c9695908f56017772449ee99dd7e3 100644
--- a/src/components/gltf-model-plus.js
+++ b/src/components/gltf-model-plus.js
@@ -82,7 +82,7 @@ function cloneGltf(gltf) {
/// or templates associated with any of their nodes.)
///
/// Returns the A-Frame entity associated with the given node, if one was constructed.
-const inflateEntities = function(node, templates, gltfPath) {
+const inflateEntities = function(node, templates, gltfPath, isRoot) {
// inflate subtrees first so that we can determine whether or not this node needs to be inflated
const childEntities = [];
const children = node.children.slice(0); // setObject3D mutates the node's parent, so we have to copy
@@ -94,7 +94,7 @@ const inflateEntities = function(node, templates, gltfPath) {
}
const nodeHasBehavior = node.userData.components || node.name in templates;
- if (!nodeHasBehavior && !childEntities.length) {
+ if (!nodeHasBehavior && !childEntities.length && !isRoot) {
return null; // we don't need an entity for this node
}
@@ -287,7 +287,7 @@ AFRAME.registerComponent("gltf-model-plus", {
this.model.animations = model.animations;
let object3DToSet = this.model;
- if (this.data.inflate && (this.inflatedEl = inflateEntities(this.model, this.templates, gltfPath))) {
+ if (this.data.inflate && (this.inflatedEl = inflateEntities(this.model, this.templates, gltfPath, true))) {
this.el.appendChild(this.inflatedEl);
object3DToSet = this.inflatedEl.object3D;
// TODO: Still don't fully understand the lifecycle here and how it differs between browsers, we should dig in more
diff --git a/src/components/stats-plus.css b/src/components/stats-plus.css
index 80e411dfc77fce5109655aefd2e0347d59a01cda..f3850c47b80cbc9f456c30f9ef1a1e7b17fb500f 100644
--- a/src/components/stats-plus.css
+++ b/src/components/stats-plus.css
@@ -14,8 +14,8 @@
font-family: monospace;
cursor: pointer;
position: absolute;
- top: 10px;
- right: 0;
+ top: 40px;
+ right: 16px;
padding: 8px 12px;
color: #aaa;
font-size: 10px;
diff --git a/src/gltf-component-mappings.js b/src/gltf-component-mappings.js
index 0552e61c854ad7efe6ed5e97020b512ed5d0feac..cc22ef521f2ee74281f2de9e636d867c21d89b1d 100644
--- a/src/gltf-component-mappings.js
+++ b/src/gltf-component-mappings.js
@@ -11,6 +11,9 @@ AFRAME.GLTFModelPlus.registerComponent("gltf-model-plus", "gltf-model-plus");
AFRAME.GLTFModelPlus.registerComponent("body", "body");
AFRAME.GLTFModelPlus.registerComponent("hide-when-quality", "hide-when-quality");
AFRAME.GLTFModelPlus.registerComponent("light", "light");
+AFRAME.GLTFModelPlus.registerComponent("directional-light", "light");
+AFRAME.GLTFModelPlus.registerComponent("ambient-light", "light");
+AFRAME.GLTFModelPlus.registerComponent("point-light", "light");
AFRAME.GLTFModelPlus.registerComponent("skybox", "skybox");
AFRAME.GLTFModelPlus.registerComponent("layers", "layers");
AFRAME.GLTFModelPlus.registerComponent("shadow", "shadow");
diff --git a/src/hub.html b/src/hub.html
index abce86320767d84b2583ddbde4e7aa060203e9be..45a849b2fc267bb1b35cdf84fe8be64be50852a7 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -5,19 +5,12 @@
<!-- DO NOT REMOVE/EDIT THIS COMMENT - HUB_META_TAGS -->
<meta charset="utf-8">
- <meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="<%= ORIGIN_TRIAL_EXPIRES %>" content="<%= ORIGIN_TRIAL_TOKEN %>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<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">
- <% if(NODE_ENV === "production") { %>
- <script src="https://cdn.rawgit.com/aframevr/aframe/1be48d9/dist/aframe-master.min.js" integrity="sha384-SXrfoMHbXpA5RZhIyhgaR6tQ764dDZsbFk3PiokC/tc0+NnW1yaYQMUzWtL06hnq" crossorigin="anonymous"></script>
- <% } else { %>
- <script src="https://cdn.rawgit.com/aframevr/aframe/1be48d9/dist/aframe-master.js" integrity="sha384-AmjDGOMbvTrrUFdeVWcBIlXRINIWnO8iwj/4VS21OWbYDsa/7nheOIyPAPJSkR6J" crossorigin="anonymous"></script>
- <% } %>
-
<!-- HACK: this has to run after A-Frame but before our bundle, since A-Frame blows away the local storage setting -->
<script src="https://cdn.rawgit.com/gfodor/ba8f88d9f34fe9cbe59a01ce3c48420d/raw/03e31f0ef7b9eac5e947bd39e440f34df0701f75/naf-janus-adapter-logging.js" integrity="sha384-4q1V8Q88oeCFriFefFo5uEUtMzbw6K116tFyC9cwbiPr6wEe7050l5HoJUxMvnzj" crossorigin="anonymous"></script>
</head>
diff --git a/src/hub.js b/src/hub.js
index 94a423315a65ad7424ecb8ab77bb69735ac410fa..3b4744abf0bd38a7361d6640aa3b5a6d878ccd5d 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -2,6 +2,7 @@ console.log(`Hubs version: ${process.env.BUILD_VERSION || "?"}`);
import "./assets/stylesheets/hub.scss";
+import "aframe";
import { patchWebGLRenderingContext } from "./utils/webgl";
patchWebGLRenderingContext();
@@ -510,9 +511,21 @@ const onReady = async () => {
.receive("ok", data => {
const hub = data.hubs[0];
const defaultSpaceTopic = hub.topics[0];
- const gltfBundleUrl = defaultSpaceTopic.assets.find(a => a.asset_type === "gltf_bundle").src;
+ const sceneUrl = defaultSpaceTopic.assets.find(a => a.asset_type === "gltf_bundle").src;
+
+ console.log(`Scene URL: ${sceneUrl}`);
+
+ if (/\.gltf/i.test(sceneUrl) || /\.glb/i.test(sceneUrl)) {
+ const gltfEl = document.createElement("a-entity");
+ gltfEl.setAttribute("gltf-model-plus", { src: sceneUrl, inflate: true });
+ gltfEl.addEventListener("model-loaded", () => initialEnvironmentEl.emit("bundleloaded"));
+ initialEnvironmentEl.appendChild(gltfEl);
+ } else {
+ // TODO remove, and remove bundleloaded event
+ initialEnvironmentEl.setAttribute("gltf-bundle", `src: ${sceneUrl}`);
+ }
+
setRoom(hub.hub_id, hub.name);
- initialEnvironmentEl.setAttribute("gltf-bundle", `src: ${gltfBundleUrl}`);
hubChannel.setPhoenixChannel(channel);
})
.receive("error", res => {
diff --git a/src/index.js b/src/index.js
index f61c18337e40519a46693bf09607c105be58efae..7fddba12131a6d46fea444a42b2001acfe7afeb7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,7 +11,9 @@ registerTelemetry();
ReactDOM.render(
<HomeRoot
initialEnvironment={qs.get("initial_environment")}
- dialogType={qs.has("list_signup") ? InfoDialog.dialogTypes.updates : null}
+ dialogType={
+ qs.has("list_signup") ? InfoDialog.dialogTypes.updates : qs.has("report") ? InfoDialog.dialogTypes.report : null
+ }
/>,
document.getElementById("home-root")
);
diff --git a/src/link.html b/src/link.html
index 8543e83b88b0495bd8e34bb2110bbba6bd3a7ecd..954061491faa3b257adedf87df06a26cfc58f79b 100644
--- a/src/link.html
+++ b/src/link.html
@@ -8,12 +8,6 @@
<title>Enter Code | Hubs by Mozilla</title>
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
- <% if(NODE_ENV === "production") { %>
- <script src="https://cdn.rawgit.com/aframevr/aframe/1be48d9/dist/aframe-master.min.js" integrity="sha384-SXrfoMHbXpA5RZhIyhgaR6tQ764dDZsbFk3PiokC/tc0+NnW1yaYQMUzWtL06hnq" crossorigin="anonymous"></script>
- <% } else { %>
- <script src="https://cdn.rawgit.com/aframevr/aframe/1be48d9/dist/aframe-master.js" integrity="sha384-AmjDGOMbvTrrUFdeVWcBIlXRINIWnO8iwj/4VS21OWbYDsa/7nheOIyPAPJSkR6J" crossorigin="anonymous"></script>
- <% } %>
</head>
<body>
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index 12e7abc171ac4c3e4c861e40e70cb08788661076..d017dcad47918a476931237eb453fa5d1971a8a8 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -4,27 +4,8 @@ import cx from "classnames";
import styles from "../assets/stylesheets/2d-hud.scss";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
-
-const qs = new URLSearchParams(location.search);
-function qsTruthy(param) {
- const val = qs.get(param);
- // if the param exists but is not set (e.g. "?foo&bar"), its value is the empty string.
- return val === "" || /1|on|true/i.test(val);
-}
-const enableMediaTools = qsTruthy("mediaTools");
-
-const TwoDHUD = ({
- muted,
- frozen,
- spacebubble,
- onToggleMute,
- onToggleFreeze,
- onToggleSpaceBubble,
- onClickAddMedia
-}) => (
- <div className={styles.container}>
+const TopHUD = ({ muted, frozen, spacebubble, onToggleMute, onToggleFreeze, onToggleSpaceBubble }) => (
+ <div className={cx(styles.container, styles.top)}>
<div className={cx("ui-interactive", styles.panel, styles.left)}>
<div
className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })}
@@ -44,26 +25,32 @@ const TwoDHUD = ({
onClick={onToggleSpaceBubble}
/>
</div>
- {enableMediaTools ? (
- <div
- className={cx("ui-interactive", styles.iconButton, styles.small, styles.addMediaButton)}
- title="Add Media"
- onClick={onClickAddMedia}
- >
- <FontAwesomeIcon icon={faPlus} />
- </div>
- ) : null}
</div>
);
-TwoDHUD.propTypes = {
+TopHUD.propTypes = {
muted: PropTypes.bool,
frozen: PropTypes.bool,
spacebubble: PropTypes.bool,
onToggleMute: PropTypes.func,
onToggleFreeze: PropTypes.func,
- onToggleSpaceBubble: PropTypes.func,
- onClickAddMedia: PropTypes.func
+ onToggleSpaceBubble: PropTypes.func
+};
+
+const BottomHUD = ({ onCreateObject }) => (
+ <div className={cx(styles.container, styles.bottom)}>
+ {new URLSearchParams(document.location.search).get("mediaTools") === "true" && (
+ <div
+ className={cx("ui-interactive", styles.iconButton, styles.large, styles.createObject)}
+ title={"Create Object"}
+ onClick={onCreateObject}
+ />
+ )}
+ </div>
+);
+
+BottomHUD.propTypes = {
+ onCreateObject: PropTypes.func
};
-export default TwoDHUD;
+export default { TopHUD, BottomHUD };
diff --git a/src/react-components/media-tools-dialog.js b/src/react-components/create-object-dialog.js
similarity index 50%
rename from src/react-components/media-tools-dialog.js
rename to src/react-components/create-object-dialog.js
index e0753b2882b9462e44a49023df9171822fbccf02..f450f6f478e0907e8ebebcbde204be52260c5b1b 100644
--- a/src/react-components/media-tools-dialog.js
+++ b/src/react-components/create-object-dialog.js
@@ -7,63 +7,70 @@ const attributionHostnames = {
"giphy.com": giphyLogo
};
-let lastAddMediaUrl = "";
-export default class MediaToolsDialog extends Component {
+const DEFAULT_OBJECT_URL = "https://asset-bundles-prod.reticulum.io/interactables/Ducky/DuckyMesh-438ff8e022.gltf";
+
+let lastUrl = "";
+
+export default class CreateObjectDialog extends Component {
state = {
- addMediaUrl: ""
+ url: ""
};
static propTypes = {
- onAddMedia: PropTypes.func,
+ onCreateObject: PropTypes.func,
onCloseDialog: PropTypes.func
};
- constructor() {
- super();
- this.onAddMediaClicked = this.onAddMediaClicked.bind(this);
- this.onUrlChange = this.onUrlChange.bind(this);
- }
-
componentDidMount() {
- this.setState({ addMediaUrl: lastAddMediaUrl }, () => {
+ this.setState({ url: lastUrl }, () => {
this.onUrlChange({ target: this.input });
});
}
componentWillUnmount() {
- lastAddMediaUrl = this.state.addMediaUrl;
+ lastUrl = this.state.url;
}
- onUrlChange(e) {
- this.setState({
- addMediaUrl: e.target.value,
- attributionImage: e.target.validity.valid && attributionHostnames[new URL(e.target.value).hostname]
- });
- }
+ onUrlChange = e => {
+ if (e && e.target.value && e.target.value !== "") {
+ this.setState({
+ url: e.target.value,
+ attributionImage: e.target.validity.valid && attributionHostnames[new URL(e.target.value).hostname]
+ });
+ }
+ };
- onAddMediaClicked() {
- this.props.onAddMedia(this.state.addMediaUrl);
+ onCreateClicked = () => {
+ this.props.onCreateObject(this.state.url || DEFAULT_OBJECT_URL);
this.props.onCloseDialog();
- }
+ };
render() {
return (
<div>
- <div>Tip: You can paste media urls directly into hubs with ctrl+v</div>
- <form onSubmit={this.onAddMediaClicked}>
+ {!AFRAME.utils.device.isMobile() ? (
+ <div>
+ Paste a URL from the web to create an object in the room.
+ <br />
+ Tip: You can paste directly into Hubs using Ctrl+V
+ </div>
+ ) : (
+ <div>Paste a URL from the web to create an object in the room.</div>
+ )}
+
+ <form onSubmit={this.onCreateClicked}>
<div className="add-media-form">
<input
ref={el => (this.input = el)}
type="url"
placeholder="Image, Video, or GLTF URL"
className="add-media-form__link_field"
- value={this.state.addMediaUrl}
+ value={this.state.url}
onChange={this.onUrlChange}
- required
/>
<div className="add-media-form__buttons">
<button className="add-media-form__action-button">
- <span>Add</span>
+ <span>create</span>
</button>
</div>
{this.state.attributionImage ? (
diff --git a/src/react-components/entry-buttons.js b/src/react-components/entry-buttons.js
index 132361cbe1800ee14543f6da4047c171745d66ac..9e64b3ab4c419b6728e1351e7080629f1b6a97ea 100644
--- a/src/react-components/entry-buttons.js
+++ b/src/react-components/entry-buttons.js
@@ -8,20 +8,21 @@ import GenericVREntryImg from "../assets/images/generic_vr_entry.svg";
import GearVREntryImg from "../assets/images/gearvr_entry.svg";
import DaydreamEntryImg from "../assets/images/daydream_entry.svg";
import DeviceEntryImg from "../assets/images/device_entry.svg";
+import styles from "../assets/stylesheets/entry.scss";
const EntryButton = props => (
- <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">
+ <button className={styles.entryButton} onClick={props.onClick}>
+ <img src={props.iconSrc} className={styles.icon} />
+ <div className={styles.label}>
+ <div className={styles.contents}>
<span>
<FormattedMessage id={props.prefixMessageId} />
</span>
- <span className="entry-button--bolded">
+ <span className={styles.bolded}>
<FormattedMessage id={props.mediumMessageId} />
</span>
{props.subtitle && (
- <div className="entry-button__subtitle">
+ <div className={styles.subtitle}>
<FormattedMessage id={props.subtitle} />
</div>
)}
diff --git a/src/react-components/footer.js b/src/react-components/footer.js
deleted file mode 100644
index fbc40988748fba5a238f0fe807d115468cd79f38..0000000000000000000000000000000000000000
--- a/src/react-components/footer.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faUsers } from "@fortawesome/free-solid-svg-icons/faUsers";
-import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
-import { faShareAlt } from "@fortawesome/free-solid-svg-icons/faShareAlt";
-import { faExclamation } from "@fortawesome/free-solid-svg-icons/faExclamation";
-import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
-import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown";
-import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
-import { faNewspaper } from "@fortawesome/free-solid-svg-icons/faNewspaper";
-
-import styles from "../assets/stylesheets/footer.scss";
-
-export default class Footer extends Component {
- static propTypes = {
- hubName: PropTypes.string,
- occupantCount: PropTypes.number,
- onClickInvite: PropTypes.func,
- onClickReport: PropTypes.func,
- onClickUpdates: PropTypes.func,
- onClickHelp: PropTypes.func
- };
- state = {
- menuVisible: false
- };
- render() {
- const menuVisible = this.state.menuVisible;
- return (
- <div className={styles.container}>
- <div className={styles.header}>
- <div className={styles.hubInfo}>
- <span>{this.props.hubName}</span>
- </div>
- <button className={styles.menuButton} onClick={() => this.setState({ menuVisible: !menuVisible })}>
- <i className={styles.menuButtonIcon}>
- <FontAwesomeIcon className={styles.menuButtonNarrowCloseIcon} icon={menuVisible ? faArrowDown : faBars} />
- <FontAwesomeIcon className={styles.menuButtonWideCloseIcon} icon={menuVisible ? faTimes : faBars} />
- </i>
- </button>
- <div className={styles.hubStats}>
- <FontAwesomeIcon icon={faUsers} />
- <span className={styles.hubParticipantCount}>{this.props.occupantCount || "-"}</span>
- </div>
- </div>
- {menuVisible && (
- <div className={styles.menu}>
- <div className={styles.menuHeader}>
- <div className={styles.hubInfo}>
- <span>{this.props.hubName}</span>
- </div>
- <div className={styles.hubStats}>
- <FontAwesomeIcon icon={faUsers} />
- <span className={styles.hubParticipantCount}>{this.props.occupantCount || "-"}</span>
- </div>
- </div>
- <div className={styles.menuButtons}>
- <button className={styles.menuButton} onClick={this.props.onClickInvite}>
- <i className={styles.menuButtonIcon}>
- <FontAwesomeIcon icon={faShareAlt} />
- </i>
- <span className={styles.menuButtonText}>
- <strong>Invite</strong> Friends
- </span>
- </button>
- <button className={styles.menuButton} onClick={this.props.onClickHelp}>
- <i className={styles.menuButtonIcon}>
- <FontAwesomeIcon icon={faQuestion} />
- </i>
- <span className={styles.menuButtonText}>
- <strong>Learn</strong> the Basics
- </span>
- </button>
- <button className={styles.menuButton} onClick={this.props.onClickUpdates}>
- <i className={styles.menuButtonIcon}>
- <FontAwesomeIcon icon={faNewspaper} />
- </i>
- <span className={styles.menuButtonText}>
- <strong>Sign Up</strong> for Updates
- </span>
- </button>
- <button className={styles.menuButton} onClick={this.props.onClickReport}>
- <i className={styles.menuButtonIcon}>
- <FontAwesomeIcon icon={faExclamation} />
- </i>
- <span className={styles.menuButtonText}>
- <strong>Report</strong> an Issue
- </span>
- </button>
- </div>
- </div>
- )}
- </div>
- );
- }
-}
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index d27bc310dac25f0a480aa634afb2ae61ae7fa243..80df12ea336bfe0c35fae69ef05e38b95f88fde6 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -9,6 +9,8 @@ import homeVideoMp4 from "../assets/video/home.mp4";
import classNames from "classnames";
import { ENVIRONMENT_URLS } from "../assets/environments/environments";
+import styles from "../assets/stylesheets/index.scss";
+
import HubCreatePanel from "./hub-create-panel.js";
import InfoDialog from "./info-dialog.js";
@@ -36,7 +38,7 @@ class HomeRoot extends Component {
loadHomeVideo = () => {
const videoEl = document.querySelector("#background-video");
- videoEl.playbackRate = 0.75;
+ videoEl.playbackRate = 0.9;
function toggleVideo() {
// Play the video if the window/tab is visible.
if (document.hasFocus()) {
@@ -77,67 +79,35 @@ class HomeRoot extends Component {
render() {
const mainContentClassNames = classNames({
- "main-content": true,
- "main-content--noninteractive": !!this.state.dialogType
+ [styles.mainContent]: true,
+ [styles.noninteractive]: !!this.state.dialogType
});
const dialogTypes = InfoDialog.dialogTypes;
return (
<IntlProvider locale={lang} messages={messages}>
- <div className="home">
+ <div className={styles.home}>
<div className={mainContentClassNames}>
- <div className="header-content">
- <div className="header-content__title">
- <img className="header-content__title__name" src="../assets/images/logo.svg" />
- <div className="header-content__title__preview">preview</div>
- </div>
- <div className="header-content__entry-code">
- <a className="header-content__entry-code__link" href="/link" rel="nofollow">
- <FormattedMessage id="home.have_entry_code" />
- </a>
- </div>
- <div className="header-content__experiment">
- <div className="header-content__experiment__container">
- <img src="../assets/images/webvr_cube.svg" className="header-content__experiment__icon" />
- <div className="header-content__experiment__info">
- <div className="header-content__experiment__info__header">
- <span>
- <FormattedMessage id="home.webvr_disclaimer_pre" />
- </span>
- <span style={{ fontWeight: "bold" }}>WebVR</span>
- <span>
- <FormattedMessage id="home.webvr_disclaimer_post" />
- </span>
- <span>
- <a rel="noopener noreferrer" target="_blank" href="https://blog.mozvr.com">
- <FormattedMessage id="home.webvr_disclaimer_mr_team" />
- </a>
- </span>
- </div>
-
- <div>
- <a
- className="header-content__experiment__info__link"
- rel="noopener noreferrer"
- target="_blank"
- href="https://github.com/mozilla/hubs"
- >
- <FormattedMessage id="home.view_source" />
- </a>
- </div>
- </div>
+ <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.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>
</div>
</div>
+ <div className={styles.ident} />
</div>
- <div className="header-subtitle">
- <div>
- <a className="header-subtitle__link" href="/link" rel="nofollow">
- <FormattedMessage id="home.have_entry_code" />
- </a>
- </div>
- </div>
- <div className="hero-content">
- <div className="hero-content__attribution">
+ <div className={styles.heroContent}>
+ <div className={styles.attribution}>
Medieval Fantasy Book by{" "}
<a
target="_blank"
@@ -147,15 +117,15 @@ class HomeRoot extends Component {
Pixel
</a>
</div>
- <div className="hero-content__container">
- <div className="hero-content__container__title">
+ <div className={styles.container}>
+ <div className={styles.title}>
<FormattedMessage id="home.hero_title" />
</div>
- <div className="hero-content__container__subtitle">
+ <div className={styles.subtitle}>
<FormattedMessage id="home.hero_subtitle" />
</div>
</div>
- <div className="hero-content__create">
+ <div className={styles.create}>
{this.state.environments.length > 0 && (
<HubCreatePanel
initialEnvironment={this.props.initialEnvironment}
@@ -164,11 +134,11 @@ class HomeRoot extends Component {
)}
</div>
</div>
- <div className="footer-content">
- <div className="footer-content__links">
- <div className="footer-content__links__top">
+ <div className={styles.footerContent}>
+ <div className={styles.links}>
+ <div className={styles.top}>
<a
- className="footer-content__links__link"
+ className={styles.link}
rel="noopener noreferrer"
href="#"
onClick={this.showDialog(dialogTypes.slack)}
@@ -176,7 +146,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.join_us" />
</a>
<a
- className="footer-content__links__link"
+ className={styles.link}
rel="noopener noreferrer"
href="#"
onClick={this.showDialog(dialogTypes.updates)}
@@ -184,7 +154,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.get_updates" />
</a>
<a
- className="footer-content__links__link"
+ className={styles.link}
rel="noopener noreferrer"
href="#"
onClick={this.showDialog(dialogTypes.report)}
@@ -192,7 +162,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.report_issue" />
</a>
<a
- className="footer-content__links__link"
+ className={styles.link}
target="_blank"
rel="noopener noreferrer"
href="https://github.com/mozilla/hubs/blob/master/TERMS.md"
@@ -200,7 +170,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.terms_of_use" />
</a>
<a
- className="footer-content__links__link"
+ className={styles.link}
target="_blank"
rel="noopener noreferrer"
href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md"
@@ -208,7 +178,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.privacy_notice" />
</a>
</div>
- <div className="footer-content__links__bottom">
+ <div className={styles.bottom}>
<div>
<FormattedMessage id="home.made_with_love" />
<span style={{ fontWeight: "bold", color: "white" }}>Mozilla</span>
@@ -217,7 +187,7 @@ class HomeRoot extends Component {
</div>
</div>
</div>
- <video playsInline muted loop autoPlay className="background-video" id="background-video">
+ <video playsInline muted loop autoPlay className={styles.backgroundVideo} id="background-video">
<source src={homeVideoWebM} type="video/webm" />
<source src={homeVideoMp4} type="video/mp4" />
</video>
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index c005800d43f9a8a5411a447c1b53925609438d30..4fb1a9f4335cd7fd7dac40ae196535b614bf773c 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -2,15 +2,17 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { injectIntl, FormattedMessage } from "react-intl";
import { generateHubName } from "../utils/name-generation";
-import classNames from "classnames";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons/faAngleLeft";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { resolveURL, extractUrlBase } from "../utils/resolveURL";
+import InfoDialog from "./info-dialog.js";
import default_scene_preview_thumbnail from "../assets/images/default_thumbnail.png";
+import styles from "../assets/stylesheets/hub-create.scss";
const HUB_NAME_PATTERN = "^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$";
+const dialogTypes = InfoDialog.dialogTypes;
class HubCreatePanel extends Component {
static propTypes = {
@@ -34,9 +36,8 @@ class HubCreatePanel extends Component {
ready: false,
name: generateHubName(),
environmentIndex,
- // HACK: expand on small screens by default to ensure scene selection possible.
- // Eventually this could/should be done via media queries.
- expanded: window.innerWidth < 420
+ showCustomSceneDialog: false,
+ customSceneUrl: null
};
// Optimisticly preload all environment thumbnails
@@ -73,11 +74,15 @@ class HubCreatePanel extends Component {
};
createHub = async e => {
- e.preventDefault();
+ if (e) {
+ e.preventDefault();
+ }
+
const environment = this.props.environments[this.state.environmentIndex];
+ const sceneUrl = this.state.customSceneUrl || environment.bundle_url;
const payload = {
- hub: { name: this.state.name, default_environment_gltf_bundle_url: environment.bundle_url }
+ hub: { name: this.state.name, default_environment_gltf_bundle_url: sceneUrl }
};
let createUrl = "/api/v1/hubs";
@@ -131,6 +136,12 @@ class HubCreatePanel extends Component {
this.setToEnvironmentOffset(-1);
};
+ showCustomSceneDialog = e => {
+ e.preventDefault();
+ e.stopPropagation();
+ this.setState({ showCustomSceneDialog: true });
+ };
+
shuffle = () => {
this.setState({
name: generateHubName(),
@@ -140,7 +151,6 @@ class HubCreatePanel extends Component {
render() {
if (!this.state.ready) return null;
- const { formatMessage } = this.props.intl;
if (this.props.environments.length == 0) {
return <div />;
@@ -153,82 +163,32 @@ class HubCreatePanel extends Component {
const environmentAuthor = (meta.authors || [])[0];
const environmentThumbnail = this._getEnvironmentThumbnail(this.state.environmentIndex);
- const formNameClassNames = classNames("create-panel__form__name", {
- "create-panel__form__name--expanded": this.state.expanded
- });
-
return (
- <form onSubmit={this.createHub}>
- <div className="create-panel">
- {!this.state.expanded && (
- <div className="create-panel__header">
- <FormattedMessage id="home.create_header" />
- </div>
- )}
- <div className="create-panel__form">
- <div
- className="create-panel__form__left-container"
- onClick={async () => {
- if (this.state.expanded) {
- this.shuffle();
- } else {
- await this._preloadImage(this._getEnvironmentThumbnail(this.state.environmentIndex).srcset);
- this.setState({ expanded: true });
- }
- }}
- >
- <button type="button" tabIndex="3" className="create-panel__form__rotate-button">
- {this.state.expanded ? (
- <img src="../assets/images/dice_icon.svg" />
- ) : (
- <img src="../assets/images/expand_dots_icon.svg" />
- )}
- </button>
- </div>
- <div className="create-panel__form__right-container">
- <button type="submit" tabIndex="5" className="create-panel__form__submit-button">
- {this.isHubNameValid() ? (
- <img src="../assets/images/hub_create_button_enabled.svg" />
- ) : (
- <img src="../assets/images/hub_create_button_disabled.svg" />
- )}
- </button>
- </div>
- {this.state.expanded && (
- <div className="create-panel__form__environment">
- <div className="create-panel__form__environment__picker">
- <img
- className="create-panel__form__environment__picker__image"
- srcSet={environmentThumbnail.srcset}
- />
- <div className="create-panel__form__environment__picker__labels">
- <div className="create-panel__form__environment__picker__labels__header">
+ <div>
+ <form onSubmit={this.createHub}>
+ <div className={styles.createPanel}>
+ <div className={styles.form}>
+ <div className={styles.environment}>
+ <div className={styles.picker}>
+ <img className={styles.image} srcSet={environmentThumbnail.srcset} />
+ <div className={styles.labels}>
+ <div className={styles.header}>
{meta.url ? (
- <a
- href={meta.url}
- rel="noopener noreferrer"
- className="create-panel__form__environment__picker__labels__header__title"
- >
+ <a href={meta.url} rel="noopener noreferrer" className={styles.title}>
{environmentTitle}
</a>
) : (
- <span className="create-panel__form__environment__picker__labels__header__title">
- environmentTitle
- </span>
+ <span className={styles.itle}>environmentTitle</span>
)}
{environmentAuthor &&
environmentAuthor.name &&
(environmentAuthor.url ? (
- <a
- href={environmentAuthor.url}
- rel="noopener noreferrer"
- className="create-panel__form__environment__picker__labels__header__author"
- >
+ <a href={environmentAuthor.url} rel="noopener noreferrer" className={styles.author}>
<FormattedMessage id="home.environment_author_by" />
<span>{environmentAuthor.name}</span>
</a>
) : (
- <span className="create-panel__form__environment__picker__labels__header__author">
+ <span className={styles.author}>
<FormattedMessage id="home.environment_author_by" />
<span>{environmentAuthor.name}</span>
</span>
@@ -236,58 +196,57 @@ class HubCreatePanel extends Component {
{environmentAuthor &&
environmentAuthor.organization &&
(environmentAuthor.organization.url ? (
- <a
- href={environmentAuthor.organization.url}
- rel="noopener noreferrer"
- className="create-panel__form__environment__picker__labels__header__org"
- >
+ <a href={environmentAuthor.organization.url} rel="noopener noreferrer" className={styles.org}>
<span>{environmentAuthor.organization.name}</span>
</a>
) : (
- <span className="create-panel__form__environment__picker__labels__header__org">
+ <span className={styles.org}>
<span>{environmentAuthor.organization.name}</span>
</span>
))}
</div>
- <div className="create-panel__form__environment__picker__labels__footer">
- <FormattedMessage id="home.environment_picker_footer" />
+ <div className={styles.footer}>
+ <button onClick={this.showCustomSceneDialog} className={styles.customButton}>
+ <FormattedMessage id="home.room_create_options" />
+ </button>
</div>
</div>
- <div className="create-panel__form__environment__picker__controls">
- <button
- className="create-panel__form__environment__picker__controls__prev"
- type="button"
- tabIndex="1"
- onClick={this.setToPreviousEnvironment}
- >
+ <div className={styles.controls}>
+ <button className={styles.prev} type="button" tabIndex="1" onClick={this.setToPreviousEnvironment}>
<FontAwesomeIcon icon={faAngleLeft} />
</button>
- <button
- className="create-panel__form__environment__picker__controls__next"
- type="button"
- tabIndex="2"
- onClick={this.setToNextEnvironment}
- >
+ <button className={styles.next} type="button" tabIndex="2" onClick={this.setToNextEnvironment}>
<FontAwesomeIcon icon={faAngleRight} />
</button>
</div>
</div>
</div>
- )}
- <input
- tabIndex="4"
- className={formNameClassNames}
- value={this.state.name}
- onChange={e => this.setState({ name: e.target.value })}
- onFocus={e => e.target.select()}
- required
- pattern={HUB_NAME_PATTERN}
- title={formatMessage({ id: "home.create_name.validation_warning" })}
- />
+ <div className={styles.container}>
+ <button type="submit" tabIndex="5" className={styles.submitButton}>
+ <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>
- </div>
- </form>
+ </form>
+ {this.state.showCustomSceneDialog && (
+ <InfoDialog
+ dialogType={dialogTypes.custom_scene}
+ onCloseDialog={() => this.setState({ showCustomSceneDialog: false })}
+ onCustomScene={(name, url) => {
+ this.setState({ showCustomSceneDialog: false, name: name, customSceneUrl: url }, () => this.createHub());
+ }}
+ />
+ )}
+ </div>
);
}
}
diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js
index ff9b4da1b86f19c864bcab89b2eb997fc2eb6a1f..7607cc5037e0bd1d199cf0ac010bf97dd35ec941 100644
--- a/src/react-components/info-dialog.js
+++ b/src/react-components/info-dialog.js
@@ -1,11 +1,11 @@
import React, { Component } from "react";
import copy from "copy-to-clipboard";
-import classNames from "classnames";
import PropTypes from "prop-types";
import { FormattedMessage } from "react-intl";
import formurlencoded from "form-urlencoded";
import LinkDialog from "./link-dialog.js";
-import MediaToolsDialog from "./media-tools-dialog.js";
+import CreateObjectDialog from "./create-object-dialog.js";
+const HUB_NAME_PATTERN = "^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$";
// TODO i18n
@@ -20,13 +20,15 @@ class InfoDialog extends Component {
help: Symbol("help"),
link: Symbol("link"),
webvr_recommend: Symbol("webvr_recommend"),
- add_media: Symbol("add_media")
+ create_object: Symbol("create_object"),
+ custom_scene: Symbol("custom_scene")
};
static propTypes = {
dialogType: PropTypes.oneOf(Object.values(InfoDialog.dialogTypes)),
onCloseDialog: PropTypes.func,
onSubmittedEmail: PropTypes.func,
- onAddMedia: PropTypes.func,
+ onCreateObject: PropTypes.func,
+ onCustomScene: PropTypes.func,
linkCode: PropTypes.string
};
@@ -53,11 +55,16 @@ class InfoDialog extends Component {
}
}
- onContainerClicked(e) {
+ onContainerClicked = e => {
if (e.currentTarget === e.target) {
this.props.onCloseDialog();
}
- }
+ };
+
+ onCustomSceneClicked = () => {
+ this.props.onCustomScene(this.state.customRoomName, this.state.customSceneUrl);
+ this.props.onCloseDialog();
+ };
shareLinkClicked = () => {
navigator.share({
@@ -68,13 +75,16 @@ class InfoDialog extends Component {
copyLinkClicked = link => {
copy(link);
- this.setState({ copyLinkButtonText: "Copied!" });
+ this.setState({ copyLinkButtonText: "copied!" });
};
state = {
mailingListEmail: "",
mailingListPrivacy: false,
- copyLinkButtonText: "Copy"
+ copyLinkButtonText: "copy",
+ createObjectUrl: "",
+ customRoomName: "",
+ customSceneUrl: ""
};
signUpForMailingList = async e => {
@@ -133,10 +143,10 @@ class InfoDialog extends Component {
dialogBody = "Great! Please check your e-mail to confirm your subscription.";
break;
case InfoDialog.dialogTypes.invite:
- dialogTitle = "Invite Friends";
+ dialogTitle = "Invite Others";
dialogBody = (
<div>
- <div>Just share the link to invite others.</div>
+ <div>Just share the link and they'll join you:</div>
<div className="invite-form">
<input
type="text"
@@ -148,7 +158,7 @@ class InfoDialog extends Component {
<div className="invite-form__buttons">
{navigator.share && (
<button className="invite-form__action-button" onClick={this.shareLinkClicked}>
- <span>Share</span>
+ <span>share</span>
</button>
)}
<button
@@ -187,9 +197,45 @@ class InfoDialog extends Component {
</div>
);
break;
- case InfoDialog.dialogTypes.add_media:
- dialogTitle = "Add Media";
- dialogBody = <MediaToolsDialog onAddMedia={this.props.onAddMedia} onCloseDialog={this.props.onCloseDialog} />;
+ case InfoDialog.dialogTypes.create_object:
+ dialogTitle = "Create Object";
+ dialogBody = (
+ <CreateObjectDialog onCreateObject={this.props.onCreateObject} onCloseDialog={this.props.onCloseDialog} />
+ );
+ break;
+ case InfoDialog.dialogTypes.custom_scene:
+ dialogTitle = "Create a Room";
+ dialogBody = (
+ <div>
+ <div>Choose a name and GLTF URL for your room's scene:</div>
+ <form onSubmit={this.onCustomSceneClicked}>
+ <div className="custom-scene-form">
+ <input
+ type="text"
+ placeholder="Room name"
+ className="custom-scene-form__link_field"
+ value={this.state.customRoomName}
+ pattern={HUB_NAME_PATTERN}
+ title="Invalid name, limited to 4 to 64 characters and limited symbols."
+ onChange={e => this.setState({ customRoomName: e.target.value })}
+ required
+ />
+ <input
+ type="url"
+ placeholder="URL to Scene GLTF or GLB (Optional)"
+ className="custom-scene-form__link_field"
+ value={this.state.customSceneUrl}
+ onChange={e => this.setState({ customSceneUrl: e.target.value })}
+ />
+ <div className="custom-scene-form__buttons">
+ <button className="custom-scene-form__action-button">
+ <span>create</span>
+ </button>
+ </div>
+ </div>
+ </form>
+ </div>
+ );
break;
case InfoDialog.dialogTypes.updates:
dialogTitle = "";
@@ -284,6 +330,9 @@ class InfoDialog extends Component {
>
<FormattedMessage id="profile.privacy_notice" />
</a>
+ <a target="_blank" rel="noopener noreferrer" href="/?report">
+ <FormattedMessage id="help.report_issue" />
+ </a>
</p>
</div>
);
@@ -306,19 +355,14 @@ class InfoDialog extends Component {
);
break;
case InfoDialog.dialogTypes.link:
- dialogTitle = "Send Link to Device";
+ dialogTitle = "Open on Headset";
dialogBody = <LinkDialog linkCode={this.props.linkCode} />;
break;
}
- const dialogClasses = classNames({
- dialog: true,
- "dialog--tall": this.props.dialogType === InfoDialog.dialogTypes.help
- });
-
return (
<div className="dialog-overlay">
- <div className={dialogClasses} onClick={this.onContainerClicked}>
+ <div className="dialog" onClick={this.onContainerClicked}>
<div className="dialog__box">
<div className="dialog__box__contents">
<button className="dialog__box__contents__close" onClick={this.props.onCloseDialog}>
diff --git a/src/react-components/profile-info-header.js b/src/react-components/profile-info-header.js
index 4f0b8e65bd7d353defaac525c82d5e99778aa36e..7afb16b5491c4ffccfbe39ed2674c821d28c0ed5 100644
--- a/src/react-components/profile-info-header.js
+++ b/src/react-components/profile-info-header.js
@@ -2,34 +2,27 @@ import React from "react";
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
-import { faShareAlt } from "@fortawesome/free-solid-svg-icons/faShareAlt";
export const ProfileInfoHeader = props => (
<div className="profile-info-header">
- <div className="profile-info-header__profile_display_name">
- <img src="../assets/images/account.svg" onClick={props.onClickName} className="profile-info-header__icon" />
- <div onClick={props.onClickName} title={props.name}>
- {props.name}
- </div>
- </div>
<div className="profile-info-header__menu-buttons">
- <button className="profile-info-header__menu-buttons__menu-button" onClick={props.onClickInvite}>
- <i className="profile-info-header__menu-buttons__menu-button__icon">
- <FontAwesomeIcon icon={faShareAlt} />
- </i>
- </button>
<button className="profile-info-header__menu-buttons__menu-button" onClick={props.onClickHelp}>
<i className="profile-info-header__menu-buttons__menu-button__icon">
<FontAwesomeIcon icon={faQuestion} />
</i>
</button>
</div>
+ <div className="profile-info-header__profile_display_name">
+ <img src="../assets/images/account.svg" onClick={props.onClickName} className="profile-info-header__icon" />
+ <div onClick={props.onClickName} title={props.name}>
+ {props.name}
+ </div>
+ </div>
</div>
);
ProfileInfoHeader.propTypes = {
onClickName: PropTypes.func,
- onClickInvite: PropTypes.func,
onClickHelp: PropTypes.func,
name: PropTypes.string
};
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 934a8aee455aa3bc34d29f9957d1e61e957c6f42..f1584d683065f92286eef30f574b925d0a532df8 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -6,6 +6,8 @@ import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
import en from "react-intl/locale-data/en";
import MovingAverage from "moving-average";
import screenfull from "screenfull";
+import styles from "../assets/stylesheets/ui-root.scss";
+import entryStyles from "../assets/stylesheets/entry.scss";
import { lang, messages } from "../utils/i18n";
import AutoExitWarning from "./auto-exit-warning";
@@ -20,7 +22,7 @@ import { ProfileInfoHeader } from "./profile-info-header.js";
import ProfileEntryPanel from "./profile-entry-panel";
import InfoDialog from "./info-dialog.js";
import TwoDHUD from "./2d-hud";
-import Footer from "./footer";
+import { faUsers } from "@fortawesome/free-solid-svg-icons/faUsers";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
@@ -524,7 +526,7 @@ class UIRoot extends Component {
this.setState({ infoDialogType: null, linkCode: null, linkCodeCancel: null });
};
- handleAddMedia = url => {
+ handleCreateObject = url => {
this.props.scene.emit("add_media", url);
};
@@ -621,9 +623,9 @@ class UIRoot extends Component {
const screenSharingCheckbox = this.props.enableScreenSharing &&
!AFRAME.utils.device.isMobile() &&
/firefox/i.test(navigator.userAgent) && (
- <label className="entry-panel__screen-sharing">
+ <label className={entryStyles.screenSharing}>
<input
- className="entry-panel__screen-sharing__checkbox"
+ className={entryStyles.checkbox}
type="checkbox"
value={this.state.shareScreen}
onChange={this.setStateAndRequestScreen}
@@ -634,8 +636,13 @@ class UIRoot extends Component {
const entryPanel =
this.state.entryStep === ENTRY_STEPS.start ? (
- <div className="entry-panel">
- <div className="entry-panel__button-container">
+ <div className={entryStyles.entryPanel}>
+ <div className={entryStyles.buttonContainer}>
+ {false /* TODO */ && (
+ <div className={entryStyles.presenceInfo}>
+ <span className={entryStyles.people}>2 people</span> have joined
+ </div>
+ )}
{this.props.availableVREntryTypes.screen === VR_DEVICE_AVAILABILITY.yes && (
<TwoDEntryButton onClick={this.enter2D} />
)}
@@ -657,11 +664,17 @@ class UIRoot extends Component {
)}
<DeviceEntryButton onClick={this.attemptLink} isInHMD={this.props.availableVREntryTypes.isInHMD} />
{this.props.availableVREntryTypes.cardboard !== VR_DEVICE_AVAILABILITY.no && (
- <div className="entry-panel__secondary" onClick={this.enterVR}>
+ <div className={entryStyles.secondary} onClick={this.enterVR}>
<FormattedMessage id="entry.cardboard" />
</div>
)}
{screenSharingCheckbox}
+ <button
+ className={entryStyles.inviteButton}
+ onClick={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.invite })}
+ >
+ <FormattedMessage id="entry.invite-others" />
+ </button>
</div>
</div>
) : null;
@@ -811,11 +824,10 @@ class UIRoot extends Component {
const dialogContents = this.isWaitingForAutoExit() ? (
<AutoExitWarning secondsRemaining={this.state.secondsRemainingBeforeAutoExit} onCancel={this.endAutoExitTimer} />
) : (
- <div className="entry-dialog">
+ <div className={entryStyles.entryDialog}>
<ProfileInfoHeader
name={this.props.store.state.profile.displayName}
onClickName={() => this.setState({ showProfileEntry: true })}
- onClickInvite={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.invite })}
onClickHelp={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.help })}
/>
{entryPanel}
@@ -824,10 +836,6 @@ class UIRoot extends Component {
</div>
);
- const dialogClassNames = classNames("ui-dialog", {
- "ui-dialog--darkened": this.state.entryStep !== ENTRY_STEPS.finished
- });
-
const dialogBoxClassNames = classNames({ "ui-interactive": !this.state.infoDialogType, "ui-dialog-box": true });
const dialogBoxContentsClassNames = classNames({
@@ -843,7 +851,7 @@ class UIRoot extends Component {
linkCode={this.state.linkCode}
onSubmittedEmail={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.email_submitted })}
onCloseDialog={this.handleCloseDialog}
- onAddMedia={this.handleAddMedia}
+ onCreateObject={this.handleCreateObject}
/>
{this.state.entryStep === ENTRY_STEPS.finished && (
@@ -857,7 +865,14 @@ class UIRoot extends Component {
</button>
)}
- <div className={dialogClassNames}>
+ {this.state.entryStep === ENTRY_STEPS.finished && (
+ <div className={styles.presenceInfo}>
+ <FontAwesomeIcon icon={faUsers} />
+ <span className={styles.occupantCount}>{this.props.occupantCount || "-"}</span>
+ </div>
+ )}
+
+ <div className="ui-dialog">
{(this.state.entryStep !== ENTRY_STEPS.finished || this.isWaitingForAutoExit()) && (
<div className={dialogBoxClassNames}>
<div className={dialogBoxContentsClassNames}>{dialogContents}</div>
@@ -870,22 +885,23 @@ class UIRoot extends Component {
</div>
{this.state.entryStep === ENTRY_STEPS.finished ? (
<div>
- <TwoDHUD
+ <TwoDHUD.TopHUD
muted={this.state.muted}
frozen={this.state.frozen}
spacebubble={this.state.spacebubble}
onToggleMute={this.toggleMute}
onToggleFreeze={this.toggleFreeze}
onToggleSpaceBubble={this.toggleSpaceBubble}
- onClickAddMedia={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.add_media })}
/>
- <Footer
- hubName={this.props.hubName}
- occupantCount={this.props.occupantCount}
- onClickInvite={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.invite })}
- onClickReport={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.report })}
- onClickHelp={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.help })}
- onClickUpdates={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.updates })}
+ {this.props.occupantCount <= 1 && (
+ <div className={styles.inviteNagButton}>
+ <button onClick={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.invite })}>
+ <FormattedMessage id="entry.invite-others-nag" />
+ </button>
+ </div>
+ )}
+ <TwoDHUD.BottomHUD
+ onCreateObject={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.create_object })}
/>
</div>
) : null}
diff --git a/src/utils/disable-ios-zoom.js b/src/utils/disable-ios-zoom.js
index b80639e5b4c4c625330e3e31f19fe4cbf24c2ea3..fcdebc9de8795cf9bac88384ef3372f3a1f01d34 100644
--- a/src/utils/disable-ios-zoom.js
+++ b/src/utils/disable-ios-zoom.js
@@ -1,5 +1,7 @@
+import { detectOS } from "detect-browser";
+
export function disableiOSZoom() {
- if (!AFRAME.utils.device.isIOS()) return;
+ if (detectOS(navigator.userAgent) !== "iOS") return;
let lastTouchAtMs = 0;
diff --git a/src/utils/vr-caps-detect.js b/src/utils/vr-caps-detect.js
index 3cea1c2e3029fa3354eaa3d07ecaba82b0438580..3294820125788e0343eb5f70277eefc48b75a2c2 100644
--- a/src/utils/vr-caps-detect.js
+++ b/src/utils/vr-caps-detect.js
@@ -50,8 +50,6 @@ export async function getAvailableVREntryTypes() {
// This needs to be kept up-to-date with the latest browsers that can support VR and Hubs.
// Checking for navigator.getVRDisplays always passes b/c of polyfill.
const isWebVRCapableBrowser = window.hasNativeWebVRImplementation;
- const isFirefoxReality = window.orientation === 0 && "buildID" in navigator && isWebVRCapableBrowser;
- const isInHMD = isOculusBrowser || isFirefoxReality;
const isDaydreamCapableBrowser = !!(isWebVRCapableBrowser && browser.name === "chrome" && !isSamsungBrowser);
const isIDevice = AFRAME.utils.device.isIOS();
@@ -64,13 +62,23 @@ export async function getAvailableVREntryTypes() {
: VR_DEVICE_AVAILABILITY.maybe
: VR_DEVICE_AVAILABILITY.no;
+ const displays = isWebVRCapableBrowser ? await navigator.getVRDisplays() : [];
+ const isFirefoxReality = window.orientation === 0 && "buildID" in navigator && displays.length > 0;
+ const isInHMD = isOculusBrowser || isFirefoxReality;
+
const screen = isInHMD
? VR_DEVICE_AVAILABILITY.no
: isIDevice && isUIWebView
? VR_DEVICE_AVAILABILITY.maybe
: VR_DEVICE_AVAILABILITY.yes;
- let generic = AFRAME.utils.device.isMobile() ? VR_DEVICE_AVAILABILITY.no : VR_DEVICE_AVAILABILITY.maybe;
+ // HACK -- we prompt the user to install firefox if they click the VR button on a non-WebVR compatible
+ // browser. once we change this (ie when Chrome has VR support) then this check can be removed. Without this
+ // check if you have FF on Mac/Linux you'll get the confusing flow of having a VR button but then
+ // being asked to download FF.
+ const isNonWebVRFirefox = !isWebVRCapableBrowser && isFirefoxBrowser;
+ let generic =
+ AFRAME.utils.device.isMobile() || isNonWebVRFirefox ? VR_DEVICE_AVAILABILITY.no : VR_DEVICE_AVAILABILITY.maybe;
let cardboard = VR_DEVICE_AVAILABILITY.no;
// We only consider GearVR support as "maybe" and never "yes". The only browser
@@ -89,8 +97,6 @@ export async function getAvailableVREntryTypes() {
isMaybeDaydreamCompatibleDevice(ua) && !isInHMD ? VR_DEVICE_AVAILABILITY.maybe : VR_DEVICE_AVAILABILITY.no;
if (isWebVRCapableBrowser) {
- const displays = await navigator.getVRDisplays();
-
// Generic is supported for non-blacklisted devices and presentable HMDs.
generic = displays.find(
d => d.capabilities.canPresent && !GENERIC_ENTRY_TYPE_DEVICE_BLACKLIST.find(r => r.test(d.displayName))