Page MenuHomePhabricator
Files F3407410

D7915.diff
No OneTemporary
Actions

D7915.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
@@ -3,83 +3,54 @@
}
.button {
- position: relative;
- width: auto;
- border: 1px solid white;
- border-left: none;
- border-radius: 0 8px 8px 0;
- padding-left: 20px;
- padding-right: 20px;
cursor: pointer;
- font-family: var(--sans-serif);
- font-size: 16px;
- color: white;
-
- background: #7e57c2;
- box-shadow: -12px 20px 50px rgba(126, 87, 194, 0.5);
-
- transition: 0.2s;
- margin-inline: 0;
+ border: none;
+ padding: 16px 32px;
+ border-radius: 4px;
+ color: var(--white-100);
+ background: var(--violet-dark-60);
+ min-width: 184px;
}
.button_success {
- border: 1px solid #28a747;
- background: #28a747;
- box-shadow: -12px 20px 50px #28a747;
+ background-color: var(--success-dark-90);
}
.button_failure {
- border: 1px solid #dc3545;
- background: #dc3545;
- box-shadow: -12px 20px 50px #dc3545;
+ background-color: var(--error-dark-50);
}
.button:hover {
- background: #8c69c9;
- box-shadow: -12px 20px 50px rgba(139, 107, 194, 0.5);
+ background-color: var(--violet-dark-80);
}
.button_success:hover {
- background: #34b855;
- box-shadow: -12px 20px 50px #28a747;
+ background-color: var(--success-dark-90);
}
.button_failure:hover {
- background: #df3f4f;
- box-shadow: -12px 20px 50px #dc3545;
+ background: var(--error-dark-50);
}
input.email_input {
flex: 1;
- padding: 20px;
-
- background: rgba(11, 18, 27, 0.25);
-
- font-family: 'IBM Plex Mono', monospace;
- font-size: 16px;
- color: white;
-
- border: 1px solid white;
- border-right: none;
- border-radius: 8px 0 0 8px;
+ padding: 16px 24px;
+ background-color: transparent;
+ color: var(--white-100);
+ border: 1px solid var(--white-80);
+ border-radius: 4px;
outline: none;
- margin-inline: 0;
transition: 300ms;
+ margin-right: 12px;
}
input.email_input:focus {
- box-shadow: -12px 20px 50px rgba(126, 87, 194, 0.5);
+ border: 1.5px solid var(--white-100);
transition: 300ms;
}
-input.email_input_success {
- border: 1px solid #28a747;
- box-shadow: -12px 20px 50px #28a747;
-}
-
input.email_input_failure {
- border: 1px solid #dc3545;
- box-shadow: -12px 20px 50px #dc3545;
+ border: 1px solid var(--error-dark-50);
}
@media (max-width: 1099px) {
@@ -89,17 +60,11 @@
.button {
width: 100%;
height: 50px;
- border: none;
- border-radius: 8px;
}
input.email_input {
width: 100%;
height: 50px;
- border-radius: 8px;
- margin-bottom: 0.5em;
- box-sizing: border-box;
-
- border: 1px solid white;
+ margin-bottom: 16px;
}
}
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
@@ -1,10 +1,12 @@
// @flow
+import classNames from 'classnames';
import * as React from 'react';
import { validEmailRegex } from 'lib/shared/account-utils.js';
import css from './subscription-form.css';
+import typography from './typography.css';
type SubscriptionFormStatus =
| { +status: 'pending' }
@@ -65,7 +67,7 @@
setSubscriptionFormStatus({ status: 'pending' });
}, [email]);
- let btnText = 'Subscribe for updates';
+ let btnText = 'Request Access';
let btnStyle = css.button;
let inputStyle = css.email_input;
if (subscriptionFormStatus.status === 'error') {
@@ -73,11 +75,13 @@
btnStyle = `${css.button} ${css.button_failure}`;
inputStyle = `${css.email_input} ${css.email_input_failure}`;
} else if (subscriptionFormStatus.status === 'success') {
- btnText = 'Subscribed!';
+ btnText = 'Requested!';
btnStyle = `${css.button} ${css.button_success}`;
- inputStyle = `${css.email_input} ${css.email_input_success}`;
}
+ const inputClassName = classNames([typography.paragraph2, inputStyle]);
+ const buttonClassName = classNames([typography.paragraph2, btnStyle]);
+
const onEmailChange = React.useCallback(e => {
setEmail(e.target.value);
}, []);
@@ -89,10 +93,10 @@
id="subscription-form"
value={email}
onChange={onEmailChange}
- className={inputStyle}
+ className={inputClassName}
placeholder="Enter your email"
/>
- <button className={btnStyle} onClick={onEmailSubmitted}>
+ <button className={buttonClassName} onClick={onEmailSubmitted}>
{btnText}
</button>
</form>

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 6:03 AM (15 h, 9 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2616157
Default Alt Text
D7915.diff (4 KB)

Event Timeline