Revamped chart boxes

Client/src/Pages/PageSpeed/Details/index.css

@@ -9,26 +9,10 @@
 .page-speed-details h4 > span {
   font-size: var(--env-var-font-size-small-plus);
 }
-.page-speed-details h6 {
-  line-height: 22px;
-}
-.page-speed-details h6 {
-  font-weight: 600;
-}
 .page-speed-details button.MuiButtonBase-root {
   height: 34px;
 }
 
-.page-speed-details .stat-box {
-  flex: 1;
-}
-.page-speed-details .stat-box:last-of-type {
-  flex-shrink: 1;
-}
-.page-speed-details .stat-box svg {
-  width: 22px;
-  height: 22px;
-}
 .page-speed-details .MuiPieArcLabel-root {
   font-size: var(--env-var-font-size-small-plus);
   transition: fill 300ms ease;

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -4,7 +4,6 @@ import {
   Button,
   Skeleton,
   Stack,
-  Toolbar,
   Tooltip,
   Typography,
 } from "@mui/material";
@@ -19,13 +18,12 @@ import {
   formatDurationRounded,
   formatDurationSplit,
 } from "../../../Utils/timeUtils";
-import { StatBox } from "./styled";
+import { ChartBox, IconBox, StatBox } from "./styled";
 import { logger } from "../../../Utils/Logger";
 import { networkService } from "../../../main";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
-import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react";
-import ClockIcon from "../../../assets/icons/maintenance.svg?react";
-import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react";
+import ScoreIcon from "../../../assets/icons/monitor-graph-line.svg?react";
+import PerformanceIcon from "../../../assets/icons/performance-report.svg?react";
 import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import PulseDot from "../../../Components/Animated/PulseDot";
@@ -302,7 +300,7 @@ const PageSpeedDetails = () => {
           cx: pieSize.width / 2,
         });
 
-        performance += Math.round(value);
+        performance += Math.floor(value);
         startAngle = endAngle + padding;
       }
     });
@@ -320,13 +318,6 @@ const PageSpeedDetails = () => {
   let loading = Object.keys(monitor).length === 0;
   const data = monitor?.checks ? [...monitor.checks].reverse() : [];
 
-  let sharedStyles = {
-    border: 1,
-    borderColor: theme.palette.border.light,
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.background.main,
-  };
-
   console.log(monitor);
 
   const splitDuration = (duration) => {
@@ -465,32 +456,27 @@ const PageSpeedDetails = () => {
               </Typography>
             </StatBox>
           </Stack>
-          <Typography component="h2" color={theme.palette.text.secondary}>
-            Score history
-          </Typography>
-          <Box
-            height="300px"
-            sx={{
-              ...sharedStyles,
-            }}
-          >
-            <PageSpeedLineChart pageSpeedChecks={data} />
+          <Box>
+            <Typography fontSize={12} color={theme.palette.text.tertiary}>
+              Showing statistics for past 24 hours.
+            </Typography>
           </Box>
-          <Typography component="h2" color={theme.palette.text.secondary}>
-            Performance report
-          </Typography>
-          <Stack
-            direction="row"
-            alignItems="center"
-            overflow="hidden"
-            flex={1}
-            sx={{
-              "& p": {
-                color: theme.palette.text.secondary,
-              },
-              ...sharedStyles,
-            }}
-          >
+          <ChartBox display="block">
+            <Stack direction="row" alignItems="center" gap={theme.spacing(6)}>
+              <IconBox>
+                <ScoreIcon />
+              </IconBox>
+              <Typography component="h2">Score history</Typography>
+            </Stack>
+            <PageSpeedLineChart pageSpeedChecks={data} />
+          </ChartBox>
+          <ChartBox>
+            <Stack direction="row" alignItems="center" gap={theme.spacing(6)}>
+              <IconBox>
+                <PerformanceIcon />
+              </IconBox>
+              <Typography component="h2">Performance report</Typography>
+            </Stack>
             <Stack
               alignItems="center"
               textAlign="center"
@@ -742,7 +728,7 @@ const PageSpeedDetails = () => {
                 })}
               </Stack>
             </Box>
-          </Stack>
+          </ChartBox>
         </>
       )}
     </Stack>

Client/src/Pages/PageSpeed/Details/styled.jsx

@@ -1,4 +1,48 @@
-import { Box, styled } from "@mui/material";
+import { Box, Stack, styled } from "@mui/material";
+
+export const ChartBox = styled(Stack)(({ theme }) => ({
+  flex: "1 30%",
+  gap: theme.spacing(8),
+  height: 300,
+  minWidth: 250,
+  padding: theme.spacing(8),
+  border: 1,
+  borderStyle: "solid",
+  borderColor: theme.palette.border.light,
+  borderRadius: 4,
+  backgroundColor: theme.palette.background.main,
+  "& h2": {
+    color: theme.palette.text.secondary,
+    fontSize: 15,
+    fontWeight: 500,
+  },
+  "& p": {
+    color: theme.palette.text.secondary,
+  },
+}));
+
+export const IconBox = styled(Box)(({ theme }) => ({
+  height: 34,
+  minWidth: 34,
+  width: 34,
+  position: "relative",
+  border: 1,
+  borderStyle: "solid",
+  borderColor: theme.palette.border.dark,
+  borderRadius: 4,
+  backgroundColor: theme.palette.background.accent,
+  "& svg": {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 20,
+    height: 20,
+    "& path": {
+      stroke: theme.palette.text.tertiary,
+    },
+  },
+}));
 
 export const StatBox = styled(Box)(({ theme }) => ({
   padding: `${theme.spacing(4)} ${theme.spacing(8)}`,

Client/src/assets/icons/monitor-graph-line.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 12H18L15 21L9 3L6 12H2" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

Client/src/assets/icons/performance-report.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18L2 22V6L9 2M9 18L16 22M9 18V2M16 22L22 18V2L16 6M16 22V6M16 6L9 2" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>