proof of concept working

3 files changed, 22 insertions, 9 deletions

diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx
index 04e4c7935..b574fd35c 100644
--- a/packages/instant/src/components/sandbox.tsx
+++ b/packages/instant/src/components/sandbox.tsx
@@ -3,11 +3,6 @@ import * as React from 'react';
 import { MediaChoice, stylesForMedia } from '../style/media';
 import { styled } from '../style/theme';
 
-// export const Sandbox: React.StatelessComponent<{}> = props => {
-//     return <div>Hi</div>;
-// };
-
-// TODO: handle string too
 interface SandboxProps {
     width: MediaChoice;
 }
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 8fd4d56c3..c60a9c40e 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 (
             <Container width="350px" smallWidth="100%" smallHeight="100%" position="relative">
-                <Sandbox width={{ sm: '10px' }}>Test</Sandbox>
+                {/* <Sandbox width={{ default: '300px', sm: '5px', md: '900px' }}>Test</Sandbox> */}
+                <Sandbox width="100px">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 5a0cba668..84b85a2a8 100644
--- a/packages/instant/src/style/media.ts
+++ b/packages/instant/src/style/media.ts
@@ -21,12 +21,29 @@ export const media = {
 };
 
 /// media helper
-export interface MediaChoice {
-    sm: string;
+export interface ScreenSpecifications {
+    default: string;
+    sm?: string;
     md?: string;
     lg?: string;
 }
+export type MediaChoice = string | ScreenSpecifications;
 // TODO: handle string too
 export const stylesForMedia = (choice: MediaChoice): InterpolationValue[] => {
-    return media.small`width: ${choice.sm}`;
+    let res: 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}`}
+        `;
+    }
+
+    console.log(res.toString());
+    return res;
 };