diff --git a/landing/subscription-form.css b/landing/subscription-form.css index 6b1a2a00d..b7231b34e 100644 --- a/landing/subscription-form.css +++ b/landing/subscription-form.css @@ -1,105 +1,70 @@ form { display: flex; } .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) { form { display: block; } .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 index 887693a30..e1eb298ac 100644 --- a/landing/subscription-form.react.js +++ b/landing/subscription-form.react.js @@ -1,101 +1,105 @@ // @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' } | { +status: 'in_progress' } | { +status: 'success' } | { +status: 'error', +error: string }; function SubscriptionForm(): React.Node { const [email, setEmail] = React.useState(''); const [subscriptionFormStatus, setSubscriptionFormStatus] = React.useState({ status: 'pending' }); const onEmailSubmitted = React.useCallback( async (e: Event) => { e.preventDefault(); if ( subscriptionFormStatus.status === 'in_progress' || subscriptionFormStatus.status === 'success' ) { return; } if (email.search(validEmailRegex) === -1) { setSubscriptionFormStatus({ status: 'error', error: 'Invalid email' }); return; } setSubscriptionFormStatus({ status: 'in_progress' }); try { const response = await fetch('subscribe_email', { method: 'POST', credentials: 'same-origin', body: JSON.stringify({ email }), headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, }); const respJson = await response.json(); if (!respJson.success) { setSubscriptionFormStatus({ status: 'error', error: 'Request failed', }); return; } setSubscriptionFormStatus({ status: 'success' }); document.activeElement?.blur(); } catch { setSubscriptionFormStatus({ status: 'error', error: 'Network failed' }); } }, [email, subscriptionFormStatus], ); React.useEffect(() => { 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') { btnText = subscriptionFormStatus.error; 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); }, []); return (
-
); } export default SubscriptionForm;