feat: upgrade to styled-components v4

3 files changed, 14 insertions, 10 deletions

diff --git a/packages/instant/src/components/animations/slide_animations.tsx b/packages/instant/src/components/animations/slide_animations.tsx
index 1f10a2ed6..84280372b 100644
--- a/packages/instant/src/components/animations/slide_animations.tsx
+++ b/packages/instant/src/components/animations/slide_animations.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { Keyframes } from 'styled-components';
 
-import { keyframes, styled } from '../../style/theme';
+import { css, keyframes, styled } from '../../style/theme';
 
 const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
     from {
@@ -15,7 +16,7 @@ const slideKeyframeGenerator = (fromY: string, toY: string) => keyframes`
 `;
 
 export interface SlideAnimationProps {
-    keyframes: string;
+    keyframes: Keyframes;
     animationType: string;
     animationDirection?: string;
 }
@@ -24,7 +25,10 @@ export const SlideAnimation =
     styled.div <
     SlideAnimationProps >
     `
-    animation-name: ${props => props.keyframes};
+    animation-name: ${props =>
+        css`
+            ${props.keyframes};
+        `};
     animation-duration: 0.3s;
     animation-timing-function: ${props => props.animationType};
     animation-delay: 0s;
diff --git a/packages/instant/src/style/fonts.ts b/packages/instant/src/style/fonts.ts
index 975a30a61..f305fd612 100644
--- a/packages/instant/src/style/fonts.ts
+++ b/packages/instant/src/style/fonts.ts
@@ -1,10 +1,10 @@
-import { injectGlobal } from './theme';
-
 export const fonts = {
     include: () => {
         // Inject the inter-ui font into the page
-        return injectGlobal`
-            @import url('https://rsms.me/inter/inter-ui.css');
-        `;
+        const head = document.head || document.getElementsByTagName('head')[0];
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.appendChild(document.createTextNode(`@import url('https://rsms.me/inter/inter-ui.css')`));
+        head.appendChild(style);
     },
 };
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index d26c816c1..be527a12c 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -1,6 +1,6 @@
 import * as styledComponents from 'styled-components';
 
-const { default: styled, css, injectGlobal, keyframes, ThemeProvider } = styledComponents;
+const { default: styled, css, keyframes, ThemeProvider } = styledComponents;
 
 export type Theme = { [key in ColorOption]: string };
 
@@ -28,4 +28,4 @@ export const theme: Theme = {
     darkOrange: '#F2994C',
 };
 
-export { styled, css, injectGlobal, keyframes, ThemeProvider };
+export { styled, css, keyframes, ThemeProvider };