From 88c7d907fa97f7918b82df8c1759b43c28c7273b Mon Sep 17 00:00:00 2001
From: Steve Klebanoff <steve.klebanoff@gmail.com>
Date: Tue, 6 Nov 2018 13:56:29 -0800
Subject: better function definiton

---
 packages/instant/src/components/sandbox.tsx        |  2 +-
 .../src/components/zero_ex_instant_container.tsx   |  3 +--
 packages/instant/src/style/media.ts                | 23 +++++++++-------------
 3 files changed, 11 insertions(+), 17 deletions(-)

(limited to 'packages/instant')

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}`}
+    `;
 };
-- 
cgit v1.2.3