aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/css_reset.tsx57
-rw-r--r--packages/instant/src/components/zero_ex_instant.tsx10
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx5
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 => {