fix: apply css reset to overlay as well

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,