diff --git a/packages/instant/src/components/sandbox.tsx b/packages/instant/src/components/sandbox.tsx index b574fd35cd..b2c64efd3f 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 c60a9c40e4..2d8c5bdb0a 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 - {/* Test */} - Test + Test diff --git a/packages/instant/src/style/media.ts b/packages/instant/src/style/media.ts index 84b85a2a8a..4bcbd608f6 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}`} + `; };