Page MenuHomePhabricator
Files F3407348

D8039.diff
No OneTemporary
Actions

D8039.diff
View Options

diff --git a/landing/subscription-form.css b/landing/subscription-form.css
--- a/landing/subscription-form.css
+++ b/landing/subscription-form.css
@@ -5,11 +5,14 @@
.button {
cursor: pointer;
border: none;
- padding: 16px 32px;
+ padding: 17px 32px; /* We have 17 to compensate for no border */
border-radius: 4px;
color: var(--white-100);
background: var(--violet-dark-60);
min-width: 184px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.buttonSuccess {
@@ -32,6 +35,12 @@
background: var(--error-dark-50);
}
+div.inputContainer {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+}
+
input.emailInput {
flex: 1;
padding: 16px 24px;
@@ -53,6 +62,18 @@
border: 1px solid var(--error-dark-50);
}
+p.feedbackText {
+ margin-top: 8px;
+}
+
+p.feedbackTextSuccess {
+ color: var(--success-dark-50);
+}
+
+p.feedbackTextFailure {
+ color: var(--error-dark-50);
+}
+
@media (max-width: 1099px) {
form {
display: block;
@@ -60,11 +81,17 @@
.button {
width: 100%;
height: 50px;
+ margin-top: 8px;
}
input.emailInput {
width: 100%;
height: 50px;
- margin-bottom: 16px;
+ margin-bottom: 8px;
+ }
+
+ p.feedbackText {
+ text-align: center;
+ margin-top: 0;
}
}
diff --git a/landing/subscription-form.react.js b/landing/subscription-form.react.js
--- a/landing/subscription-form.react.js
+++ b/landing/subscription-form.react.js
@@ -68,19 +68,29 @@
}, [email]);
let btnText = 'Request Access';
+ let feedbackText = '';
let btnStyle = css.button;
let inputStyle = css.emailInput;
+ let feedbackTextStyle = css.feedbackText;
if (subscriptionFormStatus.status === 'error') {
btnText = subscriptionFormStatus.error;
+ feedbackText = `${subscriptionFormStatus.error}, please try again`;
btnStyle = `${css.button} ${css.buttonFailure}`;
inputStyle = `${css.emailInput} ${css.emailInputFailure}`;
+ feedbackTextStyle = `${css.feedbackText} ${css.feedbackTextFailure}`;
} else if (subscriptionFormStatus.status === 'success') {
btnText = 'Requested!';
+ feedbackText = 'We will be in touch with next steps!';
btnStyle = `${css.button} ${css.buttonSuccess}`;
+ feedbackTextStyle = `${css.feedbackText} ${css.feedbackTextSuccess}`;
}
const inputClassName = classNames([typography.paragraph2, inputStyle]);
const buttonClassName = classNames([typography.paragraph2, btnStyle]);
+ const feedbackTextClassName = classNames([
+ typography.paragraph2,
+ feedbackTextStyle,
+ ]);
const onEmailChange = React.useCallback(e => {
setEmail(e.target.value);
@@ -88,17 +98,22 @@
return (
<form>
- <input
- type="text"
- id="subscription-form"
- value={email}
- onChange={onEmailChange}
- className={inputClassName}
- placeholder="Enter your email"
- />
- <button className={buttonClassName} onClick={onEmailSubmitted}>
- {btnText}
- </button>
+ <div className={css.inputContainer}>
+ <input
+ type="text"
+ id="subscription-form"
+ value={email}
+ onChange={onEmailChange}
+ className={inputClassName}
+ placeholder="Enter your email"
+ />
+ <p className={feedbackTextClassName}>{feedbackText}</p>
+ </div>
+ <div>
+ <button className={buttonClassName} onClick={onEmailSubmitted}>
+ {btnText}
+ </button>
+ </div>
</form>
);
}

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 5:46 AM (14 h, 58 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2616112
Default Alt Text
D8039.diff (3 KB)

Event Timeline