Merge branch 'develop' into feat/choose-disks-monitor

CONTRIBUTING.md

@@ -66,7 +66,7 @@ cd Checkmate
 Navigate to the Docker dev directory:
 
 ```bash
-cd server/docker/dev
+cd docker/dev
 ```
 
 Build the Docker images:
@@ -78,13 +78,13 @@ Build the Docker images:
 Run MongoDB container:
 
 ```bash
-docker run -d -p 27017:27017 -v $(pwd)/mongo/data:/data/db --name uptime_database_mongo uptime_database_mongo
+docker run -d -p 27017:27017 -v uptime_mongo_data:/data/db --name uptime_database_mongo mongo:6.0
 ```
 
 Navigate back to the root directory:
 
 ```bash
-cd ../../..
+cd ../..
 ```
 
 #### Step 3: Set Up the Backend (Server)
@@ -161,7 +161,7 @@ Start the frontend:
 npm run dev
 ```
 
-The client will run at `http://localhost:5173`.
+The client will run at `http://localhost:5173`.  
 
 #### Step 5: Access the Application
 

README.md

@@ -52,7 +52,7 @@ Usage instructions can be found [here](https://docs.checkmate.so/checkmate-2.1).
 
 See installation instructions in [Checkmate documentation portal](https://docs.checkmate.so/checkmate-2.1/users-guide/quickstart). 
 
-Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) (South Africa) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions.
+Alternatively, you can also use [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) (South Africa) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions.
 
 ### Using a Custom CA
 

client/src/Components/v1/Host/index.jsx

@@ -2,6 +2,7 @@ import { Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import Dot from "../Dot/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
 /**
  * Host component.
  * This subcomponent receives a params object and displays the host details.
@@ -14,7 +15,7 @@ import Dot from "../Dot/index.jsx";
  * @param {number} params.percentage - The percentage to display.
  * @returns {React.ElementType} Returns a div element with the host details.
  */
-const Host = ({ url, title, percentageColor, percentage, showURL }) => {
+const Host = ({ url, title, percentageColor, percentage, showURL, status }) => {
 	const theme = useTheme();
 	return (
 		<Stack>
@@ -22,21 +23,36 @@ const Host = ({ url, title, percentageColor, percentage, showURL }) => {
 				direction="row"
 				position="relative"
 				alignItems="center"
-				gap={theme.spacing(4)}
+				gap={theme.spacing(5)}
 			>
-				{title}
+				<Typography
+					variant="h6"
+					sx={{
+						fontWeight: 600,
+					}}
+				>
+					{title}
+				</Typography>
+
 				{percentageColor && percentage && (
 					<>
 						<Dot />
 						<Typography
-							component="span"
+							variant="h6"
 							sx={{
+								fontWeight: 600,
 								color: percentageColor,
-								fontWeight: 500,
 							}}
 						>
 							{percentage}%
 						</Typography>
+						{status && (
+							<StatusLabel
+								status={status}
+								text={status}
+								customStyles={{ textTransform: "capitalize" }}
+							/>
+						)}
 					</>
 				)}
 			</Stack>
@@ -51,6 +67,7 @@ Host.propTypes = {
 	percentage: PropTypes.string,
 	url: PropTypes.string,
 	showURL: PropTypes.bool,
+	status: PropTypes.string,
 };
 
 export default Host;

client/src/Components/v1/Label/index.jsx

@@ -147,11 +147,9 @@ const StatusLabel = ({ status, text, customStyles }) => {
 			}}
 		>
 			<Box
-				width={7}
-				height={7}
 				bgcolor={theme.palette[themeColor].lowContrast}
-				borderRadius="50%"
-				marginRight="5px"
+				borderRadius="0%"
+				marginRight="1px"
 			/>
 		</BaseLabel>
 	);

client/src/Pages/v1/StatusPage/Status/Components/MonitorsList/index.jsx

@@ -30,7 +30,9 @@ const MonitorsList = ({
 					<Stack
 						key={monitor._id}
 						width="100%"
-						gap={theme.spacing(2)}
+						gap={theme.spacing(10)}
+						margin="0 auto"
+						maxWidth="95%"
 					>
 						<Host
 							key={monitor._id}
@@ -39,24 +41,18 @@ const MonitorsList = ({
 							percentageColor={monitor.percentageColor}
 							percentage={monitor.percentage}
 							showURL={showURL}
+							status={status}
 						/>
 						<Stack
 							direction="row"
 							alignItems="center"
-							gap={theme.spacing(20)}
+							gap={theme.spacing(1)}
 						>
 							{statusPage.showCharts !== false && (
 								<Box flex={9}>
 									<StatusPageBarChart checks={monitor?.checks?.slice().reverse()} />
 								</Box>
 							)}
-							<Box flex={statusPage.showCharts !== false ? 1 : 10}>
-								<StatusLabel
-									status={status}
-									text={status}
-									customStyles={{ textTransform: "capitalize" }}
-								/>
-							</Box>
 						</Stack>
 					</Stack>
 				);