diff --git a/Client/src/App.jsx b/Client/src/App.jsx index a5b649e8b..971301577 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -24,6 +24,7 @@ import withAdminCheck from "./HOC/withAdminCheck"; import Configure from "./Pages/Monitors/Configure"; import PageSpeed from "./Pages/PageSpeed"; import CreatePageSpeed from "./Pages/PageSpeed/CreatePageSpeed"; +import PageSpeedDetails from "./Pages/PageSpeed/Details"; function App() { const AdminCheckedRegister = withAdminCheck(Register); @@ -93,6 +94,10 @@ function App() { path="page-speed/create" element={} /> + } + /> } /> diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 020831313..1df2cf87e 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -50,7 +50,15 @@ function Sidebar() { alignItems="center" gap={theme.gap.small} borderRadius={`${theme.shape.borderRadius}px`} - onClick={() => navigate(`/${item.path}`)} + onClick={() => + item.path === "support" + ? window.open( + "https://github.com/bluewave-labs/bluewave-uptime", + "_blank", + "noreferrer" + ) + : navigate(`/${item.path}`) + } sx={{ p: `${theme.gap.small} ${theme.gap.medium}` }} > {item.icon} diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index 42ebb7cf4..e4e3f4d1c 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -150,7 +150,7 @@ const CreateMonitor = () => { img={} onClick={() => navigate("/monitors")} sx={{ - backgroundColor: "#f4f4f4", + backgroundColor: theme.palette.otherColors.fillGray, mb: theme.gap.medium, px: theme.gap.ml, "& svg.MuiSvgIcon-root": { diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 9eb1c0ced..654fd91dc 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -35,7 +35,7 @@ import { * @param {string} params.url - The URL of the host. * @param {string} params.title - The name of the host. * @param {string} params.percentageColor - The color of the percentage text. - * @param {number} params.precentage - The percentage to display. + * @param {number} params.percentage - The percentage to display. * @returns {React.ElementType} Returns a div element with the host details. */ const Host = ({ params }) => { @@ -47,7 +47,7 @@ const Host = ({ params }) => { {params.title} - {params.precentage}% + {params.percentage}% @@ -127,7 +127,7 @@ const Monitors = () => { const params = { url: monitor.url, title: monitor.name, - precentage: 100, + percentage: 100, percentageColor: monitor.status === true ? "var(--env-var-color-17)" diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index 03d9a5414..aae6e48df 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx @@ -104,7 +104,7 @@ const CreatePageSpeed = () => { img={} onClick={() => navigate("/page-speed")} sx={{ - backgroundColor: "#f4f4f4", + backgroundColor: theme.palette.otherColors.fillGray, mb: theme.gap.large, px: theme.gap.ml, "& svg.MuiSvgIcon-root": { diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css new file mode 100644 index 000000000..7f322d505 --- /dev/null +++ b/Client/src/Pages/PageSpeed/Details/index.css @@ -0,0 +1,41 @@ +.page-speed-details h1 { + font-size: var(--env-var-font-size-large-plus); +} +.page-speed-details h2, +.page-speed-details h6 { + font-size: var(--env-var-font-size-large); +} +.page-speed-details h4, +.page-speed-details p { + font-size: var(--env-var-font-size-medium); +} +.page-speed-details svg + .MuiBox-root > p { + font-size: var(--env-var-font-size-small-plus); +} +.page-speed-details h2, +.page-speed-details h4 { + color: var(--env-var-color-5); +} +.page-speed-details h6 { + color: var(--env-var-color-3); + line-height: 22px; +} +.page-speed-details h1, +.page-speed-details h2, +.page-speed-details h6 { + font-weight: 600; +} +.page-speed-details button.MuiButtonBase-root { + height: 34px; +} + +.page-speed-details .stat-box { + border: solid 1px var(--env-var-color-6); + border-radius: var(--env-var-radius-2); + flex: 1; + background-color: var(--env-var-color-8); +} +.page-speed-details .stat-box svg { + width: 22px; + height: 22px; +} diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx new file mode 100644 index 000000000..d59a82bfe --- /dev/null +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -0,0 +1,193 @@ +import { Box, Stack, Typography } from "@mui/material"; +import { useTheme } from "@emotion/react"; +import { useNavigate } from "react-router-dom"; +import Button from "../../../Components/Button"; +import WestRoundedIcon from "@mui/icons-material/WestRounded"; +import SettingsIcon from "../../../assets/icons/settings.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 PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline"; +import GreenCheck from "../../../assets/icons/checkbox-green.svg?react"; +import RedCheck from "../../../assets/icons/checkbox-red.svg?react"; + +import "./index.css"; + +const StatBox = ({ icon, title, value }) => { + const theme = useTheme(); + + return ( + + {icon} + + + {title} + + {value} + + + ); +}; + +const PageSpeedDetails = () => { + const theme = useTheme(); + const navigate = useNavigate(); + + const data = { + _id: "66ad34001d483d284550e8cb", + monitorId: "66ad2f5b4dfcd19cdbfc7205", + status: true, + accessibility: 100, + bestPractices: 79, + seo: 100, + performance: 100, + audits: { + cls: { + id: "cumulative-layout-shift", + title: "Cumulative Layout Shift", + description: + "Cumulative Layout Shift measures the movement of visible elements within the viewport.", + score: 1, + scoreDisplayMode: "numeric", + displayValue: "0", + numericValue: 0, + numericUnit: "unitless", + _id: "66ad34001d483d284550e8cd", + }, + si: { + id: "speed-index", + title: "Speed Index", + description: + "Speed Index shows how quickly the contents of a page are visibly populated.", + score: 1, + scoreDisplayMode: "numeric", + displayValue: "0.6s", + numericValue: 567.8934352052013, + numericUnit: "millisecond", + _id: "66ad34001d483d284550e8ce", + }, + fcp: { + id: "first-contentful-paint", + title: "First Contentful Paint", + description: + "First Contentful Paint marks the time at which the first text or image is painted.", + score: 1, + scoreDisplayMode: "numeric", + displayValue: "0.4s", + numericValue: 419, + numericUnit: "millisecond", + _id: "66ad34001d483d284550e8cf", + }, + lcp: { + id: "largest-contentful-paint", + title: "Largest Contentful Paint", + description: + "Largest Contentful Paint marks the time at which the largest text or image is painted.", + score: 1, + scoreDisplayMode: "numeric", + displayValue: "0.4s", + numericValue: 422.5, + numericUnit: "millisecond", + _id: "66ad34001d483d284550e8d0", + }, + tbt: { + id: "total-blocking-time", + title: "Total Blocking Time", + description: + "Sum of all time periods between FCP and Time to Interactive", + score: 1, + scoreDisplayMode: "numeric", + displayValue: "20ms", + numericValue: 16, + numericUnit: "millisecond", + _id: "66ad34001d483d284550e8d1", + }, + _id: "66ad34001d483d284550e8cc", + }, + createdAt: "2024-08-02T19:31:12.732Z", + updatedAt: "2024-08-02T19:31:12.732Z", + __v: 0, + }; + + return ( + +