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/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index fbc372008667f06d7a4c5d6ab39be846b4189f22..5f0e5d512bfa7d92612fbf6e589c2cbe032b506d 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -60,25 +60,18 @@
}
}
- :local(.submit-button), :local(.rotate-button) {
- appearance: none;
- -moz-appearance: none;
- -webkit-appearance: none;
- background: transparent;
- border: none;
- cursor: pointer;
+ :local(.submit-button) {
+ @extend %big-action-button;
}
- :local(.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%;
}
:local(.environment) {
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index e54447f58f853687b1f3f3d2be6d136d95df01c1..f7120572e285890c5473453855e2e9c593093ba1 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -18,6 +18,26 @@ $darkest-grey: rgba(32, 32, 32, 1.0);
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 %default-font;
outline-style: none;
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index cc77ac477b70fd1dbfc413357767cda241f78453..fa57c5c11a4d376c49456e94d53ea435e815831d 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -46,6 +46,7 @@
"autoexit.subtitle": "You have started another session.",
"autoexit.cancel": "CANCEL",
"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 ",
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 06b712bdef36aa5195538754460b4353ba1910fe..4f3e65a2b10d195019786bf6f098d0c9ec7be3ae 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -223,9 +223,9 @@ class HubCreatePanel extends Component {
</div>
</div>
</div>
- <div className={styles.rightContainer}>
+ <div className={styles.container}>
<button type="submit" tabIndex="5" className={styles.submitButton}>
- <img src="../assets/images/hub_create_button_enabled.svg" />
+ <FormattedMessage id="home.room_create_button" />
</button>
</div>
</div>