mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-20 16:49:46 -06:00
Code Issues Packages Projects Releases Wiki Activity

Updated cards background, removed unused files

Browse Source
This commit is contained in:
Daniel Cojocea
2024-08-24 14:40:08 -04:00
parent 63ae25c16b
commit cfab18f0e8
7 changed files with 166 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
Client/src/Components/Charts/Servers/ServerStatus.jsx
View File

@@ -1,28 +0,0 @@
import React from "react";
import "./serverStatus.css";
import PropTypes from "prop-types";
/**
* @component
* @param {Object} props
* @param {string} props.title - The title text for the server status (required)
* @param {number} props.value - The value text to be displayed (required)
* @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required)
* @returns {JSX.Element} - Renders the server status component
*/
const ServerStatus = ({ title, value, state }) => {
return (
<div className="server-status-tile">
<div className="server-status-tile-title">{title}</div>
<div className={`server-status-tile-value ` + " " + state}>{value}</div>
</div>
);
};
ServerStatus.propTypes = {
title: PropTypes.string.isRequired,
value: PropTypes.number.isRequired,
state: PropTypes.string.isRequired,
};
export default ServerStatus;

46
Client/src/Components/Charts/Servers/serverStatus.css
View File

@@ -1,46 +0,0 @@
:root {
--spacing-general-0: 12px 18px;
--spacing-general-1: 20px;
--color-border-0: #eaecf0;
--border-radius-0: 4px;
--font-size-0: 1rem;
--font-size-2: 36px;
--color-up: #17b26a;
--color-down: #f04438;
--color-pause: #fdb022;
}
.server-status-tile {
min-width: 100px;
width: calc(100% - 310px);
padding: var(--spacing-general-0);
border: 1px solid var(--color-border-0);
border-radius: var(--border-radius-0);
background-color: var(--env-var-color-8);
}
.server-status-tile-title {
font-size: var(--font-size-0);
font-weight: 500;
margin-bottom: calc(var(--spacing-general-1) / 2);
color: var(--env-var-color-5);
opacity: 0.6;
}
.server-status-tile-value {
font-size: var(--font-size-2);
font-weight: bolder;
}
.up {
color: var(--color-up);
}
.down {
color: var(--color-down);
}
.pause {
color: var(--color-pause);
}

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

