feat: using common baseTheme to avoid repetition

Client/src/App.jsx

@@ -79,7 +79,6 @@ function App() {
 					<Route
 						exact
 						path="/"
-						/* TODO redirect to /monitors */
 						element={<Navigate to="/monitors" />}
 					/>
 					<Route

Client/src/Components/Heading/index.jsx

@@ -0,0 +1,29 @@
+import { Typography } from "@mui/material";
+import PropTypes from "prop-types";
+
+/**
+ * A heading component that renders text with a specific heading level.
+ *
+ * @param {Object} props - The properties passed to the Heading component.
+ * @param {('h1'|'h2'|'h3')} props.component - The heading level for the component.
+ * @param {string} props.children - The content to display inside the heading.
+ * @returns {JSX.Element} The Typography component with specified heading properties.
+ */
+
+function Heading({ component, children }) {
+	return (
+		<Typography
+			component={component}
+			variant="h2"
+			fontWeight={600}
+		>
+			{children}
+		</Typography>
+	);
+}
+
+Heading.propTypes = {
+	component: PropTypes.oneOf(["h1", "h2", "h3"]).isRequired,
+	children: PropTypes.string.isRequired,
+};
+export { Heading };

Client/src/Components/Sidebar/index.jsx

@@ -150,6 +150,8 @@ function Sidebar() {
 		}
 	}, [location]);
 
