refactor: migrate HomeLayout from CSS to MUI sx styling

client/src/Components/v1/Layouts/HomeLayout/index.css

@@ -1,37 +0,0 @@
-.home-layout {
-	position: relative;
-	min-height: 100vh;
-	margin: 0 auto;
-	padding: 0;
-	overflow-x: hidden;
-	width: 100%;
-}
-
-/* TODO go for this approach for responsiveness. The aside needs to be taken care of */
-/* @media (max-width: 1000px) {
-	.home-layout {
-		flex-direction: column !important;
-	}
-} */
-
-/* .home-layout aside {
-	position: sticky;
-	top: 0;
-	left: 0;
-	height: 100vh;
-	max-width: var(--env-var-side-bar-width);
-} */
-
-.home-layout > div {
-	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;
-	min-width: 0;
-	overflow-x: hidden;
-}

client/src/Components/v1/Layouts/HomeLayout/index.jsx

@@ -1,19 +1,40 @@
 import Sidebar from "../../Sidebar/index.jsx";
 import { Outlet } from "react-router";
 import { Stack } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { UserGuideSidebar } from "../../UserGuide";
 
-import "./index.css";
-
 const HomeLayout = () => {
+	const theme = useTheme();
+
 	return (
 		<Stack
-			className="home-layout"
 			flexDirection="row"
 			gap={14}
+			sx={{
+				position: "relative",
+				minHeight: "100vh",
+				margin: "0 auto",
+				padding: 0,
+				overflowX: "hidden",
+				width: "100%",
+				"& > div": {
+					minHeight: `calc(100vh - ${theme.spacing(4)} * 2)`,
+					flex: 1,
+				},
+			}}
 		>
 			<Sidebar />
-			<Stack className="home-content-wrapper">
+			<Stack
+				sx={{
+					padding: theme.spacing(4),
+					maxWidth: 1400,
+					margin: "0 auto",
+					flex: 1,
+					minWidth: 0,
+					overflowX: "hidden",
+				}}
+			>
 				<Outlet />
 			</Stack>
 			<UserGuideSidebar />