From ead7900934629880c2aba5432d138207e3e09bb3 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Thu, 26 Jul 2018 18:38:04 +0000
Subject: [PATCH] New create button
---
.../images/hub_create_button_disabled.svg | 20 -------------------
.../images/hub_create_button_enabled.svg | 20 -------------------
src/assets/stylesheets/hub-create.scss | 17 +++++-----------
src/assets/stylesheets/shared.scss | 20 +++++++++++++++++++
src/assets/translations.data.json | 1 +
src/react-components/hub-create-panel.js | 4 ++--
6 files changed, 28 insertions(+), 54 deletions(-)
delete mode 100755 src/assets/images/hub_create_button_disabled.svg
delete mode 100755 src/assets/images/hub_create_button_enabled.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 168e43e80..000000000
--- 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 f69698471..000000000
--- 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 fbc372008..5f0e5d512 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 e54447f58..f7120572e 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 cc77ac477..fa57c5c11 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 06b712bde..4f3e65a2b 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>
--
GitLab