+	/* TODO refactor this, there are a some ternaries and comments in the return  */
+
 	return (
 		<Stack
 			component="aside"

Client/src/Pages/Infrastructure/index.jsx

@@ -1,5 +1,22 @@
+import { Box, Button } from "@mui/material";
+import { Heading } from "../../Components/Heading";
+
 function Infrastructure() {
-	return <h1>Infrastructure monitors</h1>;
+	return (
+		<Box component="main">
+			<Button
+				variant="contained"
+				color="primary"
+				onClick={() => {
+					// navigate("/monitors/create");
+				}}
+				sx={{ fontWeight: 500 }}
+			>
+				Create monitor
+			</Button>
+			<Heading component="h2">Infrastructure monitors</Heading>
+		</Box>
+	);
 }
 
 export { Infrastructure };

Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx

@@ -1,10 +1,11 @@
 import { useTheme } from "@emotion/react";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import Search from "../../../../Components/Inputs/Search";
 import MemoizedMonitorTable from "../MonitorTable";
 import { useState } from "react";
 import useDebounce from "../../../../Utils/debounce";
 import PropTypes from "prop-types";
+import { Heading } from "../../../../Components/Heading";
 
 const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin }) => {
 	const theme = useTheme();
@@ -25,14 +26,8 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin }) => {
 				alignItems="center"
 				mb={theme.spacing(8)}
 			>
-				<Typography
-					component="h2"
-					variant="h2"
-					fontWeight={500}
-					letterSpacing={-0.2}
-				>
-					Actively monitoring
-				</Typography>
+				<Heading component="h2">Actively monitoring</Heading>
+
 				<Box
 					className="current-monitors-counter"
 					color={theme.palette.text.primary}

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

@@ -1,3 +1,4 @@
+/* TODO take these from here and declare using emotion. Plus, the values should live in the theme */
 .monitors .MuiStack-root > button:not(.MuiIconButton-root) {
 	font-size: var(--env-var-font-size-medium);
 	height: var(--env-var-height-2);

Client/src/Utils/Theme/constants.js

@@ -0,0 +1,18 @@
+const typographyLevels = {
+	xs: ".625rem",
+	s: ".75rem",
+	m: ".875rem",
+	l: "1rem",
+	xl: "1.5rem",
+};
+
+const paletteLight = {
+	text: {
+		primary: "#1c2130",
+		secondary: "#344054",
+		tertiary: "#475467",
+		accent: "#838c99",
+	},
+};
+
+export { typographyLevels, paletteLight };

Client/src/Utils/Theme/darkTheme.js

@@ -1,4 +1,5 @@
 import { createTheme } from "@mui/material";
+import { baseTheme } from "./globalTheme";
 
 const text = {
 	primary: "#fafafa",
@@ -15,20 +16,21 @@ const background = {
 };
 const border = { light: "#27272a", dark: "#36363e" };
 
-const fontFamilyDefault =
-	'"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
+/* const fontFamilyDefault =
+	'"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; */
 const shadow =
 	"0px 4px 24px -4px rgba(255, 255, 255, 0.03), 0px 3px 3px -3px rgba(255, 255, 255, 0.01)";
 
 const darkTheme = createTheme({
-	typography: {
-		fontFamily: fontFamilyDefault,
-		fontSize: 13,
-		h1: { fontSize: 22, color: text.primary, fontWeight: 500 },
-		h2: { fontSize: 14.5, color: text.secondary, fontWeight: 400 },
-		body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 },
-		body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 },
-	},
+	...baseTheme,
+	// typography: {
+	// 	/* 	fontFamily: fontFamilyDefault, */
+	// 	fontSize: 13,
+	// 	h1: { fontSize: 22, color: text.primary, fontWeight: 500 },
+	// 	h2: { fontSize: 16, color: text.secondary, fontWeight: 400 },
+	// 	body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 },
+	// 	body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 },
+	// },
 	chart: {
 		header: {
 			fontWeight: 400,

Client/src/Utils/Theme/globalTheme.js

@@ -0,0 +1,33 @@
+import { paletteLight, typographyLevels } from "./constants";
+
+const fontFamilyPrimary = '"Inter" , sans-serif';
+// const fontFamilySecondary = '"Avenir", sans-serif';
+
+const baseTheme = {
+	typography: {
+		fontFamily: fontFamilyPrimary,
+		fontSize: typographyLevels.m,
+		h1: {
+			fontSize: typographyLevels.xl,
+			color: paletteLight.text.primary,
+			fontWeight: 500,
+		},
+		h2: {
+			fontSize: typographyLevels.l,
+			color: paletteLight.text.secondary,
+			fontWeight: 400,
+		},
+		body1: {
+			fontSize: typographyLevels.m,
+			color: paletteLight.text.tertiary,
+			fontWeight: 400,
+		},
+		body2: {
+			fontSize: typographyLevels.s,
+			color: paletteLight.text.tertiary,
+			fontWeight: 400,
+		},
+	},
+};
+
+export { baseTheme };

Client/src/Utils/Theme/lightTheme.js

@@ -1,4 +1,6 @@
 import { createTheme } from "@mui/material";
+import { typographyLevels } from "./constants";
+import { baseTheme } from "./globalTheme";
 
 const text = {
 	primary: "#1c2130",
@@ -15,30 +17,34 @@ const background = {
 
 const border = { light: "#eaecf0", dark: "#d0d5dd" };
 
-const fontFamilyDefault =
-	'"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif';
+/* TODO stop using mui for fonts. Create text component based on emotion */
+
+/* const fontFamilyDefault =
+	'"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; */
+
 const shadow =
 	"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
 
 const lightTheme = createTheme({
-	typography: {
-		fontFamily: fontFamilyDefault,
-		fontSize: 13,
-		h1: { fontSize: 22, color: text.primary, fontWeight: 500 },
-		h2: { fontSize: 14.5, color: text.secondary, fontWeight: 400 },
-		body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 },
-		body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 },
-	},
+	...baseTheme,
+	// typography: {
+	// 	/* fontFamily: fontFamilyDefault, */
+	// 	fontSize: typographyLevels.m,
+	// 	h1: { fontSize: typographyLevels.xl, color: text.primary, fontWeight: 500 },
+	// 	h2: { fontSize: typographyLevels.l, color: text.secondary, fontWeight: 400 },
+	// 	body1: { fontSize: typographyLevels.m, color: text.tertiary, fontWeight: 400 },
+	// 	body2: { fontSize: typographyLevels.s, color: text.tertiary, fontWeight: 400 },
+	// },
 	chart: {
 		header: {
 			fontWeight: 400,
 			fill: text.tertiary,
-			fontSize: 11,
+			fontSize: typographyLevels.m,
 		},
 		subheader: {
 			fontWeight: 400,
 			fill: text.tertiary,
-			fontSize: 9,
+			fontSize: typographyLevels.xs,
 		},
 	},
 	palette: {