From cf6f0c7218a7f1494c49fc6d9dc3fc3358895b45 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Fri, 30 Mar 2018 11:41:52 -0700
Subject: [PATCH] Feedback from PR
---
src/assets/stylesheets/hub-create.scss | 22 ++++++++++-----
src/react-components/home-root.js | 18 ++++++------
src/react-components/hub-create-panel.js | 36 +++++++++++-------------
3 files changed, 42 insertions(+), 34 deletions(-)
diff --git a/src/assets/stylesheets/hub-create.scss b/src/assets/stylesheets/hub-create.scss
index 222d0ddb7..137483494 100644
--- a/src/assets/stylesheets/hub-create.scss
+++ b/src/assets/stylesheets/hub-create.scss
@@ -43,7 +43,6 @@
padding-right: 90px;
width: 100%;
line-height: 40px;
- z-index: 1;
&::selection {
background-color: #2F80ED;
@@ -68,19 +67,29 @@
}
&--expanded {
- padding-top: 365px;
+ margin-top: 340px;
+ border-radius: 0px 0px 14px 14px;
@media (max-width: 768px) , (max-height: 715px) {
- padding-top: 300px;
+ margin-top: 275px;
}
@media (max-width: 520px) {
- padding-top: 190px;
+ margin-top: 165px;
}
}
}
- &__left_button {
+ &__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;
@@ -97,7 +106,7 @@
}
}
- &__right_button {
+ &__right-container {
position: absolute;
height: 95px;
width: 90px;
@@ -121,7 +130,6 @@
border-radius: 14px;
overflow: hidden;
pointer-events: none;
- z-index: 2;
@media (max-width: 768px) , (max-height: 715px) {
width: 100%;
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index 844b1ccad..c453b3e31 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -81,14 +81,16 @@ class HomeRoot extends Component {
</span>
</div>
- <a
- className="header-content__experiment__info__link"
- rel="noopener noreferrer"
- target="_blank"
- href="https://github.com/mozilla/mr-social-client"
- >
- <FormattedMessage id="home.view_source" />
- </a>
+ <div>
+ <a
+ className="header-content__experiment__info__link"
+ rel="noopener noreferrer"
+ target="_blank"
+ href="https://github.com/mozilla/mr-social-client"
+ >
+ <FormattedMessage id="home.view_source" />
+ </a>
+ </div>
</div>
</div>
</div>
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index aad8e0b0e..2c8f76159 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -21,7 +21,7 @@ class HubCreatePanel extends Component {
this.state = {
name: generateHubName(),
environmentIndex: Math.floor(Math.random() * props.environments.length),
- expanded: false
+ expanded: true
};
}
@@ -100,7 +100,7 @@ class HubCreatePanel extends Component {
)}
<div className="create-panel__form">
<div
- className="create-panel__form__left_button"
+ className="create-panel__form__left-container"
onClick={e => {
e.preventDefault();
@@ -111,24 +111,22 @@ class HubCreatePanel extends Component {
}
}}
>
- {this.state.expanded ? (
- <img className="create-panel__form__rotate_button" src="../assets/images/dice_icon.svg" />
- ) : (
- <img className="create-panel__form__rotate_button" src="../assets/images/expand_dots_icon.svg" />
- )}
+ <button 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_button" onClick={this.createHub}>
- {this.isHubNameValid() ? (
- <img
- className="create-panel__form__submit_button"
- src="../assets/images/hub_create_button_enabled.svg"
- />
- ) : (
- <img
- className="create-panel__form__submit_button"
- src="../assets/images/hub_create_button_disabled.svg"
- />
- )}
+ <div className="create-panel__form__right-container" onClick={this.createHub}>
+ <button 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">
--
GitLab