From ce667bc53bb460785f79bd1ea0b6abcb3cdd3075 Mon Sep 17 00:00:00 2001
From: singh-kanwarpreet <kanwarpreet388@gmail.com>
Date: Thu, 14 Aug 2025 15:02:44 +0530
Subject: [PATCH] Improved code quality

---
 client/src/Pages/Logs/Logs/index.jsx | 58 ++++++++++++++++++----------
 client/src/Pages/Logs/index.jsx      | 28 +++++---------
 2 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/client/src/Pages/Logs/Logs/index.jsx b/client/src/Pages/Logs/Logs/index.jsx
index 29cc55a9b..d9ce2a25c 100644
--- a/client/src/Pages/Logs/Logs/index.jsx
+++ b/client/src/Pages/Logs/Logs/index.jsx
@@ -50,32 +50,48 @@ const Logs = () => {
 		{ _id: "debug", name: t("logsPage.logLevelSelect.values.debug") },
 	];
 	return (
-		<Stack gap={theme.spacing(8)}>
-			<Stack
-				gap={theme.spacing(8)}
+		<Stack gap={theme.spacing(4)}>
+			<Box
 				sx={{
 					position: "sticky",
-					top: theme.spacing(19),
-					zIndex: 950,
-					backgroundColor: theme.palette.primary.main,
-					paddingY: theme.spacing(7),
-					paddingX: theme.spacing(7),
+					top: theme.spacing(17),
+					backdropFilter: "blur(10px)",
+					paddingY: theme.spacing(5),
+					paddingLeft: theme.spacing(6),
 				}}
 			>
 				<Typography variant="h2">{t("logsPage.description")}</Typography>
-				<Divider color={theme.palette.accent.main} />
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(4)}
-				>
-					<Typography>{t("logsPage.logLevelSelect.title")}</Typography>
-					<Select
-						items={LOG_LEVELS}
-						value={logLevel}
-						onChange={(e) => setLogLevel(e.target.value)}
-					/>
-				</Stack>
+			</Box>
+			<Divider
+				color={theme.palette.accent.main}
+				sx={{
+					position: "sticky",
+					top: theme.spacing(33),
+					backdropFilter: "blur(10px)",
+				}}
+			/>
+
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={theme.spacing(4)}
+				mt={theme.spacing(10)}
+				sx={{
+					position: "sticky",
+					top: theme.spacing(34),
+					backdropFilter: "blur(10px)",
+					paddingTop: theme.spacing(4),
+					paddingLeft: theme.spacing(6),
+				}}
+			>
+				<Typography>{t("logsPage.logLevelSelect.title")}</Typography>
+				<Select
+					items={LOG_LEVELS}
+					value={logLevel}
+					onChange={(e) => {
+						setLogLevel(e.target.value);
+					}}
+				/>
 			</Stack>
 
 			<Box
diff --git a/client/src/Pages/Logs/index.jsx b/client/src/Pages/Logs/index.jsx
index 0e560997a..5b9879051 100644
--- a/client/src/Pages/Logs/index.jsx
+++ b/client/src/Pages/Logs/index.jsx
@@ -23,32 +23,22 @@ const Logs = () => {
 	};
 
 	const BREADCRUMBS = [{ name: t("logsPage.title"), path: "/logs" }];
-
 	return (
 		<Stack gap={theme.spacing(20)}>
 			<Breadcrumbs list={BREADCRUMBS} />
-
-			<Stack
-				gap={theme.spacing(10)}
+			<Tabs
+				value={value}
+				onChange={handleChange}
 				sx={{
 					position: "sticky",
-					top: 0,
-					zIndex: 1000,
-					backgroundColor: theme.palette.primary.main,
-					paddingY: theme.spacing(2),
+					top: theme.spacing(0),
+					backdropFilter: "blur(10px)",
 				}}
 			>
-				<Tabs
-					value={value}
-					onChange={handleChange}
-				>
-					<Tab label={t("logsPage.tabs.logs")} />
-					<Tab label={t("logsPage.tabs.queue")} />
-					<Tab label={t("logsPage.tabs.diagnostics")} />
-				</Tabs>
-			</Stack>
-
-			{/* Main content */}
+				<Tab label={t("logsPage.tabs.logs")} />
+				<Tab label={t("logsPage.tabs.queue")} />
+				<Tab label={t("logsPage.tabs.diagnostics")} />
+			</Tabs>
 			{value === 0 && <LogsComponent />}
 			{value === 1 && <Queue />}
 			{value === 2 && <Diagnostics />}