From 61afd12e21993bbfc1d7e77f28f340ad51624037 Mon Sep 17 00:00:00 2001
From: shanejonas <jonas.shane@gmail.com>
Date: Mon, 16 Sep 2019 18:19:02 -0700
Subject: [PATCH] fix: small screen cleanup

fixes #70
---
 package-lock.json                      | 141 ++++++-------------------
 package.json                           |   2 +-
 public/index.html                      |   2 +-
 src/App.tsx                            |  65 +++++++-----
 src/components/BlockList/BlockList.tsx |  73 +++++++------
 src/components/ChartCard.tsx           |   2 +-
 src/containers/BlockCardList.tsx       |   2 +-
 src/containers/Dashboard.tsx           | 104 +++++++++---------
 src/themes/jadeTheme.ts                |  10 +-
 9 files changed, 171 insertions(+), 230 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 39e47115..f56dfb9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1566,16 +1566,16 @@
       }
     },
     "@material-ui/core": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.4.2.tgz",
-      "integrity": "sha512-hnZ4SP/hWJ9sUoNMkStz/y/CL2c7j4JpVIB2py3+vpBFU9TgHL3noBk3Fr0gltRvvlYA9ekpiGsGZ2ukk1R7Eg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.2.1.tgz",
+      "integrity": "sha512-hasPQUFAb9OxKng7UX2+SjUWtVZbnkVJ/jHZWXTivVcU+UzvNIpA9AyRRQvZ8SPV6swP/HD2VzUBzoMEeRR6wg==",
       "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.4.1",
-        "@material-ui/system": "^4.3.3",
+        "@babel/runtime": "^7.2.0",
+        "@material-ui/styles": "^4.2.0",
+        "@material-ui/system": "^4.3.0",
         "@material-ui/types": "^4.1.1",
-        "@material-ui/utils": "^4.4.0",
-        "@types/react-transition-group": "^4.2.0",
+        "@material-ui/utils": "^4.1.0",
+        "@types/react-transition-group": "^2.0.16",
         "clsx": "^1.0.2",
         "convert-css-length": "^2.0.1",
         "deepmerge": "^4.0.0",
@@ -1588,41 +1588,6 @@
         "warning": "^4.0.1"
       },
       "dependencies": {
-        "@material-ui/styles": {
-          "version": "4.4.1",
-          "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.4.1.tgz",
-          "integrity": "sha512-wXASlta7G+N8NeihbAKQjL6E1XMkS3SWpksNKn1cxhmKYQ+5pkMAUW/rChC5ovG7C/C2ZIdajYgOz977m3xlBA==",
-          "requires": {
-            "@babel/runtime": "^7.4.4",
-            "@emotion/hash": "^0.7.1",
-            "@material-ui/types": "^4.1.1",
-            "@material-ui/utils": "^4.1.0",
-            "clsx": "^1.0.2",
-            "csstype": "^2.5.2",
-            "deepmerge": "^4.0.0",
-            "hoist-non-react-statics": "^3.2.1",
-            "jss": "10.0.0-alpha.24",
-            "jss-plugin-camel-case": "10.0.0-alpha.24",
-            "jss-plugin-default-unit": "10.0.0-alpha.24",
-            "jss-plugin-global": "10.0.0-alpha.24",
-            "jss-plugin-nested": "10.0.0-alpha.24",
-            "jss-plugin-props-sort": "10.0.0-alpha.24",
-            "jss-plugin-rule-value-function": "10.0.0-alpha.24",
-            "jss-plugin-vendor-prefixer": "10.0.0-alpha.24",
-            "prop-types": "^15.7.2",
-            "warning": "^4.0.1"
-          }
-        },
-        "@material-ui/utils": {
-          "version": "4.4.0",
-          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.4.0.tgz",
-          "integrity": "sha512-UXoQVwArQEQWXxf2FPs0iJGT+MePQpKr0Qh0CPoLc1OdF0GSMTmQczcqCzwZkeHxHAOq/NkIKM1Pb/ih1Avicg==",
-          "requires": {
-            "@babel/runtime": "^7.4.4",
-            "prop-types": "^15.7.2",
-            "react-is": "^16.8.6"
-          }
-        },
         "hoist-non-react-statics": {
           "version": "3.3.0",
           "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
@@ -2859,9 +2824,9 @@
       }
     },
     "@types/react-transition-group": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.2.tgz",
