diff options
| -rw-r--r-- | packages/instant/src/components/css_reset.tsx | 57 | ||||
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant.tsx | 10 | ||||
| -rw-r--r-- | packages/instant/src/components/zero_ex_instant_container.tsx | 5 | ||||
| -rw-r--r-- | packages/instant/src/constants.ts | 1 | ||||
| -rw-r--r-- | packages/instant/src/index.umd.ts | 3 |
5 files changed, 41 insertions, 35 deletions
diff --git a/packages/instant/src/components/css_reset.tsx b/packages/instant/src/components/css_reset.tsx index 891c95e4d..a1dd2e05c 100644 --- a/packages/instant/src/components/css_reset.tsx +++ b/packages/instant/src/components/css_reset.tsx @@ -1,34 +1,33 @@ -import { styled } from '../style/theme'; +import { INJECTED_DIV_CLASS } from '../constants'; +import { createGlobalStyle } from '../style/theme'; export interface CSSResetProps {} -export const CSSReset = - styled.div < - CSSResetProps > - ` - /* - * Derived from - * https://github.com/jtrost/Complete-CSS-Reset - */ - - a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button, - canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, - details, dialog, dfn, div, dl, dt, em, embed, fieldset, figure, form, - h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, - input, ins, keygen, kbd, label, legend, li, map, mark, menu, meter, nav, - noscript, object, ol, optgroup, option, output, p, param, pre, progress, - q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup, - table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video { - background: transparent; - border: 0; - font-size: 100%; - font: inherit; - margin: 0; - outline: none; - padding: 0; - text-align: left; - text-decoration: none; - vertical-align: baseline; - z-index: 1; +/* +* Derived from +* https://github.com/jtrost/Complete-CSS-Reset +*/ +export const CSSReset = createGlobalStyle` + .${INJECTED_DIV_CLASS} { + a, abbr, area, article, aside, audio, b, bdo, blockquote, body, button, + canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, + details, dialog, dfn, div, dl, dt, em, embed, fieldset, figure, form, + h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, + input, ins, keygen, kbd, label, legend, li, map, mark, menu, meter, nav, + noscript, object, ol, optgroup, option, output, p, param, pre, progress, + q, rp, rt, ruby, samp, section, select, small, span, strong, sub, sup, + table, tbody, td, textarea, tfoot, th, thead, time, tr, ul, var, video { + background: transparent; + border: 0; + font-size: 100%; + font: inherit; + margin: 0; + outline: none; + padding: 0; + text-align: left; + text-decoration: none; + vertical-align: baseline; + z-index: 1; + } } `; diff --git a/packages/instant/src/components/zero_ex_instant.tsx b/packages/instant/src/components/zero_ex_instant.tsx index 907c42e7a..b945f9908 100644 --- a/packages/instant/src/components/zero_ex_instant.tsx +++ b/packages/instant/src/components/zero_ex_instant.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; +import { INJECTED_DIV_CLASS } from '../constants'; + import { ZeroExInstantContainer } from './zero_ex_instant_container'; import { ZeroExInstantProvider, ZeroExInstantProviderProps } from './zero_ex_instant_provider'; @@ -7,8 +9,10 @@ export type ZeroExInstantProps = ZeroExInstantProviderProps; export const ZeroExInstant: React.StatelessComponent<ZeroExInstantProps> = props => { return ( - <ZeroExInstantProvider {...props}> - <ZeroExInstantContainer /> - </ZeroExInstantProvider> + <div className={INJECTED_DIV_CLASS}> + <ZeroExInstantProvider {...props}> + <ZeroExInstantContainer /> + </ZeroExInstantProvider> + </div> ); }; diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx index efcb263ba..3f270f2f4 100644 --- a/packages/instant/src/components/zero_ex_instant_container.tsx +++ b/packages/instant/src/components/zero_ex_instant_container.tsx @@ -28,7 +28,8 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain }; public render(): React.ReactNode { return ( - <CSSReset> + <React.Fragment> + <CSSReset /> <Container width="350px" position="relative"> <Container zIndex={zIndex.errorPopup} position="relative"> <LatestError /> @@ -58,7 +59,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain </SlidingPanel> </Container> </Container> - </CSSReset> + </React.Fragment> ); } private readonly _handleSymbolClick = (): void => { diff --git a/packages/instant/src/constants.ts b/packages/instant/src/constants.ts index 15105b65c..12cbe3a70 100644 --- a/packages/instant/src/constants.ts +++ b/packages/instant/src/constants.ts @@ -2,6 +2,7 @@ import { BigNumber } from '@0x/utils'; export const BIG_NUMBER_ZERO = new BigNumber(0); export const ETH_DECIMALS = 18; export const DEFAULT_ZERO_EX_CONTAINER_SELECTOR = '#zeroExInstantContainer'; +export const INJECTED_DIV_CLASS = 'zeroExInstantResetRoot'; export const INJECTED_DIV_ID = 'zeroExInstant'; export const WEB_3_WRAPPER_TRANSACTION_FAILED_ERROR_MSG_PREFIX = 'Transaction failed'; export const GWEI_IN_WEI = new BigNumber(1000000000); diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts index 59d1e646f..0274db30c 100644 --- a/packages/instant/src/index.umd.ts +++ b/packages/instant/src/index.umd.ts @@ -2,7 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_ID } from './constants'; +import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_CLASS, INJECTED_DIV_ID } from './constants'; import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index'; import { assert } from './util/assert'; @@ -41,6 +41,7 @@ export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFA const appendTo = appendToIfExists as Element; const injectedDiv = document.createElement('div'); injectedDiv.setAttribute('id', INJECTED_DIV_ID); + injectedDiv.setAttribute('class', INJECTED_DIV_CLASS); appendTo.appendChild(injectedDiv); const instantOverlayProps = { ...props, |