chore(website): random fixes for mobile optimization

1 files changed, 41 insertions, 26 deletions

diff --git a/packages/website/ts/pages/instant/introducing_0x_instant.tsx b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
index 50a7a1b2d..92183ba98 100644
--- a/packages/website/ts/pages/instant/introducing_0x_instant.tsx
+++ b/packages/website/ts/pages/instant/introducing_0x_instant.tsx
@@ -4,32 +4,47 @@ import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
 import { colors } from 'ts/style/colors';
+import { ScreenWidths } from 'ts/types';
 
-export const Introducing0xInstant = () => (
-    <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantPrimaryBackground }}>
-        <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}>
-            <Container className="sm-center sm-pt3">
-                <Text
-                    fontColor={colors.white}
-                    fontSize="42px"
-                    lineHeight="52px"
-                    fontFamily="Roboto Mono"
-                    fontWeight="600"
-                >
-                    Introducing 0x Instant
-                </Text>
-            </Container>
-            <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="600px">
-                <Text fontColor={colors.grey500} fontSize="20px" lineHeight="32px" fontFamily="Roboto Mono">
-                    A free and flexible way to offer simple crypto
-                    <br /> purchasing in any app or website.
-                </Text>
-            </Container>
-            <div className="py3">
-                <Button type="button" backgroundColor={colors.mediumBlue} fontColor={colors.white} fontSize="18px">
-                    Get Started
-                </Button>
+export interface Introducing0xInstantProps {
+    screenWidth: ScreenWidths;
+}
+
+export const Introducing0xInstant = (props: Introducing0xInstantProps) => {
+    const isSmallScreen = props.screenWidth === ScreenWidths.Sm;
+    const title = isSmallScreen ? (
+        <div>
+            Introducing<br />0x Instant
+        </div>
+    ) : (
+        <div>Introducing 0x Instant</div>
+    );
+    return (
+        <div className="clearfix center lg-pt4 md-pt4" style={{ backgroundColor: colors.instantPrimaryBackground }}>
+            <div className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center' }}>
+                <Container className="sm-center sm-pt3">
+                    <Text
+                        fontColor={colors.white}
+                        fontSize="42px"
+                        lineHeight="52px"
+                        fontFamily="Roboto Mono"
+                        fontWeight="600"
+                    >
+                        {title}
+                    </Text>
+                </Container>
+                <Container className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 sm-center" maxWidth="600px">
+                    <Text fontColor={colors.grey500} fontSize="20px" lineHeight="32px" fontFamily="Roboto Mono">
+                        A free and flexible way to offer simple crypto
+                        <br /> purchasing in any app or website.
+                    </Text>
+                </Container>
+                <div className="py3">
+                    <Button type="button" backgroundColor={colors.mediumBlue} fontColor={colors.white} fontSize="18px">
+                        Get Started
+                    </Button>
+                </div>
             </div>
         </div>
-    </div>
-);
+    );
+};