@@ -194,6 +194,7 @@ function Sidebar() {
sx={{
pt: theme.gap.small,
px: collapsed ? theme.gap.xs : theme.gap.small,
backgroundColor: "transparent"
}}
>
Menu
@@ -394,6 +395,7 @@ function Sidebar() {
sx={{
pt: theme.gap.small,
px: collapsed ? 0 : theme.gap.small,
backgroundColor: "transparent"
}}
>
Other

2
Client/src/Layouts/HomeLayout/index.css
View File

@@ -20,7 +20,7 @@
height: calc(100vh - var(--env-var-spacing-2) * 2);
max-width: var(--env-var-side-bar-width);
border: 1px solid var(--color-border-0);
border: 1px solid var(--env-var-color-6);
border-radius: var(--env-var-radius-1);
background-color: var(--env-var-color-8);

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

@@ -20,12 +20,13 @@ import {
} from "@mui/material";
import BasicTable from "../../Components/BasicTable";
import Button from "../../Components/Button";
import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
import Settings from "../../assets/icons/settings-bold.svg?react";
import PropTypes from "prop-types";
import BarChart from "../../Components/Charts/BarChart";
import Breadcrumbs from "../../Components/Breadcrumbs";
import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
import background from "../../assets/Images/background-grid.svg";
import Arrow from "../../assets/icons/top-right-arrow.svg?react";
import "./index.css";
const ActionsMenu = ({ monitor }) => {
@@ -259,6 +260,94 @@ Host.propTypes = {
}).isRequired,
};
const StatusBox = ({ title, value }) => {
const theme = useTheme();
let sharedStyles = { position: "absolute", right: 8, opacity: 0.5 };
let color;
let icon;
if (title === "up") {
color = theme.pie.green.stroke;
icon = (
<Box sx={{ ...sharedStyles, top: 8 }}>
<Arrow />
</Box>
);
} else if (title === "down") {
color = theme.pie.red.stroke;
icon = (
<Box sx={{ ...sharedStyles, transform: "rotate(180deg)", top: 5 }}>
<Arrow />
</Box>
);
} else if (title === "paused") {
color = theme.pie.yellow.stroke;
}
return (
<Box
position="relative"
flex={1}
border={1}
borderColor={theme.palette.otherColors.graishWhite}
borderRadius={`${theme.shape.borderRadius}px`}
backgroundColor={theme.palette.otherColors.white}
px={theme.gap.large}
py={theme.gap.ml}
overflow="hidden"
sx={{
"&:hover": {
backgroundColor: "#f9fafb",
},
// backgroundImage:
// "linear-gradient(to right bottom, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #fefefe, #fefefe, #fdfdfd, #fcfcfd, #fafbfc, #f9fafb)",
"&:after": {
position: "absolute",
content: `""`,
backgroundImage: `url(${background})`,
width: "400px",
height: "200px",
top: "-10%",
left: "5%",
zIndex: 10000,
},
}}
>
<Box
textTransform="uppercase"
fontSize={15}
letterSpacing={0.5}
color={theme.palette.otherColors.bluishGray}
mb={theme.gap.ml}
sx={{ opacity: 0.6 }}
>
{title}
</Box>
{icon}
<Stack
direction="row"
alignItems="flex-start"
fontSize={36}
fontWeight={600}
color={color}
gap="2px"
>
{value}
<Typography
component="span"
fontSize={20}
fontWeight={300}
color={theme.palette.otherColors.bluishGray}
sx={{ opacity: 0.3 }}
>
#
</Typography>
</Stack>
</Box>
);
};
/**
* Renders a skeleton layout.
*
@@ -476,9 +565,9 @@ const Monitors = () => {
direction="row"
justifyContent="space-between"
>
<ServerStatus title="Up" value={up} state="up" />
<ServerStatus title="Down" value={down} state="down" />
<ServerStatus title="Paused" value={0} state="pause" />
<StatusBox title="up" value={up} />
<StatusBox title="down" value={down} />
<StatusBox title="paused" value={0} />
</Stack>
<Box
flex={1}

67
Client/src/assets/Images/background-grid.svg Normal file
View File

@@ -0,0 +1,67 @@
<svg width="768" height="768" viewBox="0 0 768 768" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_14_2)">
<mask id="mask0_14_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
<path d="M768 0H0V768H768V0Z" fill="url(#paint0_radial_14_2)"/>
</mask>
<g mask="url(#mask0_14_2)">
<mask id="mask1_14_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
<path d="M768 0H0V768H768V0Z" fill="white"/>
</mask>
<g mask="url(#mask1_14_2)">
<mask id="mask2_14_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
<path d="M768 0H0V768H768V0Z" fill="white"/>
</mask>
<g mask="url(#mask2_14_2)">
<path d="M0.5 0V768" stroke="#b8b9bd"/>
<path d="M48.5 0V768" stroke="#b8b9bd"/>
<path d="M96.5 0V768" stroke="#b8b9bd"/>
<path d="M144.5 0V768" stroke="#b8b9bd"/>
<path d="M192.5 0V768" stroke="#b8b9bd"/>
<path d="M240.5 0V768" stroke="#b8b9bd"/>
<path d="M288.5 0V768" stroke="#b8b9bd"/>
<path d="M336.5 0V768" stroke="#b8b9bd"/>
<path d="M384.5 0V768" stroke="#b8b9bd"/>
<path d="M432.5 0V768" stroke="#b8b9bd"/>
<path d="M480.5 0V768" stroke="#b8b9bd"/>
<path d="M528.5 0V768" stroke="#b8b9bd"/>
<path d="M576.5 0V768" stroke="#b8b9bd"/>
<path d="M624.5 0V768" stroke="#b8b9bd"/>
<path d="M672.5 0V768" stroke="#b8b9bd"/>
<path d="M720.5 0V768" stroke="#b8b9bd"/>
</g>
<path d="M767.5 0.5H0.5V767.5H767.5V0.5Z" stroke="#b8b9bd"/>
<mask id="mask3_14_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
<path d="M768 0H0V768H768V0Z" fill="white"/>
</mask>
<g mask="url(#mask3_14_2)">
<path d="M0 47.5H768" stroke="#b8b9bd"/>
<path d="M0 95.5H768" stroke="#b8b9bd"/>
<path d="M0 143.5H768" stroke="#b8b9bd"/>
<path d="M0 191.5H768" stroke="#b8b9bd"/>
<path d="M0 239.5H768" stroke="#b8b9bd"/>
<path d="M0 287.5H768" stroke="#b8b9bd"/>
<path d="M0 335.5H768" stroke="#b8b9bd"/>
<path d="M0 383.5H768" stroke="#b8b9bd"/>
<path d="M0 431.5H768" stroke="#b8b9bd"/>
<path d="M0 479.5H768" stroke="#b8b9bd"/>
<path d="M0 527.5H768" stroke="#b8b9bd"/>
<path d="M0 575.5H768" stroke="#b8b9bd"/>
<path d="M0 623.5H768" stroke="#b8b9bd"/>
<path d="M0 671.5H768" stroke="#b8b9bd"/>
<path d="M0 719.5H768" stroke="#b8b9bd"/>
<path d="M0 767.5H768" stroke="#b8b9bd"/>
</g>
<path d="M767.5 0.5H0.5V767.5H767.5V0.5Z" stroke="#b8b9bd"/>
</g>
</g>
</g>
<defs>
<radialGradient id="paint0_radial_14_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(384 384) rotate(90) scale(384)">
<stop/>
<stop offset="1" stop-opacity="0"/>
</radialGradient>
<clipPath id="clip0_14_2">
<rect width="768" height="768" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

3
Client/src/assets/icons/top-right-arrow.svg Normal file
View File

@@ -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="M7 17L17 7M17 7H7M17 7V17" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 224 B