aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-10-20 04:34:42 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-10-20 04:34:42 +0800
commit43ad2fe23bec01b077f5c55a23736fdcb24781a3 (patch)
tree63dea58b4338f0c19f1428ac8221cf3c21caa882 /packages/instant
parent100f446031e84c367f1d0852ef60fd04d4544b9f (diff)
downloaddexon-0x-contracts-43ad2fe23bec01b077f5c55a23736fdcb24781a3.tar
dexon-0x-contracts-43ad2fe23bec01b077f5c55a23736fdcb24781a3.tar.gz
dexon-0x-contracts-43ad2fe23bec01b077f5c55a23736fdcb24781a3.tar.bz2
dexon-0x-contracts-43ad2fe23bec01b077f5c55a23736fdcb24781a3.tar.lz
dexon-0x-contracts-43ad2fe23bec01b077f5c55a23736fdcb24781a3.tar.xz
dexon-0x-contracts-43ad2fe23bec01b077f5c55a23736fdcb24781a3.tar.zst
dexon-0x-contracts-43ad2fe23bec01b077f5c55a23736fdcb24781a3.zip
feat: upgrade to styled-components v4
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/package.json5
-rw-r--r--packages/instant/src/components/animations/slide_animations.tsx10
-rw-r--r--packages/instant/src/style/fonts.ts10
-rw-r--r--packages/instant/src/style/theme.ts4
4 files changed, 17 insertions, 12 deletions
diff --git a/packages/instant/package.json b/packages/instant/package.json
index 1a6e9d2e9..be85b5062 100644
--- a/packages/instant/package.json
+++ b/packages/instant/package.json
@@ -58,12 +58,12 @@
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.5",
- "styled-components": "^3.4.9",
+ "styled-components": "^4.0.2",
"ts-optchain": "^0.1.1"
},
"devDependencies": {
- "@static/discharge": "^1.2.2",
"@0x/tslint-config": "^1.0.9",
+ "@static/discharge": "^1.2.2",
"@types/enzyme": "^3.1.14",
"@types/enzyme-adapter-react-16": "^1.0.3",
"@types/jest": "^23.3.5",
@@ -73,6 +73,7 @@
"@types/react-dom": "^16.0.8",
"@types/react-redux": "^6.0.9",
"@types/redux": "^3.6.0",
+ "@types/styled-components": "^4.0.1",
"awesome-typescript-loader": "^5.2.1",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
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 };