From d410fbfb4a727d0050004f2538baa5272eb7c451 Mon Sep 17 00:00:00 2001
From: Manuel Calavera <diserkin@gmail.com>
Date: Wed, 17 Jul 2019 09:32:55 -0700
Subject: [PATCH] feat: overview mobile breakpoint

---
 .../Dashboard/NetworkOverview/StatCards/index.jsx   |  2 +-
 .../components/Dashboard/NetworkOverview/index.jsx  |  4 ++--
 .../components/Dashboard/NetworkOverview/styles.js  |  7 +++++--
 src/v2/components/Dashboard/ViewAll/index.jsx       | 13 ++++++++-----
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx b/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx
index 5e893885..52545bcf 100644
--- a/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx
+++ b/src/v2/components/Dashboard/NetworkOverview/StatCards/index.jsx
@@ -57,7 +57,7 @@ const StatCards = () => {
     value: string | (() => React$Node),
     changes?: string,
   }) => (
-    <Grid key={title} item xs={3} zeroMinWidth>
+    <Grid key={title} item xs={12} sm={6} lg={3} zeroMinWidth>
       <Card title={title} value={value} changes={changes} />
     </Grid>
   );
diff --git a/src/v2/components/Dashboard/NetworkOverview/index.jsx b/src/v2/components/Dashboard/NetworkOverview/index.jsx
index 625c555f..5947031c 100644
--- a/src/v2/components/Dashboard/NetworkOverview/index.jsx
+++ b/src/v2/components/Dashboard/NetworkOverview/index.jsx
@@ -39,10 +39,10 @@ const NetworkOverview = () => {
       <div className={classes.root}>
         <SectionHeader title="Network Overview" />
         <Grid container spacing={2} className={classes.row}>
-          <Grid item xs={6}>
+          <Grid item xs={12} md={6}>
             <TPS />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} md={6}>
             <NodesMap />
           </Grid>
         </Grid>
diff --git a/src/v2/components/Dashboard/NetworkOverview/styles.js b/src/v2/components/Dashboard/NetworkOverview/styles.js
index db9cb860..20fab92c 100644
--- a/src/v2/components/Dashboard/NetworkOverview/styles.js
+++ b/src/v2/components/Dashboard/NetworkOverview/styles.js
@@ -1,11 +1,14 @@
 import {makeStyles} from '@material-ui/core';
 
-export default makeStyles({
+export default makeStyles(theme => ({
   root: {
     padding: '40px 0',
     position: 'relative',
+    [theme.breakpoints.down('sm')]: {
+      paddingTop: 60,
+    },
   },
   row: {
     marginBottom: 8,
   },
-});
+}));
diff --git a/src/v2/components/Dashboard/ViewAll/index.jsx b/src/v2/components/Dashboard/ViewAll/index.jsx
index bf425efe..e245fcc8 100644
--- a/src/v2/components/Dashboard/ViewAll/index.jsx
+++ b/src/v2/components/Dashboard/ViewAll/index.jsx
@@ -1,5 +1,6 @@
 // @flow
-import {Container, Grid} from '@material-ui/core';
+import {Container, Grid, useTheme} from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import React from 'react';
 import Button from 'v2/components/UI/Button';
 import SectionHeader from 'v2/components/UI/SectionHeader';
@@ -8,22 +9,24 @@ import useStyles from './styles';
 
 const ViewAll = () => {
   const classes = useStyles();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   return (
     <Container>
       <div className={classes.root}>
         <SectionHeader title="View All" />
-        <Grid container spacing={8}>
-          <Grid item xs={4}>
+        <Grid container spacing={isMobile ? 2 : 8}>
+          <Grid item xs={12} sm={4}>
             <Button variant="contained" size="large" fullWidth color="primary">
               View all transactions
             </Button>
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={4}>
             <Button variant="contained" size="large" fullWidth color="primary">
               View all applications
             </Button>
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={12} sm={4}>
             <Button variant="contained" size="large" fullWidth color="primary">
               View all blocks
             </Button>