diff --git a/landing/request-access.css b/landing/request-access.css --- a/landing/request-access.css +++ b/landing/request-access.css @@ -15,7 +15,7 @@ } .subscriptionform { - width: 624px; + width: 664px; max-width: 100vw; display: flex; justify-content: center; diff --git a/landing/request-access.react.js b/landing/request-access.react.js --- a/landing/request-access.react.js +++ b/landing/request-access.react.js @@ -12,7 +12,7 @@ return (
-

Request access for our beta today

+

Join our mailing list for updates

diff --git a/landing/subscription-form.css b/landing/subscription-form.css --- a/landing/subscription-form.css +++ b/landing/subscription-form.css @@ -63,15 +63,8 @@ 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); } @@ -91,7 +84,7 @@ 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 --- a/landing/subscription-form.react.js +++ b/landing/subscription-form.react.js @@ -67,35 +67,35 @@ 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 (
@@ -107,7 +107,7 @@ className={inputClassName} placeholder="Enter your email" /> -

{feedbackText}

+ {errorText}