-      "integrity": "sha512-YfoaTNqBwbIqpiJ5NNfxfgg5kyFP1Hqf/jqBtSWNv0E+EkkxmN+3VD6U2fu86tlQvdAc1o0SdWhnWFwcRMTn9A==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.2.tgz",
+      "integrity": "sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==",
       "requires": {
         "@types/react": "*"
       }
@@ -4671,8 +4636,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -4693,14 +4657,12 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -4715,20 +4677,17 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -4845,8 +4804,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -4858,7 +4816,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -4873,7 +4830,6 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -4881,14 +4837,12 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -4907,7 +4861,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -4988,8 +4941,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -5001,7 +4953,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -5087,8 +5038,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -5124,7 +5074,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -5144,7 +5093,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -5188,14 +5136,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
@@ -10273,8 +10219,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -10295,14 +10240,12 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -10317,20 +10260,17 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -10447,8 +10387,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "ini": {
               "version": "1.3.5",
@@ -10460,7 +10399,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -10475,7 +10413,6 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -10483,14 +10420,12 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -10509,7 +10444,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -10590,8 +10524,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -10603,7 +10536,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -10689,8 +10621,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -10726,7 +10657,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -10746,7 +10676,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -10790,14 +10719,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             }
           }
         },
@@ -17903,7 +17830,7 @@
         "string-to-stream": "^1.1.0",
         "typescript": "~2.8.3",
         "typescript-json-schema": "github:quicktype/typescript-json-schema#d16083d29c8b6702c666a981fa6b21113300c059",
-        "unicode-properties": "github:quicktype/unicode-properties#dist",
+        "unicode-properties": "github:quicktype/unicode-properties#d5fddfea1ef9d05c6479a979e225476063e13f52",
         "universal-analytics": "^0.4.16",
         "urijs": "^1.19.1",
         "uuid": "^3.2.1"
diff --git a/package.json b/package.json
index dfc4138c..87489d23 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@etclabscore/ethereum-json-rpc": "^1.1.1",
     "@etclabscore/ethereum-json-rpc-specification": "https://github.com/etclabscore/ethereum-json-rpc-specification.git",
     "@etclabscore/jade-service-runner-client": "^1.2.3",
-    "@material-ui/core": "^4.1.3",
+    "@material-ui/core": "^4.2.1",
     "@material-ui/icons": "^4.2.1",
     "@material-ui/styles": "^4.1.2",
     "@qiwi/semantic-release-gh-pages-plugin": "^1.10.6",
diff --git a/public/index.html b/public/index.html
index 5cc980ef..3a7b70d8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
   <title>Jade Explorer</title>
 </head>
 
diff --git a/src/App.tsx b/src/App.tsx
index bfafbd37..c1695566 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { AppBar, CssBaseline, Theme, Toolbar, Typography, IconButton, Grid, InputBase, Tooltip } from "@material-ui/core"; //tslint:disable-line
+import { AppBar, CssBaseline, Theme, Toolbar, Typography, IconButton, Grid, InputBase, Tooltip, Hidden } from "@material-ui/core"; //tslint:disable-line
 import { makeStyles, ThemeProvider } from "@material-ui/styles";
 import Link from "@material-ui/core/Link";
 import { Link as RouterLink } from "react-router-dom";
@@ -24,18 +24,16 @@ import useMultiGethStore from "./stores/useMultiGethStore";
 import EthereumJSONRPC from "@etclabscore/ethereum-json-rpc";
 import ETHJSONSpec from "@etclabscore/ethereum-json-rpc-specification/openrpc.json";
 
