aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/instant/src/components/animations/slide_up_and_down_animation.tsx96
-rw-r--r--packages/instant/src/components/sliding_error.tsx36
-rw-r--r--packages/instant/src/components/ui/container.tsx2
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx20
-rw-r--r--packages/instant/src/style/theme.ts4
5 files changed, 152 insertions, 6 deletions
diff --git a/packages/instant/src/components/animations/slide_up_and_down_animation.tsx b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
new file mode 100644
index 000000000..9c18e0933
--- /dev/null
+++ b/packages/instant/src/components/animations/slide_up_and_down_animation.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+
+import { keyframes, styled } from '../../style/theme';
+
+const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
+ from {
+ position: relative;
+ top: ${fromY};
+ }
+
+ to {
+ position: relative;
+ top: ${toY};
+ }
+`;
+
+export interface SlideAnimationProps {
+ keyframes: string;
+ animationType: string;
+ animationDirection?: string;
+}
+
+export const SlideAnimation =
+ styled.div <
+ SlideAnimationProps >
+ `
+ animation-name: ${props => props.keyframes};
+ animation-duration: 0.3s;
+ animation-timing-function: ${props => props.animationType};
+ animation-delay: 0s;
+ animation-iteration-count: 1;
+ animation-fill-mode: ${props => props.animationDirection || 'none'};
+ position: relative;
+`;
+
+export interface SlideAnimationComponentProps {
+ downY: string;
+}
+
+export const SlideUpAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
+ <SlideAnimation animationType="ease-in" keyframes={slideKeyframeGenerator(props.downY, '0px')}>
+ {props.children}
+ </SlideAnimation>
+);
+
+export const SlideDownAnimationComponent: React.StatelessComponent<SlideAnimationComponentProps> = props => (
+ <SlideAnimation
+ animationDirection="forwards"
+ animationType="cubic-bezier(0.25, 0.1, 0.25, 1)"
+ keyframes={slideKeyframeGenerator('0px', props.downY)}
+ >
+ {props.children}
+ </SlideAnimation>
+);
+
+export interface SlideUpAndDownAnimationProps extends SlideAnimationComponentProps {
+ delayMs: number;
+}
+
+enum SlideState {
+ Up = 'up',
+ Down = 'down',
+}
+interface SlideUpAndDownState {
+ slideState: SlideState;
+}
+
+export class SlideUpAndDownAnimation extends React.Component<SlideUpAndDownAnimationProps, SlideUpAndDownState> {
+ public state = {
+ slideState: SlideState.Up,
+ };
+
+ private _timeoutId?: number;
+ public render(): React.ReactNode {
+ return this._renderSlide();
+ }
+ public componentDidMount(): void {
+ this._timeoutId = window.setTimeout(() => {
+ this.setState({
+ slideState: SlideState.Down,
+ });
+ }, this.props.delayMs);
+
+ return;
+ }
+ public componentWillUnmount(): void {
+ if (this._timeoutId) {
+ window.clearTimeout(this._timeoutId);
+ }
+ }
+ private _renderSlide(): React.ReactNode {
+ const SlideComponent = this.state.slideState === 'up' ? SlideUpAnimationComponent : SlideDownAnimationComponent;
+
+ return <SlideComponent downY={this.props.downY}>{this.props.children}</SlideComponent>;
+ }
+}
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
new file mode 100644
index 000000000..0237fb7e9
--- /dev/null
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation';
+
+import { Container, Text } from './ui';
+
+export interface ErrorProps {
+ icon: string;
+ message: string;
+}
+
+export const Error: React.StatelessComponent<ErrorProps> = props => (
+ <Container
+ padding="10px"
+ border={`1px solid ${ColorOption.darkOrange}`}
+ backgroundColor={ColorOption.lightOrange}
+ width="100%"
+ borderRadius="6px"
+ marginBottom="10px"
+ >
+ <Container marginRight="5px" display="inline">
+ {props.icon}
+ </Container>
+ <Text fontWeight="500" fontColor={ColorOption.darkOrange}>
+ {props.message}
+ </Text>
+ </Container>
+);
+
+export const SlidingError: React.StatelessComponent<ErrorProps> = props => (
+ <SlideUpAndDownAnimation downY="120px" delayMs={5000}>
+ <Error icon={props.icon} message={props.message} />
+ </SlideUpAndDownAnimation>
+);
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index c45f6e5e9..02b16e39f 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -26,6 +26,7 @@ export interface ContainerProps {
className?: string;
backgroundColor?: ColorOption;
hasBoxShadow?: boolean;
+ zIndex?: number;
}
const PlainContainer: React.StatelessComponent<ContainerProps> = ({ children, className }) => (
@@ -52,6 +53,7 @@ export const Container = styled(PlainContainer)`
${props => cssRuleIfExists(props, 'border')}
${props => cssRuleIfExists(props, 'border-top')}
${props => cssRuleIfExists(props, 'border-bottom')}
+ ${props => cssRuleIfExists(props, 'z-index')}
${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index b624d712f..51f9dc63e 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -11,11 +11,19 @@ import { Container, Flex } from './ui';
export interface ZeroExInstantContainerProps {}
export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
- <Container hasBoxShadow={true} width="350px" backgroundColor={ColorOption.white} borderRadius="3px">
- <Flex direction="column" justify="flex-start">
- <SelectedAssetInstantHeading />
- <LatestBuyQuoteOrderDetails />
- <SelectedAssetBuyButton />
- </Flex>
+ <Container width="350px">
+ <Container
+ zIndex={2}
+ position="relative"
+ backgroundColor={ColorOption.white}
+ borderRadius="3px"
+ hasBoxShadow={true}
+ >
+ <Flex direction="column" justify="flex-start">
+ <SelectedAssetInstantHeading />
+ <LatestBuyQuoteOrderDetails />
+ <SelectedAssetBuyButton />
+ </Flex>
+ </Container>
</Container>
);
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index cf9da5378..d26c816c1 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -12,6 +12,8 @@ export enum ColorOption {
feintGrey = 'feintGrey',
darkGrey = 'darkGrey',
white = 'white',
+ lightOrange = 'lightOrange',
+ darkOrange = 'darkOrange',
}
export const theme: Theme = {
@@ -22,6 +24,8 @@ export const theme: Theme = {
feintGrey: '#DEDEDE',
darkGrey: '#333333',
white: 'white',
+ lightOrange: '#F9F2ED',
+ darkOrange: '#F2994C',
};
export { styled, css, injectGlobal, keyframes, ThemeProvider };