mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-15 14:19:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

Initial design

Browse Source
This commit is contained in:
Daniel Cojocea
2024-08-02 17:47:22 -04:00
parent 565c54e34c
commit a13963bb9a
9 changed files with 259 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Client/src/App.jsx
View File

@@ -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={<ProtectedRoute Component={CreatePageSpeed} />}
/>
<Route
path="page-speed/:monitorId"
element={<ProtectedRoute Component={PageSpeedDetails} />}
/>
</Route>
<Route exact path="/login" element={<Login />} />

10
Client/src/Components/Sidebar/index.jsx
View File

@@ -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}

2
Client/src/Pages/Monitors/CreateMonitor/index.jsx
View File

@@ -150,7 +150,7 @@ const CreateMonitor = () => {
img={<WestRoundedIcon />}
onClick={() => navigate("/monitors")}
sx={{
backgroundColor: "#f4f4f4",
backgroundColor: theme.palette.otherColors.fillGray,
mb: theme.gap.medium,
px: theme.gap.ml,
"& svg.MuiSvgIcon-root": {

6
Client/src/Pages/Monitors/index.jsx
View File

@@ -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 }) => {
<Box>
{params.title}
<Typography component="span" sx={{ color: params.percentageColor }}>
{params.precentage}%
{params.percentage}%
</Typography>
</Box>
</Stack>
@@ -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)"

2
Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
View File

@@ -104,7 +104,7 @@ const CreatePageSpeed = () => {
img={<WestRoundedIcon />}
onClick={() => navigate("/page-speed")}
sx={{
backgroundColor: "#f4f4f4",
backgroundColor: theme.palette.otherColors.fillGray,
mb: theme.gap.large,
px: theme.gap.ml,
"& svg.MuiSvgIcon-root": {

41
Client/src/Pages/PageSpeed/Details/index.css Normal file
View File

@@ -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;
}

193
Client/src/Pages/PageSpeed/Details/index.jsx Normal file
View File

@@ -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 (
<Stack
className="stat-box"
direction="row"
gap={theme.gap.small}
p={theme.gap.ml}
pb={theme.gap.large}
>
{icon}
<Box>
<Typography variant="h6" mb={theme.gap.medium}>
{title}
</Typography>
<Typography variant="h4">{value}</Typography>
</Box>
</Stack>
);
};
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 (
<Stack className="page-speed-details" gap={theme.gap.large}>
<Button
level="tertiary"
label="Back"
animate="slideLeft"
img={<WestRoundedIcon />}
onClick={() => navigate("/page-speed")}
sx={{
width: "fit-content",
backgroundColor: theme.palette.otherColors.fillGray,
px: theme.gap.ml,
"& svg.MuiSvgIcon-root": {
mr: theme.gap.small,
fill: theme.palette.otherColors.slateGray,
},
}}
/>
<Stack
direction="row"
gap={theme.gap.small}
justifyContent="space-between"
>
<GreenCheck />
<Box>
<Typography component="h1" sx={{ lineHeight: 1 }}>
google.com
</Typography>
<Typography
mt={theme.gap.small}
sx={{ color: "var(--env-var-color-17)" }}
>
Your pagespeed monitor is live.
</Typography>
</Box>
<Button
level="tertiary"
label="Configure"
animate="rotate90"
img={<SettingsIcon />}
onClick={() => navigate(`/monitors/configure/${monitorId}`)}
sx={{
ml: "auto",
alignSelf: "flex-end",
backgroundColor: "#f4f4f4",
px: theme.gap.medium,
"& svg": {
mr: "6px",
},
}}
/>
</Stack>
<Stack direction="row" justifyContent="space-between" gap={theme.gap.xl}>
<StatBox
icon={<LastCheckedIcon />}
title="Last checked"
value="27 July, 7:24 AM (3 minutes ago)"
/>
<StatBox
icon={<ClockIcon />}
title="Checks since"
value="27 July, 7:24 AM (3 minutes ago)"
></StatBox>
<StatBox
icon={<IntervalCheckIcon />}
title="Checks every"
value="3 minutes"
></StatBox>
</Stack>
<Typography component="h2">Score history</Typography>
<Typography component="h2">Performance report</Typography>
</Stack>
);
};
export default PageSpeedDetails;

3
Client/src/assets/icons/calendar-check.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 10.5V7.8C19 6.11984 19 5.27976 18.673 4.63803C18.3854 4.07354 17.9265 3.6146 17.362 3.32698C16.7202 3 15.8802 3 14.2 3H5.8C4.11984 3 3.27976 3 2.63803 3.32698C2.07354 3.6146 1.6146 4.07354 1.32698 4.63803C1 5.27976 1 6.11984 1 7.8V16.2C1 17.8802 1 18.7202 1.32698 19.362C1.6146 19.9265 2.07354 20.3854 2.63803 20.673C3.27976 21 4.11984 21 5.8 21H10.5M19 9H1M14 1V5M6 1V5M16 20V14M13 17H19" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 591 B

3
Client/src/assets/icons/interval-check.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9118 14.2882C14.7835 13.0993 16 11.1735 16 9C16 5.38891 12.6421 2.46154 8.5 2.46154H8.05882M8.5 15.5385C4.35786 15.5385 1 12.6111 1 9C1 6.82651 2.21647 4.90072 4.08824 3.71185M7.61765 17L9.38235 15.4615L7.61765 13.9231M9.38235 4.07692L7.61765 2.53846L9.38235 1" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 463 B