fix: apply css reset to overlay as well

3 files changed, 38 insertions, 34 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 => {