Merge pull request #1986 from bluewave-labs/fix/fe/sidebar-ui-change

Modify Sidebar UI

src/Components/Fallback/index.jsx

@@ -35,6 +35,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
 			overflow="hidden"
 			sx={{
 				borderStyle: "dashed",
+				minHeight: "calc(100vh - var(--env-var-spacing-2) * 2)",
 			}}
 		>
 			<Stack

src/Components/Layouts/HomeLayout/index.css

@@ -1,9 +1,8 @@
 .home-layout {
 	position: relative;
 	min-height: 100vh;
-	max-width: 1400px;
 	margin: 0 auto;
-	padding: var(--env-var-spacing-2);
+	padding: 0;
 }
 
 /* TODO go for this approach for responsiveness. The aside needs to be taken care of */
@@ -15,10 +14,9 @@
 
 .home-layout aside {
 	position: sticky;
-	top: var(--env-var-spacing-2);
+	top: 0;
 	left: 0;
-
-	height: calc(100vh - var(--env-var-spacing-2) * 2);
+	height: 100vh;
 	max-width: var(--env-var-side-bar-width);
 }
 
@@ -26,3 +24,10 @@
 	min-height: calc(100vh - var(--env-var-spacing-2) * 2);
 	flex: 1;
 }
+
+.home-content-wrapper {
+	padding: var(--env-var-spacing-2);
+	max-width: 1400px;
+	margin: 0 auto;
+	flex: 1;
+}

src/Components/Layouts/HomeLayout/index.jsx

@@ -12,7 +12,9 @@ const HomeLayout = () => {
 			gap={14}
 		>
 			<Sidebar />
-			<Outlet />
+			<Stack className="home-content-wrapper">
+				<Outlet />
+			</Stack>
 		</Stack>
 	);
 };

src/Components/Sidebar/index.jsx

@@ -205,9 +205,10 @@ function Sidebar() {
 			*/
 			sx={{
 				position: "relative",
-				border: 1,
+				borderRight: `1px solid ${theme.palette.primary.lowContrast}`, 
 				borderColor: theme.palette.primary.lowContrast,
-				borderRadius: theme.shape.borderRadius,
+				borderRadius: 0,
+				backgroundColor: theme.palette.primary.main,
 				"& :is(p, span, .MuiListSubheader-root)": {
 					/* 
 					Text color for unselected menu items and menu headings
@@ -399,6 +400,7 @@ function Sidebar() {
 										gap: theme.spacing(4),
 										borderRadius: theme.shape.borderRadius,
 										px: theme.spacing(4),
+										pl: theme.spacing(5),
 									}}
 								>
 									<ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
@@ -653,6 +655,7 @@ function Sidebar() {
 									gap: theme.spacing(4),
 									borderRadius: theme.shape.borderRadius,
 									px: theme.spacing(4),
+									pl: theme.spacing(5),
 								}}
 							>
 								<ListItemIcon sx={{ minWidth: 0 }}>{item.icon} </ListItemIcon>

src/Pages/Uptime/Monitors/Components/UptimeDataTable/index.jsx

@@ -149,7 +149,11 @@ const UptimeDataTable = ({
 		{
 			id: "responseTime",
 			content: t("responseTime"),
-			render: (row) => <BarChart checks={row.monitor.checks.slice().reverse()} />,
+			render: (row) => (
+				<Box display="flex" justifyContent="center">
+					<BarChart checks={row.monitor.checks.slice().reverse()} />
+				</Box>
+			),
 		},
 		{
 			id: "type",