-import createHistory from "history/createBrowserHistory";
-const history = createHistory();
+import { createBrowserHistory } from "history";
+const history = createBrowserHistory();
 
-const useStyles = makeStyles((theme: Theme) => ({
-  title: {
-  },
-}));
+const useStyles = makeStyles((theme: Theme) => ({}));
 
 function App(props: any) {
   const darkMode = useDarkMode();
   const [search, setSearch] = useState();
   const theme = darkMode.value ? darkTheme : lightTheme;
+  console.log("dark mode", theme, darkMode.value); //tslint:disable-line
 
   const [, , setServiceRunnerUrl] = useServiceRunnerStore();
   const [erpc, setMultiGethUrlOverride]: [EthereumJSONRPC, Dispatch<string>] = useMultiGethStore();
@@ -114,11 +112,10 @@ function App(props: any) {
   return (
     <Router history={history}>
       <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <AppBar position="static" color="default" elevation={0}>
+        <AppBar position="sticky" color="default" elevation={0}>
           <Toolbar>
             <Grid justify="space-between" alignItems="center" alignContent="center" container>
-              <Grid item style={{ marginTop: "8px" }} direction="row">
+              <Grid item style={{ marginTop: "8px" }}>
                 <Link
                   component={({ className, children }: { children: any, className: string }) => (
                     <RouterLink className={className} to={"/"}>
@@ -144,35 +141,44 @@ function App(props: any) {
                       }
                     </Grid>
                     <Grid>
-                      <Typography className={classes.title} color="textSecondary" variant="h6">Jade Explorer</Typography>
+                      <Typography color="textSecondary" variant="h6">
+                        Explorer
+                      </Typography>
                     </Grid>
                   </Grid>
                 </Link>
               </Grid>
-              <Grid item xs={7}>
-                <InputBase
-                  placeholder="Enter an Address, Transaction Hash or Block Number"
-                  onKeyDown={
-                    (event: KeyboardEvent<HTMLInputElement>) => {
-                      if (event.keyCode === 13) {
-                        handleSearch(search.trim());
+              <Hidden only="xs">
+                <Grid item md={7} lg={8}>
+                  <InputBase
+                    placeholder="Enter an Address, Transaction Hash or Block Number"
+                    onKeyDown={
+                      (event: KeyboardEvent<HTMLInputElement>) => {
+                        if (event.keyCode === 13) {
+                          handleSearch(search.trim());
+                        }
                       }
                     }
-                  }
-                  onChange={
-                    (event: ChangeEvent<HTMLInputElement>) => {
-                      setSearch(event.target.value);
+                    onChange={
+                      (event: ChangeEvent<HTMLInputElement>) => {
+                        setSearch(event.target.value);
+                      }
                     }
-                  }
-                  fullWidth
-                  style={{ background: "rgba(0,0,0,0.1)", borderRadius: "4px", padding: "0px 10px", marginRight: "5px" }}
-                />
-              </Grid>
+                    fullWidth
+                    style={{
+                      background: "rgba(0,0,0,0.1)",
+                      borderRadius: "4px",
+                      padding: "0px 10px",
+                      marginRight: "5px",
+                    }}
+                  />
+                </Grid>
+              </Hidden>
               <Grid item>
-                <Tooltip title="JSOSN-RPC API Documentation">
+                <Tooltip title="JSON-RPC API Documentation">
                   <IconButton
                     onClick={() =>
-                      window.open("https://playground.open-rpc.org/?schemaUrl=https://raw.githubusercontent.com/etclabscore/ethereum-json-rpc-specification/master/openrpc.json")
+                      window.open("https://playground.open-rpc.org/?schemaUrl=https://raw.githubusercontent.com/etclabscore/ethereum-json-rpc-specification/master/openrpc.json") //tslint:disable-line
                     }>
                     <NotesIcon />
                   </IconButton>
@@ -196,6 +202,7 @@ function App(props: any) {
           </Toolbar>
         </AppBar>
         <div style={{ margin: "0px 25px 0px 25px" }}>
+          <CssBaseline />
           <Switch>
             <Route path={"/"} component={Dashboard} exact={true} />
             <Route path={"/block/:hash"} component={Block} />
diff --git a/src/components/BlockList/BlockList.tsx b/src/components/BlockList/BlockList.tsx
index 65188784..a1de3cda 100644
--- a/src/components/BlockList/BlockList.tsx
+++ b/src/components/BlockList/BlockList.tsx
@@ -16,41 +16,44 @@ function BlockList({ blocks }: any) {
     return b.number - a.number;
   });
   return (
-    <Table>
-      <TableHead>
-        <TableRow>
-          <TableCell><Typography>Block Number</Typography></TableCell>
-          <TableCell><Typography>Hash</Typography></TableCell>
-          <TableCell><Typography>Timestamp</Typography></TableCell>
-          <TableCell><Typography>Transactions</Typography></TableCell>
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {sortedBlocks.map((b: any) => {
-          return (
-            <TableRow key={b.number}>
-              <TableCell component="th" scope="row"><Typography>{parseInt(b.number, 16)}</Typography></TableCell>
-              <TableCell style={rightPaddingFix}>
-                <Link
-                  component={({ className, children }: { children: any, className: string }) => (
-                    <RouterLink className={className} to={`/block/${b.hash}`} >
-                      {children}
-                    </RouterLink>
-                  )}>
-                  {b.hash}
-                </Link>
-              </TableCell>
-              <TableCell style={rightPaddingFix}>
-                <Typography>{hexToDate(b.timestamp)}</Typography>
-              </TableCell>
-              <TableCell style={rightPaddingFix}>
-                <Typography>{b.transactions.length}</Typography>
-              </TableCell>
-            </TableRow>
-          );
-        })}
-      </TableBody>
-    </Table>
+    <div style={{ width: "100%", overflowX: "auto" }}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell><Typography>Block Number</Typography></TableCell>
+            <TableCell><Typography>Hash</Typography></TableCell>
+            <TableCell><Typography>Timestamp</Typography></TableCell>
+            <TableCell><Typography>Transactions</Typography></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {sortedBlocks.map((b: any) => {
+            return (
+              <TableRow key={b.number}>
+                <TableCell component="th" scope="row"><Typography>{parseInt(b.number, 16)}</Typography></TableCell>
+                <TableCell style={rightPaddingFix}>
+                  <Link
+                    component={({ className, children }: { children: any, className: string }) => (
+                      <RouterLink className={className} to={`/block/${b.hash}`} >
+                        {children}
+                      </RouterLink>
+                    )}>
+                    {b.hash}
+                  </Link>
+                </TableCell>
+                <TableCell style={rightPaddingFix}>
+                  <Typography>{hexToDate(b.timestamp)}</Typography>
+                </TableCell>
+                <TableCell style={rightPaddingFix}>
+                  <Typography>{b.transactions.length}</Typography>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+
   );
 }
 
diff --git a/src/components/ChartCard.tsx b/src/components/ChartCard.tsx
index 8e80c5d2..bc6c6a51 100644
--- a/src/components/ChartCard.tsx
+++ b/src/components/ChartCard.tsx
@@ -8,7 +8,7 @@ interface IProps {
 
 const ChartCard: React.FC<IProps> = (props) => {
   return (
-    <Card style={{background: "transparent"}}>
+    <Card style={{background: "transparent"}} elevation={0}>
       <CardContent>
         <Typography variant="h6">{props.title}</Typography>
         {props.children}
diff --git a/src/containers/BlockCardList.tsx b/src/containers/BlockCardList.tsx
index 30ec700f..d6bbf5ab 100644
--- a/src/containers/BlockCardList.tsx
+++ b/src/containers/BlockCardList.tsx
@@ -31,7 +31,7 @@ export default function BlockCardListContainer(props: IProps) {
           return hexToNumber(b.number) - hexToNumber(a.number);
         }).map((block: any) => {
           return (
-            <Grid item xs={12} sm={4}>
+            <Grid item xs={12} sm={4} key={block.hash}>
               <BlockCard block={block} />
             </Grid>
           );
diff --git a/src/containers/Dashboard.tsx b/src/containers/Dashboard.tsx
index a5e6f1e6..0612a8a6 100644
--- a/src/containers/Dashboard.tsx
+++ b/src/containers/Dashboard.tsx
@@ -124,88 +124,92 @@ export default (props: any) => {
 
   return (
     <div>
-      <Grid container={true} spacing={3}>
-        <Grid style={styles.topItems} item={true} xs={12}>
-          <div key="blockHeight">
+      <Grid container spacing={3} direction="column">
+        <Grid item container justify="space-between">
+          <Grid item key="blockHeight">
             <ChartCard title="Block Height">
-              <Typography variant="h3">{blockNumber}</Typography>
+              <Typography variant="h4">{blockNumber}</Typography>
             </ChartCard>
-          </div>
-          <div key="chainId">
+          </Grid>
+          <Grid key="chainId" item>
             <ChartCard title="Chain ID">
-              <Typography variant="h3">{hexToNumber(chainId)}</Typography>
+              <Typography variant="h4">{hexToNumber(chainId)}</Typography>
             </ChartCard>
-          </div>
+          </Grid>
           {syncing &&
             <div key="syncing">
               <ChartCard title="Syncing">
                 {typeof syncing === "object" && syncing.currentBlock &&
-                  <Typography variant="h3">
+                  <Typography variant="h4">
                     {hexToNumber(syncing.currentBlock)} / {hexToNumber(syncing.highestBlock || "0x0")}
                   </Typography>
                 }
               </ChartCard>
             </div>
           }
-          <div key="gasPrice">
+          <Grid key="gasPrice" item>
             <ChartCard title="Gas Price">
-              <Typography variant="h3">{weiToGwei(hexToNumber(gasPrice))} Gwei</Typography>
+              <Typography variant="h4">{weiToGwei(hexToNumber(gasPrice))} Gwei</Typography>
             </ChartCard>
-          </div>
-          <div key="hRate">
+          </Grid>
+          <Grid key="hRate" item>
             <ChartCard title="Network Hash Rate">
               {block &&
                 <HashRate block={block} blockTime={config.blockTime}>
-                  {(hashRate: any) => <Typography variant="h3">{hashRate} GH/s</Typography>}
+                  {(hashRate: any) => <Typography variant="h4">{hashRate} GH/s</Typography>}
                 </HashRate>
               }
             </ChartCard>
-          </div>
-          <div key="pending-tx">
+          </Grid>
+          <Grid key="pending-tx" item>
             <ChartCard title="Pending Transactions">
-              {<Typography variant="h3">{pendingTransctionsLength}</Typography>}
+              {<Typography variant="h4">{pendingTransctionsLength}</Typography>}
             </ChartCard>
-          </div>
-          <div>
+          </Grid>
+          <Grid key="peers" item>
             <ChartCard title="Peers">
-              <Typography variant="h3">{hexToNumber(peerCount)}</Typography>
+              <Typography variant="h4">{hexToNumber(peerCount)}</Typography>
             </ChartCard>
-          </div>
+          </Grid>
         </Grid>
-        <Grid key="hashChart" item={true} xs={12} sm={6} lg={3}>
-          <ChartCard title={`Hash Rate last ${blocks.length} blocks`}>
-            <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-              <VictoryLine data={blocks.map(blockMapHashRate)} />
-            </VictoryChart>
-          </ChartCard>
-        </Grid>
-        <Grid key="txChart" item={true} xs={12} sm={6} lg={3}>
-          <ChartCard title={`Transaction count last ${blocks.length} blocks`}>
-            <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-              <VictoryBar data={blocks.map(blockMapTransactionCount)} />
-            </VictoryChart>
-          </ChartCard>
-        </Grid>
-        <Grid key="gasUsed" item={true} xs={12} sm={6} lg={3}>
-          <ChartCard title={`Gas Used Last ${blocks.length} blocks`}>
-            <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-              <VictoryBar data={blocks.map(blockMapGasUsed)} />
-            </VictoryChart>
-          </ChartCard>
-        </Grid>
-        <Grid key="uncles" item={true} xs={12} sm={6} lg={3}>
-          <ChartCard title={`Uncles Last ${blocks.length} blocks`}>
-            <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
-              <VictoryBar data={blocks.map(blockMapUncles)} />
-            </VictoryChart>
-          </ChartCard>
+        <Grid item container>
+          <Grid key="hashChart" item xs={12} md={6} lg={3}>
+            <ChartCard title={`Hash Rate last ${blocks.length} blocks`}>
+              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+                <VictoryLine data={blocks.map(blockMapHashRate)} />
+              </VictoryChart>
+            </ChartCard>
+          </Grid>
+          <Grid key="txChart" item xs={12} md={6} lg={3}>
+            <ChartCard title={`Transaction count last ${blocks.length} blocks`}>
+              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+                <VictoryBar data={blocks.map(blockMapTransactionCount)} />
+              </VictoryChart>
+            </ChartCard>
+          </Grid>
+          <Grid key="gasUsed" item xs={12} md={6} lg={3}>
+            <ChartCard title={`Gas Used Last ${blocks.length} blocks`}>
+              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+                <VictoryBar data={blocks.map(blockMapGasUsed)} />
+              </VictoryChart>
+            </ChartCard>
+          </Grid>
+          <Grid key="uncles" item xs={12} md={6} lg={3}>
+            <ChartCard title={`Uncles Last ${blocks.length} blocks`}>
+              <VictoryChart height={config.chartHeight} width={config.chartWidth} theme={victoryTheme as any}>
+                <VictoryBar data={blocks.map(blockMapUncles)} />
+              </VictoryChart>
+            </ChartCard>
+          </Grid>
         </Grid>
 
       </Grid>
 
       <BlockCardListContainer from={Math.max(blockNumber - 3, 0)} to={blockNumber} />
-      <BlockListContainer from={Math.max((blockNumber - 3) - 11, 0)} to={blockNumber - 3} style={{ marginTop: "30px" }} />
-
+      <BlockListContainer
+        from={Math.max((blockNumber - 3) - 11, 0)}
+        to={blockNumber - 3}
+        style={{ marginTop: "30px" }} />
     </div>
   );
 };
diff --git a/src/themes/jadeTheme.ts b/src/themes/jadeTheme.ts
index bd0e1455..15d85ea7 100644
--- a/src/themes/jadeTheme.ts
+++ b/src/themes/jadeTheme.ts
@@ -1,7 +1,7 @@
-import { createMuiTheme } from "@material-ui/core/styles";
+import { createMuiTheme, responsiveFontSizes } from "@material-ui/core/styles";
 import grey from "@material-ui/core/colors/grey";
 
-export const lightTheme = createMuiTheme({
+export const lightTheme = responsiveFontSizes(createMuiTheme({
   props: {
     MuiAppBar: {
       position: "sticky",
@@ -22,9 +22,9 @@ export const lightTheme = createMuiTheme({
       default: "#fff",
     },
   },
-});
+}));
 
-export const darkTheme = createMuiTheme({
+export const darkTheme = responsiveFontSizes(createMuiTheme({
   props: {
     MuiAppBar: {
       position: "sticky",
@@ -52,7 +52,7 @@ export const darkTheme = createMuiTheme({
       },
     },
   },
-});
+}));
 
 export default {
   darkTheme,