feat: some colors fixed, table alignment

Client/src/Components/Label/index.jsx

@@ -24,7 +24,7 @@ const BaseLabel = ({ label, styles, children }) => {
 	// Grab the default borderRadius from the theme to match button style
 	const { borderRadius } = theme.shape;
 	// Calculate padding for the label to mimic button.  Appears to scale correctly, not 100% sure though.
-	const padding = theme.spacing(1 * 0.75, 2);
+	const padding = theme.spacing(3, 5);
 
 	return (
 		<Box

Client/src/Components/Table/index.jsx

@@ -43,12 +43,22 @@ const DataTable = ({ headers, data, config = { emptyView: "No data" } }) => {
 			<Table
 				stickyHeader
 				sx={{
-					"& :is(th)": { color: theme.palette.primary.contrastText },
-					"& :is(td)": { color: theme.palette.primary.contrastTextSecondary },
+					"&.MuiTable-root  :is(.MuiTableHead-root, .MuiTableBody-root) :is(th, td)": {
+						paddingLeft: theme.spacing(8),
+					},
+					"& :is(th)": {
+						backgroundColor: theme.palette.secondary.main,
+						color: theme.palette.secondary.contrastText,
+						fontWeight: 600,
+						fontSize: "12px",
+					},
+					"& :is(td)": {
+						backgroundColor: theme.palette.primary.main,
+						color: theme.palette.primary.contrastTextSecondary,
+					},
 				}}
 			>
-				{/* TODO Check */}
-				<TableHead sx={{ backgroundColor: theme.palette.secondary.main }}>
+				<TableHead>
 					<TableRow>
 						{headers.map((header, index) => (
 							<TableCell

Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx

@@ -156,7 +156,7 @@ const UptimeDataTable = ({
 					direction="row"
 					gap={theme.spacing(4)}
 					alignItems="center"
-					width="max-content"
+					display={"inline-flex"}
 					onClick={() => handleSort("status")}
 				>
 					{" "}
@@ -168,9 +168,9 @@ const UptimeDataTable = ({
 						}}
 					>
 						{sort.order === "asc" ? (
-							<ArrowUpwardRoundedIcon />
+							<ArrowUpwardRoundedIcon fontSize="18px" />
 						) : (
-							<ArrowDownwardRoundedIcon />
+							<ArrowDownwardRoundedIcon fontSize="18px" />
 						)}
 					</Stack>
 				</Stack>
@@ -222,17 +222,22 @@ const UptimeDataTable = ({
 				direction="row"
 				alignItems="center"
 				mb={theme.spacing(8)}
+				gap={theme.spacing(2)}
 			>
 				<Heading component="h2">Uptime monitors</Heading>
 
 				<Box
 					className="current-monitors-counter"
-					/* TODO Check */
-					color={"red" /* theme.palette.text.primary */}
-					border={1}
-					/* TODO Check */
-					borderColor={"red" /* theme.palette.border.light */}
-					backgroundColor={"red" /* theme.palette.background.accent */}
+					color={theme.palette.tertiary.contrastText}
+					border={2}
+					borderColor={theme.palette.accent.main}
+					backgroundColor={theme.palette.tertiary.main}
+					sx={{
+						padding: ".25em .75em",
+						borderRadius: "50%",
+						fontSize: "12px",
+						fontWeight: 500,
+					}}
 				>
 					{monitorCount}
 				</Box>
@@ -252,8 +257,7 @@ const UptimeDataTable = ({
 							height="100%"
 							position="absolute"
 							sx={{
-								/* TODO check */
-								backgroundColor: "red" /* theme.palette.background.main */,
+								backgroundColor: theme.palette.accent.contrastText,
 								opacity: 0.8,
 								zIndex: 100,
 							}}
@@ -270,8 +274,7 @@ const UptimeDataTable = ({
 						>
 							<CircularProgress
 								sx={{
-									/* TODO check */
-									color: "red" /*  theme.palette.other.icon */,
+									color: theme.palette.accent.main,
 								}}
 							/>
 						</Box>
@@ -283,9 +286,8 @@ const UptimeDataTable = ({
 					config={{
 						rowSX: {
 							cursor: "pointer",
-							"&:hover": {
-								/* TODO check */
-								backgroundColor: "red" /* theme.palette.background.accent */,
+							"&:hover td": {
+								backgroundColor: theme.palette.tertiary.main,
 							},
 						},
 						onRowClick: (row) => {

Client/src/Pages/Uptime/Home/index.css

@@ -4,17 +4,3 @@
 	height: var(--env-var-height-2);
 	min-width: fit-content;
 }
-
-.current-monitors-counter {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: 5px;
-	min-width: 25px;
-	min-height: 25px;
-	border-radius: 50%;
-	font-size: var(--env-var-font-size-medium);
-	font-weight: 500;
-	margin-left: 10px;
-	line-height: 0.8;
-}

Client/src/Pages/Uptime/Home/index.jsx

@@ -58,7 +58,7 @@ const UptimeMonitors = () => {
 
 	const getMonitorWithPercentage = useCallback((monitor, theme) => {
 		let uptimePercentage = "";
-		let percentageColor = "red"; /* theme.palette.percentage.uptimeExcellent */
+		let percentageColor = "";
 
 		if (monitor.uptimePercentage !== undefined) {
 			uptimePercentage =
@@ -66,15 +66,14 @@ const UptimeMonitors = () => {
 					? "0"
 					: (monitor.uptimePercentage * 100).toFixed(2);
 
-			/* TODO check */
 			percentageColor =
 				monitor.uptimePercentage < 0.25
-					? "red" /*  theme.palette.percentage.uptimePoor */
+					? theme.palette.error.main
 					: monitor.uptimePercentage < 0.5
-						? "red" /* theme.palette.percentage.uptimeFair */
+						? theme.palette.warning.main
 						: monitor.uptimePercentage < 0.75
-							? /* theme.palette.percentage.uptimeGood */ "red"
-							: "red" /* theme.palette.percentage.uptimeExcellent */;
+							? theme.palette.success.main
+							: theme.palette.success.main;
 		}
 
 		return {

Client/src/Utils/Theme/constants.js

@@ -84,8 +84,8 @@ const semanticColors = {
 const newColors = {
 	offWhite: "#FEFEFE",
 	offBlack: "#131315",
-	gray100: "#EFEFEF",
-	gray200: "#E3E3E3",
+	gray100: "#F3F3F3",
+	gray200: "#EFEFEF",
 	gray500: "#A2A3A3",
 	blueGray50: "#E8F0FE",
 	blueGray500: "#475467",