diff options
4 files changed, 84 insertions, 59 deletions
diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx index 6dc4bf678..eef496982 100644 --- a/packages/website/ts/@next/components/newsletter_form.tsx +++ b/packages/website/ts/@next/components/newsletter_form.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import styled, { withTheme } from 'styled-components'; +import { ThemeValuesInterface } from 'ts/@next/components/siteWrap'; import { colors } from 'ts/style/colors'; - -import {ThemeValuesInterface} from 'ts/@next/components/siteWrap'; +import { errorReporter } from 'ts/utils/error_reporter'; interface FormProps { theme: ThemeValuesInterface; @@ -27,7 +27,9 @@ const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputEleme return ( <InnerInputWrapper {...props}> - <label className="visuallyHidden" htmlFor={id}>{label}</label> + <label className="visuallyHidden" htmlFor={id}> + {label} + </label> <StyledInput ref={ref} id={id} placeholder={label} type={type || 'text'} {...props} /> </InnerInputWrapper> ); @@ -39,17 +41,34 @@ class Form extends React.Component<FormProps> { isSubmitted: false, }; public render(): React.ReactNode { - const {isSubmitted} = this.state; - const {theme} = this.props; + const { isSubmitted } = this.state; + const { theme } = this.props; return ( <StyledForm onSubmit={this._onSubmitAsync.bind(this)}> <InputWrapper> - <Input isSubmitted={isSubmitted} name="email" type="email" label="Email Address" ref={this.emailInput} required={true} textColor={theme.textColor} /> + <Input + isSubmitted={isSubmitted} + name="email" + type="email" + label="Email Address" + ref={this.emailInput} + required={true} + textColor={theme.textColor} + /> <SubmitButton> - <Arrow isSubmitted={isSubmitted} width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#CBCBCB"/> + <Arrow + isSubmitted={isSubmitted} + width="22" + height="17" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" + fill="#CBCBCB" + /> </Arrow> </SubmitButton> <SuccessText isSubmitted={isSubmitted}>🎉 Thank you for signing up!</SuccessText> @@ -67,6 +86,10 @@ class Form extends React.Component<FormProps> { this.setState({ isSubmitted: true }); + if (email === 'triggererror@0xproject.org') { + throw new Error('Manually triggered error'); + } + try { const response = await fetch('https://website-api.0x.org/newsletter_subscriber/substack', { method: 'post', @@ -77,7 +100,7 @@ class Form extends React.Component<FormProps> { body: JSON.stringify({ email, referrer }), }); } catch (e) { - // dosomething + errorReporter.report(e); } } } @@ -92,7 +115,10 @@ const StyledForm = styled.form` margin-top: 27px; `; -const StyledInput = styled.input<InputProps>` +const StyledInput = + styled.input < + InputProps > + ` appearance: none; background-color: transparent; border: 0; @@ -112,7 +138,10 @@ const InputWrapper = styled.div` position: relative; `; -const InnerInputWrapper = styled.div<ArrowProps>` +const InnerInputWrapper = + styled.div < + ArrowProps > + ` opacity: ${props => props.isSubmitted && 0}; visibility: ${props => props.isSubmitted && 'hidden'}; transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; @@ -143,7 +172,10 @@ const Text = styled.p` margin-top: 15px; `; -const SuccessText = styled.p<ArrowProps>` +const SuccessText = + styled.p < + ArrowProps > + ` color: #B1B1B1; font-size: 1rem; font-weight: 300; @@ -154,13 +186,16 @@ const SuccessText = styled.p<ArrowProps>` top: 0; text-align: left; right: 50px; - opacity: ${props => props.isSubmitted ? 1 : 0}; - visibility: ${props => props.isSubmitted ? 'visible' : 'hidden'}; + opacity: ${props => (props.isSubmitted ? 1 : 0)}; + visibility: ${props => (props.isSubmitted ? 'visible' : 'hidden')}; transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; transition-delay: 0.55s; `; -const Arrow = styled.svg<ArrowProps>` +const Arrow = + styled.svg < + ArrowProps > + ` transform: ${props => props.isSubmitted && `translateX(44px)`}; transition: transform 0.25s ease-in-out; `; diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 91d5f2476..ec1b5bc42 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -7,8 +7,8 @@ import { OnboardingTooltip, TooltipPointerDisplay, } from 'ts/components/onboarding/onboarding_tooltip'; -import { Animation } from 'ts/components/ui/animation'; import { Container } from 'ts/components/ui/container'; +import { EaseUpFromBottomAnimation } from 'ts/components/ui/ease_up_from_bottom_animation'; import { Overlay } from 'ts/components/ui/overlay'; import { zIndex } from 'ts/style/z_index'; @@ -66,7 +66,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> { let onboardingElement = null; const currentStep = this._getCurrentStep(); if (this.props.isMobile) { - onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardingCard()}</Animation>; + onboardingElement = <EaseUpFromBottomAnimation>{this._renderOnboardingCard()}</EaseUpFromBottomAnimation>; } else if (currentStep.position.type === 'target') { const { placement, target } = currentStep.position; onboardingElement = ( diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx deleted file mode 100644 index 943e3bf28..000000000 --- a/packages/website/ts/components/ui/animation.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import { keyframes, styled } from 'ts/style/theme'; - -export type AnimationType = 'easeUpFromBottom'; - -export interface AnimationProps { - type: AnimationType; -} - -const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {...props} />; - -const appearFromBottomFrames = keyframes` - from { - position: fixed; - bottom: -500px; - left: 0px; - right: 0px; - } - - to { - position: fixed; - bottom: 0px; - left: 0px; - right: 0px; - } -`; - -const stylesForAnimation: { [K in AnimationType]: string } = { - // Needed for safari - easeUpFromBottom: `position: fixed`, -}; - -const animations: { [K in AnimationType]: string } = { - easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`, -}; - -export const Animation = styled(PlainAnimation)` - animation: ${props => animations[props.type]}; - ${props => stylesForAnimation[props.type]}; -`; - -Animation.displayName = 'Animation'; diff --git a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx new file mode 100644 index 000000000..176c9410c --- /dev/null +++ b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { css, keyframes, styled } from 'ts/style/theme'; + +const appearFromBottomFrames = keyframes` + from { + position: fixed; + bottom: -500px; + left: 0px; + right: 0px; + } + + to { + position: fixed; + bottom: 0px; + left: 0px; + right: 0px; + } +`; + +const stylesForAnimation = css` + position: fixed; +`; +const animations = css` + animation: ${appearFromBottomFrames} 1s ease 0s 1 forwards; +`; + +export const EaseUpFromBottomAnimation = styled.div` + ${props => animations}; + ${props => stylesForAnimation}; +`; + +EaseUpFromBottomAnimation.displayName = 'EaseUpFromBottomAnimation'; |