Fix home page for all screen sizes

opengovsg · May 18, 2020 · 643a34d · 643a34d
1 parent 98cdaea
commit 643a34d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
diff --git a/src/client/components/HomePage/FeatureListSliver.jsx b/src/client/components/HomePage/FeatureListSliver.jsx
@@ -35,34 +35,28 @@ const useStyles = makeStyles((theme) =>
     nestedGrid: {},
     card: {
       display: 'flex',
-      flexDirection: 'column',
       boxShadow: 'none',
       height: '100%',
       backgroundColor: 'transparent',
       alignItems: 'flex-start',
-      [theme.breakpoints.up('lg')]: {
-        alignItems: 'flex-start',
-        flexDirection: 'row',
-      },
+      flexDirection: 'row',
     },
     cardVectorIcon: {
       minWidth: '50px',
+      marginRight: theme.spacing(2),
       [theme.breakpoints.up('lg')]: {
         minWidth: 'auto',
         minHeight: '60px',
         marginRight: theme.spacing(4),
       },
     },
     cardContent: {
-      paddingTop: theme.spacing(4),
+      paddingTop: theme.spacing(1),
       paddingLeft: theme.spacing(0),
       paddingRight: theme.spacing(0),
       '&:last-child': {
         paddingBottom: 0,
       },
-      [theme.breakpoints.up('lg')]: {
-        paddingTop: theme.spacing(0),
-      },
     },
   }),
 )

diff --git a/src/client/components/HomePage/StatisticsGraphic/index.jsx b/src/client/components/HomePage/StatisticsGraphic/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { createStyles, makeStyles } from '@material-ui/core'
+import statsGraphic from '~/assets/landing-page-graphics/stats-graphic.svg'
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      maxWidth: '100%',
+    },
+  }),
+)
+
+const StatisticsGraphic = () => {
+  const classes = useStyles()
+
+  return (
+    <img className={classes.root} src={statsGraphic} alt="Statistics graphic" />
+  )
+}
+
+export default StatisticsGraphic
diff --git a/src/client/components/HomePage/StatisticsSliver.jsx b/src/client/components/HomePage/StatisticsSliver.jsx
@@ -5,18 +5,14 @@ import {
   Card,
   CardContent,
   Grid,
-  Hidden,
   Typography,
   createStyles,
   makeStyles,
-  useMediaQuery,
-  useTheme,
 } from '@material-ui/core'
 
 import homeActions from '~/actions/home'
 import numberFormatter from '~/util/format'
-
-import statsGraphic from '~/assets/landing-page-graphics/stats-graphic.svg'
+import StatisticsGraphic from './StatisticsGraphic'
 
 const mapDispatchToProps = (dispatch) => ({
   loadStats: () => dispatch(homeActions.loadStats()),
@@ -76,15 +72,9 @@ const useStyles = makeStyles((theme) =>
       },
     },
     stats: {
-      flexGrow: 0.75,
-      width: '130px',
-      [theme.breakpoints.up('lg')]: {
-        width: '384px',
-      },
-      [theme.breakpoints.up('xl')]: {
-        width: '544px',
-        maxWidth: '800px',
-      },
+      flexGrow: 0.8,
+      width: '384px',
+      maxWidth: '800px',
     },
   }),
 )
@@ -104,7 +94,7 @@ const StatisticsSliver = (props) => {
       <Typography variant="h2" color="textPrimary" gutterBottom>
         The official link shortener for the Singapore government
       </Typography>
-      <Grid container className={classes.grid}>
+      <Grid container className={classes.grid} spacing={2}>
         <Grid
           container
           item
@@ -161,11 +151,9 @@ const StatisticsSliver = (props) => {
             </Card>
           </Grid>
         </Grid>
-        <Hidden smDown>
-          <Grid item>
-            <img src={statsGraphic} alt="Statistics graphic" />
-          </Grid>
-        </Hidden>
+        <Grid item>
+          <StatisticsGraphic />
+        </Grid>
       </Grid>
       <Button
         className={classes.getStartedButton}