Merge branch 'develop' into feature/pagespeed-api-warning-2022

src/Components/Charts/ChartBox/index.jsx

@@ -25,7 +25,7 @@ const ChartBox = ({
 			flex={1}
 			direction="row"
 			sx={{
-				backgroundColor: theme.palette.tertiary.main,
+				backgroundColor: theme.palette.primary.main,
 
 				border: 1,
 				borderStyle: "solid",

src/Components/FilterHeader/index.jsx

@@ -47,11 +47,25 @@ const FilterHeader = ({ header, options, value, onChange, multiple = true }) =>
 						.filter(Boolean)
 						.join(", ");
 				}}
+				MenuProps={{
+					anchorOrigin: {
+						vertical: "bottom",
+						horizontal: "left",
+					},
+					transformOrigin: {
+						vertical: "top",
+						horizontal: "left",
+					},
+				}}
 			>
 				{options.map((option) => (
 					<MenuItem
 						key={option.value}
 						value={option.value}
+						sx={{
+							height: theme.spacing(17),
+							padding: 0,
+						}}
 					>
 						<Checkbox
 							checked={controlledValue.includes(option.value)}

src/Components/MonitorCountHeader/index.jsx

@@ -1,6 +1,4 @@
-import { Stack } from "@mui/material";
-import { Heading } from "../Heading";
-import CircularCount from "../CircularCount";
+import { Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import SkeletonLayout from "./skeleton";
@@ -8,22 +6,36 @@ import SkeletonLayout from "./skeleton";
 const MonitorCountHeader = ({
 	shouldRender = true,
 	monitorCount,
-	heading,
+	heading = "monitors",
 	sx,
 	children,
 }) => {
 	const theme = useTheme();
 	if (!shouldRender) return <SkeletonLayout />;
 
+	if (monitorCount === 1) {
+		heading = "monitor";
+	}
+
 	return (
 		<Stack
 			direction="row"
 			alignItems="center"
+			display="flex"
+			width="fit-content"
+			height={theme.spacing(18)}
 			gap={theme.spacing(2)}
-			sx={{ ...sx }}
+			mt={theme.spacing(2)}
+			px={theme.spacing(4)}
+			pt={theme.spacing(2)}
+			pb={theme.spacing(3)}
+			borderRadius={theme.spacing(1)}
+			sx={{
+				...sx,
+				backgroundColor: theme.palette.secondary.main,
+			}}
 		>
-			<Heading component="h2">{heading}</Heading>
-			<CircularCount count={monitorCount} />
+			{monitorCount} <Typography component="h2">{heading}</Typography>
 			{children}
 		</Stack>
 	);

src/Components/Sidebar/index.css

@@ -79,6 +79,17 @@ aside .MuiListSubheader-root {
 	transition: padding 200ms ease;
 }
 
+.sidebar-delay-fade {
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.3s ease;
+}
+
+aside.expanded.sidebar-ready .sidebar-delay-fade {
+	opacity: 1;
+	visibility: visible;
+}
+
 @keyframes fadeIn {
 	0% {
 		opacity: 0;

src/Components/Sidebar/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import {
 	Box,
 	Collapse,
@@ -127,6 +127,21 @@ function Sidebar() {
 	const distributedUptimeEnabled = useSelector(
 		(state) => state.ui.distributedUptimeEnabled
 	);
+	const sidebarRef = useRef(null);
+	const [sidebarReady, setSidebarReady] = useState(false);
+	const TRANSITION_DURATION = 200;
+
+	useEffect(() => {
+		if (!collapsed) {
+			setSidebarReady(false);
+			const timeout = setTimeout(() => {
+				setSidebarReady(true);
+			}, TRANSITION_DURATION);
+			return () => clearTimeout(timeout);
+		} else {
+			setSidebarReady(false);
+		}
+	}, [collapsed]);	
 
 	const renderAccountMenuItems = () => {
 		let filteredAccountMenuItems = [...accountMenuItems];
@@ -148,7 +163,10 @@ function Sidebar() {
 		return filteredAccountMenuItems.map((item) => (
 			<MenuItem
 				key={item.name}
-				onClick={() => navigate(item.path)}
+				onClick={() => {
+				     closePopup()
+					 navigate(item.path)
+				}}
 				sx={{
 					gap: theme.spacing(2),
 					borderRadius: theme.shape.borderRadius,
@@ -191,12 +209,14 @@ function Sidebar() {
 	}, [location]);
 
 	const iconColor = theme.palette.primary.contrastTextTertiary;
+	const sidebarClassName = `${collapsed ? "collapsed" : "expanded"} ${sidebarReady ? "sidebar-ready" : ""}`;
 
 	/* TODO refactor this, there are a some ternaries and comments in the return  */
 	return (
 		<Stack
 			component="aside"
-			className={collapsed ? "collapsed" : "expanded"}
+			ref={sidebarRef}
+			className={sidebarClassName}
 			/* TODO general padding should be here */
 			py={theme.spacing(6)}
 			gap={theme.spacing(6)}
@@ -342,21 +362,6 @@ function Sidebar() {
 					component="nav"
 					aria-labelledby="nested-menu-subheader"
 					disablePadding
-					subheader={
-						<ListSubheader
-							component="div"
-							id="nested-menu-subheader"
-							sx={{
-								py: theme.spacing(4),
-								/* TODO px should be centralized in container */
-								px: collapsed ? theme.spacing(2) : theme.spacing(4),
-								backgroundColor: "transparent",
-								position: "static",
-							}}
-						>
-							Menu
-						</ListSubheader>
-					}
 					sx={{
 						px: theme.spacing(6),
 						height: "100%",
@@ -725,6 +730,7 @@ function Sidebar() {
 							</Typography>
 						</Box>
 						<Stack
+							className="sidebar-delay-fade"
 							flexDirection={"row"}
 							marginLeft={"auto"}
 							columnGap={theme.spacing(2)}

src/Components/Tab/index.jsx

@@ -0,0 +1,36 @@
+import { Box, useTheme } from "@mui/material";
+import { TabList } from "@mui/lab";
+import PropTypes from "prop-types";
+
+/**
+ * CustomTabList component
+ * @param {string} value - The currently selected tab's value.
+ * @param {function} onChange - Callback when a different tab is selected.
+ * @param {React.ReactNode} children - Tab components to render inside the TabList.
+ * @param {object} props - Additional props passed to the TabList component.
+ */
+
+const CustomTabList = ({ value, onChange, children, ...props }) => {
+	const theme = useTheme();
+
+	return (
+		<Box
+			sx={{
+				borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
+				"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
+			}}
+		>
+			<TabList value={value} onChange={onChange} {...props}>
+				{children}
+			</TabList>
+		</Box>
+	);
+};
+
+CustomTabList.propTypes = {
+	value: PropTypes.string,
+	onChange: PropTypes.func,
+	children: PropTypes.node,
+};
+
+export default CustomTabList;

src/Components/Table/index.jsx

@@ -65,7 +65,7 @@ const DataTable = ({
 						backgroundColor: theme.palette.secondary.main,
 						color: theme.palette.secondary.contrastText,
 						fontWeight: 600,
-						fontSize: "12px",
+						fontSize: "13px",
 					},
 					"& :is(td)": {
 						backgroundColor: theme.palette.primary.main,