diff --git a/landing/subscription-form.css b/landing/subscription-form.css --- a/landing/subscription-form.css +++ b/landing/subscription-form.css @@ -12,11 +12,11 @@ min-width: 184px; } -.button_success { +.buttonSuccess { background-color: var(--success-dark-90); } -.button_failure { +.buttonFailure { background-color: var(--error-dark-50); } @@ -24,15 +24,15 @@ background-color: var(--violet-dark-80); } -.button_success:hover { +.buttonSuccess:hover { background-color: var(--success-dark-90); } -.button_failure:hover { +.buttonFailure:hover { background: var(--error-dark-50); } -input.email_input { +input.emailInput { flex: 1; padding: 16px 24px; background-color: transparent; @@ -44,12 +44,12 @@ margin-right: 12px; } -input.email_input:focus { +input.emailInput:focus { border: 1.5px solid var(--white-100); transition: 300ms; } -input.email_input_failure { +input.emailInputFailure { border: 1px solid var(--error-dark-50); } @@ -62,7 +62,7 @@ height: 50px; } - input.email_input { + input.emailInput { width: 100%; height: 50px; 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 @@ -69,14 +69,14 @@ let btnText = 'Request Access'; let btnStyle = css.button; - let inputStyle = css.email_input; + let inputStyle = css.emailInput; if (subscriptionFormStatus.status === 'error') { btnText = subscriptionFormStatus.error; - btnStyle = `${css.button} ${css.button_failure}`; - inputStyle = `${css.email_input} ${css.email_input_failure}`; + btnStyle = `${css.button} ${css.buttonFailure}`; + inputStyle = `${css.emailInput} ${css.emailInputFailure}`; } else if (subscriptionFormStatus.status === 'success') { btnText = 'Requested!'; - btnStyle = `${css.button} ${css.button_success}`; + btnStyle = `${css.button} ${css.buttonSuccess}`; } const inputClassName = classNames([typography.paragraph2, inputStyle]);