feat(website): fix screenshots in marketing page for small screens

2 files changed, 31 insertions, 11 deletions

diff --git a/packages/website/ts/pages/instant/instant.tsx b/packages/website/ts/pages/instant/instant.tsx
index 56d54cd06..8c0afa298 100644
--- a/packages/website/ts/pages/instant/instant.tsx
+++ b/packages/website/ts/pages/instant/instant.tsx
@@ -54,7 +54,7 @@ export class Instant extends React.Component<InstantProps, InstantState> {
                 />
                 <Container backgroundColor={colors.instantPrimaryBackground} />
                 <Introducing0xInstant />
-                <Screenshots />
+                <Screenshots screenWidth={this.props.screenWidth} />
                 <Features screenWidth={this.props.screenWidth} />
                 <NeedMore screenWidth={this.props.screenWidth} />
                 <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
diff --git a/packages/website/ts/pages/instant/screenshots.tsx b/packages/website/ts/pages/instant/screenshots.tsx
index 4c87f1a19..b0ea59470 100644
--- a/packages/website/ts/pages/instant/screenshots.tsx
+++ b/packages/website/ts/pages/instant/screenshots.tsx
@@ -1,15 +1,35 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 
 import { Container } from 'ts/components/ui/container';
 import { colors } from 'ts/style/colors';
+import { ScreenWidths } from 'ts/types';
 
-export const Screenshots = () => (
-    <Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center">
-        <img className="px1" width="300px" height="420px" src="images/instant/snt_screenshot.png" />
-        <img className="px1" width="300px" height="420px" src="images/instant/omg_screenshot.png" />
-        <img className="px1" width="300px" height="420px" src="images/instant/kitty_screenshot.png" />
-        <img className="px1" width="300px" height="420px" src="images/instant/bat_screenshot.png" />
-        <img className="px1" width="300px" height="420px" src="images/instant/leroy_screenshot.png" />
-        <img className="px1" width="300px" height="420px" src="images/instant/mkr_screenshot.png" />
-    </Container>
-);
+export interface ScreenshotsProps {
+    screenWidth: ScreenWidths;
+}
+
+export const Screenshots = (props: ScreenshotsProps) => {
+    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+    const images = isSmallScreen
+        ? [
+              'images/instant/omg_screenshot.png',
+              'images/instant/kitty_screenshot.png',
+              'images/instant/bat_screenshot.png',
+          ]
+        : [
+              'images/instant/snt_screenshot.png',
+              'images/instant/omg_screenshot.png',
+              'images/instant/kitty_screenshot.png',
+              'images/instant/bat_screenshot.png',
+              'images/instant/leroy_screenshot.png',
+              'images/instant/mkr_screenshot.png',
+          ];
+    return (
+        <Container backgroundColor={colors.instantPrimaryBackground} className="py3 flex justify-center">
+            {_.map(images, image => {
+                return <img className="px1" width="300px" height="420px" src={image} />;
+            })}
+        </Container>
+    );
+};