diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-10-20 04:34:42 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-10-20 04:34:42 +0800 |
commit | 43ad2fe23bec01b077f5c55a23736fdcb24781a3 (patch) | |
tree | 63dea58b4338f0c19f1428ac8221cf3c21caa882 /packages | |
parent | 100f446031e84c367f1d0852ef60fd04d4544b9f (diff) | |
download | dexon-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')
-rw-r--r-- | packages/instant/package.json | 5 | ||||
-rw-r--r-- | packages/instant/src/components/animations/slide_animations.tsx | 10 | ||||
-rw-r--r-- | packages/instant/src/style/fonts.ts | 10 | ||||
-rw-r--r-- | packages/instant/src/style/theme.ts | 4 |
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 }; |