1 files changed, 64 insertions, 13 deletions
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
index 3865a8797..a8d4e391c 100644
--- a/packages/instant/src/components/sliding_error.tsx
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -1,10 +1,15 @@
 import * as React from 'react';
 
+import { ScreenSpecification } from '../style/media';
 import { ColorOption } from '../style/theme';
+import { zIndex } from '../style/z_index';
 
-import { SlideDownAnimation, SlideUpAnimation } from './animations/slide_animations';
+import { PositionAnimationSettings } from './animations/position_animation';
+import { SlideAnimation, SlideAnimationState } from './animations/slide_animation';
 
-import { Container, Text } from './ui';
+import { Container } from './ui/container';
+import { Flex } from './ui/flex';
+import { Text } from './ui/text';
 
 export interface ErrorProps {
     icon: string;
@@ -18,27 +23,73 @@ export const Error: React.StatelessComponent<ErrorProps> = props => (
         backgroundColor={ColorOption.lightOrange}
         width="100%"
         borderRadius="6px"
+        marginTop="10px"
         marginBottom="10px"
     >
-        <Container marginRight="5px" display="inline" top="3px" position="relative">
-            <Text fontSize="20px">{props.icon}</Text>
-        </Container>
-        <Text fontWeight="500" fontColor={ColorOption.darkOrange}>
-            {props.message}
-        </Text>
+        <Flex justify="flex-start">
+            <Container marginRight="5px" display="inline" top="3px" position="relative">
+                <Text fontSize="20px">{props.icon}</Text>
+            </Container>
+            <Text fontWeight="500" fontColor={ColorOption.darkOrange}>
+                {props.message}
+            </Text>
+        </Flex>
     </Container>
 );
 
-export type SlidingDirection = 'up' | 'down';
 export interface SlidingErrorProps extends ErrorProps {
-    direction: SlidingDirection;
+    animationState: SlideAnimationState;
 }
 export const SlidingError: React.StatelessComponent<SlidingErrorProps> = props => {
-    const AnimationComponent = props.direction === 'up' ? SlideUpAnimation : SlideDownAnimation;
+    const slideAmount = '120px';
+
+    const desktopSlideIn: PositionAnimationSettings = {
+        timingFunction: 'ease-in',
+        top: {
+            from: slideAmount,
+            to: '0px',
+        },
+        position: 'relative',
+    };
+    const desktopSlideOut: PositionAnimationSettings = {
+        timingFunction: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+        top: {
+            from: '0px',
+            to: slideAmount,
+        },
+        position: 'relative',
+    };
+
+    const mobileSlideIn: PositionAnimationSettings = {
+        duration: '0.5s',
+        timingFunction: 'ease-in',
+        top: { from: '-120px', to: '0px' },
+        position: 'fixed',
+    };
+    const moblieSlideOut: PositionAnimationSettings = {
+        duration: '0.5s',
+        timingFunction: 'ease-in',
+        top: { from: '0px', to: '-120px' },
+        position: 'fixed',
+    };
+
+    const slideUpSettings: ScreenSpecification<PositionAnimationSettings> = {
+        default: desktopSlideIn,
+        sm: mobileSlideIn,
+    };
+    const slideOutSettings: ScreenSpecification<PositionAnimationSettings> = {
+        default: desktopSlideOut,
+        sm: moblieSlideOut,
+    };
 
     return (
-        <AnimationComponent downY="120px">
+        <SlideAnimation
+            slideInSettings={slideUpSettings}
+            slideOutSettings={slideOutSettings}
+            zIndex={{ sm: zIndex.errorPopup, default: zIndex.errorPopBehind }}
+            animationState={props.animationState}
+        >
             <Error icon={props.icon} message={props.message} />
-        </AnimationComponent>
+        </SlideAnimation>
     );
 };