diff options
3 files changed, 34 insertions, 44 deletions
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'; |