Refactor main screen metrics, fix iPad charts overlay (#177)

* Refactor main screen metrics, fix iPad charts overlay

* Improve metrics styles for tablets

package.json

@@ -74,6 +74,7 @@
     "web-vitals": "^1.0.1"
   },
   "resolutions": {
-     "@types/react": "17.0.30"
+    "@types/react": "17.0.30",
+    "react-error-overlay": "6.0.9"
   }
 }

src/components/metrics/index.tsx

@@ -70,9 +70,9 @@ export const Metrics = (params: {
   latency: number;
   latencyPerBlock: number[];
 }) => {
-  const isLessLaptop = useMediaQuery({ maxDeviceWidth: "852px" });
+  const isLessLaptop = useMediaQuery({ query: '(max-width: 852px)' });
-  const isLessTablet = useMediaQuery({ maxDeviceWidth: breakpoints.tablet });
+  const isLessTablet = useMediaQuery({ query: `(max-width: ${breakpoints.tablet})` });
-  const isLessMobileM = useMediaQuery({ maxDeviceWidth: "468px" });
+  const isLessMobileM = useMediaQuery({ query: '(max-width: 468px)' });
 
   return (
     <BasePage
@@ -80,6 +80,11 @@ export const Metrics = (params: {
       justify="between"
       wrap={isLessLaptop}
       margin={{ bottom: "medium" }}
+      style={{ width: '100%' }}
+    >
+      <Box
+        direction={'row'}
+        style={{ flexWrap: 'wrap', flexBasis: isLessLaptop ? '100%' : '50%'}}
       >
         <Box
           justify="between"
@@ -91,7 +96,7 @@ export const Metrics = (params: {
           }}
           style={{
             height: isLessMobileM ? "auto" : "140px",
-          flex: isLessLaptop ? "1 1 40%" : "1 1 100%",
+            flex: 1
           }}
           gap={isLessMobileM ? "small" : "0"}
         >
@@ -109,7 +114,7 @@ export const Metrics = (params: {
           }}
           style={{
             height: isLessMobileM ? "auto" : "140px",
-          flex: isLessLaptop ? "1 1 50%" : "1 1 100%",
+            flex: 1
           }}
         >
           <ShardCount />
@@ -125,34 +130,22 @@ export const Metrics = (params: {
             style={{ marginTop: isLessTablet ? "16px" : "24px" }}
           />
         )}
+      </Box>
       <Box
-        justify="between"
+        direction={'row'}
-        pad={{
+        justify={'between'}
-          left: isLessLaptop ? "0" : "medium",
+        wrap={isLessLaptop}
-        }}
+        pad={{ left: 'medium', top: isLessLaptop ? 'medium' : 'none' }}
-        margin={{ top: isLessLaptop ? "medium" : "0" }}
+        gap={'large'}
-        style={{ height: "140px", flex: "1 1 100%" }}
+        style={{ flexWrap: 'wrap', flexBasis: isLessLaptop ? '100%' : '50%' }}
       >
+        <Box style={{flex: isLessMobileM ? 'unset' : 1}}>
           <BlockTransactionsHistory />
         </Box>
-
+        <Box style={{flex: isLessMobileM ? 'unset' : 1}}>
-      {isLessLaptop && (
-        <Line
-          horizontal
-          style={{ marginTop: isLessTablet ? "16px" : "24px" }}
-        />
-      )}
-
-      <Box
-        justify="between"
-        pad={{
-          left: isLessLaptop ? "0" : "medium",
-        }}
-        margin={{ top: isLessLaptop ? "medium" : "0" }}
-        style={{ height: "140px", flex: "1 1 100%" }}
-      >
           <WalletsHistory />
         </Box>
+      </Box>
     </BasePage>
   );
 };