diff --git a/landing/request-access.css b/landing/request-access.css index ee59319b1..e53d5691c 100644 --- a/landing/request-access.css +++ b/landing/request-access.css @@ -1,34 +1,34 @@ .requestAccessSection { display: flex; flex-direction: column; align-items: center; padding: 144px 16px; overflow: hidden; position: relative; } .header { color: var(--white-80); text-align: center; margin-bottom: 56px; z-index: var(--glow-z-index); } .subscriptionform { - width: 624px; + width: 664px; max-width: 100vw; display: flex; justify-content: center; padding: 0 16px; z-index: var(--glow-z-index); } .glow { position: absolute; width: 328px; height: 328px; border-radius: 164px; background-color: var(--violet-dark-40); bottom: -295px; filter: blur(200px); } diff --git a/landing/request-access.react.js b/landing/request-access.react.js index 178a97b50..2fa89c7f5 100644 --- a/landing/request-access.react.js +++ b/landing/request-access.react.js @@ -1,24 +1,24 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; import css from './request-access.css'; import SubscriptionForm from './subscription-form.react.js'; import typography from './typography.css'; function RequestAccess(): React.Node { const headerClassName = classNames([typography.heading1, css.header]); return (
-

Request access for our beta today

+

Join our mailing list for updates

); } export default RequestAccess; diff --git a/landing/subscription-form.css b/landing/subscription-form.css index 9d8bff733..2b8212b1a 100644 --- a/landing/subscription-form.css +++ b/landing/subscription-form.css @@ -1,98 +1,91 @@ form { display: flex; } .button { cursor: pointer; border: none; padding: 17px 32px; /* We have 17 to compensate for no border */ border-radius: 4px; color: var(--white-100); background-color: var(--violet-dark-60); min-width: 184px; display: flex; justify-content: center; align-items: center; transition: background-color 150ms; } .buttonSuccess { background-color: var(--success-dark-90); } .buttonFailure { background-color: var(--error-dark-50); } .button:hover { background-color: var(--violet-dark-80); } .buttonSuccess:hover { background-color: var(--success-dark-90); } .buttonFailure:hover { background: var(--error-dark-50); } div.inputContainer { display: flex; flex: 1; flex-direction: column; } input.emailInput { flex: 1; padding: 16px 24px; background-color: transparent; color: var(--white-100); border: 1px solid var(--white-80); border-radius: 4px; outline: none; transition: 300ms; margin-right: 12px; } input.emailInput:focus { border: 1.5px solid var(--white-100); transition: 300ms; } input.emailInputFailure { border: 1px solid var(--error-dark-50); } -p.feedbackText { +p.errorText { margin-top: 8px; -} - -p.feedbackTextSuccess { - color: var(--success-dark-50); -} - -p.feedbackTextFailure { color: var(--error-dark-50); } @media screen and (max-width: 848px) { form { display: block; } .button { width: 100%; height: 50px; margin-top: 8px; } input.emailInput { width: 100%; height: 50px; margin-bottom: 8px; } - p.feedbackText { + p.errorText { text-align: center; margin-top: 0; } } diff --git a/landing/subscription-form.react.js b/landing/subscription-form.react.js index 6323f72fb..f9482d49e 100644 --- a/landing/subscription-form.react.js +++ b/landing/subscription-form.react.js @@ -1,120 +1,120 @@ // @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 = 'Request Access'; - let feedbackText = ''; + let btnText = 'Subscribe for updates'; 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!'; + btnText = 'Subscribed!'; 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 errorTextClassName = classNames([typography.paragraph2, css.errorText]); const onEmailChange = React.useCallback(e => { setEmail(e.target.value); }, []); + let errorText; + if (subscriptionFormStatus.status === 'error') { + errorText = ( +

+ {subscriptionFormStatus.error}, please try again +

+ ); + } + return (
-

{feedbackText}

+ {errorText}
); } export default SubscriptionForm;