aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/sandbox.tsx2
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx3
-rw-r--r--packages/instant/src/style/media.ts23
3 files changed, 11 insertions, 17 deletions
diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx
index b574fd35c..b2c64efd3 100644
--- a/packages/instant/src/components/sandbox.tsx
+++ b/packages/instant/src/components/sandbox.tsx
@@ -13,5 +13,5 @@ export const Sandbox =
display: block;
border: 1px solid black;
background-color: yellow;
- ${props => stylesForMedia(props.width)}
+ ${props => stylesForMedia('width', props.width)}
`;
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index c60a9c40e..2d8c5bdb0 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -28,8 +28,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
public render(): React.ReactNode {
return (
<Container width="350px" smallWidth="100%" smallHeight="100%" position="relative">
- {/* <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox> */}
- <Sandbox width="100px">Test</Sandbox>
+ <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox>
<Container zIndex={zIndex.errorPopup} position="relative">
<LatestError />
</Container>
diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts
index 84b85a2a8..4bcbd608f 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -28,22 +28,17 @@ export interface ScreenSpecifications {
lg?: string;
}
export type MediaChoice = string | ScreenSpecifications;
-// TODO: handle string too
-export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
- let res: InterpolationValue[];
+export const stylesForMedia = (cssPropertyName: string, choice: MediaChoice): InterpolationValue[] => {
if (typeof choice === 'string') {
- res = css`
- width: ${choice};
- `;
- } else {
- res = css`
- width: ${choice.default};
- ${choice.lg && media.large`width: ${choice.lg}`}
- ${choice.md && media.medium`width: ${choice.md}`}
- ${choice.sm && media.small`width: ${choice.sm}`}
+ return css`
+ ${cssPropertyName}: ${choice};
`;
}
- console.log(res.toString());
- return res;
+ return css`
+ ${cssPropertyName}: ${choice.default};
+ ${choice.lg && media.large`${cssPropertyName}: ${choice.lg}`}
+ ${choice.md && media.medium`${cssPropertyName}: ${choice.md}`}
+ ${choice.sm && media.small`${cssPropertyName}: ${choice.sm}`}
+ `;
};