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 (
- - +
+ +

{feedbackText}

+
+
+ +
); }