fix: updated color and opacity values

Client/src/Components/Sidebar/index.css

@@ -6,7 +6,10 @@ aside .MuiStack-root:hover {
 aside .MuiList-root svg {
   width: 20px;
   height: 20px;
-  opacity: 0.8;
+  opacity: 0.9;
+}
+aside .MuiList-root svg path {
+  stroke: var(--env-var-color-2);
 }
 aside span.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
@@ -16,13 +19,22 @@ aside .MuiListSubheader-root {
   font-size: var(--env-var-font-size-small);
   font-weight: 500;
   line-height: 1.5;
-  opacity: 0.6;
   text-transform: uppercase;
-  margin-bottom: 5px;
+  margin-bottom: 2px;
+  opacity: 0.6;
 }
 aside span.MuiTypography-root,
 aside .MuiListSubheader-root {
-  color: var(--env-var-color-2);
+  color: var(--env-var-color-5);
+}
+aside .MuiListItemButton-root:not(.selected-path) > * {
+  opacity: 0.8;
+}
+aside .selected-path > * {
+  opacity: 1;
+}
+aside .selected-path span.MuiTypography-root {
+  font-weight: 500;
 }
 aside .MuiStack-root:last-child {
   margin-top: auto;

Client/src/Components/Sidebar/index.jsx

@@ -244,33 +244,6 @@ function Sidebar() {
           </MenuItem>
         ))}
       </Menu>
-      {/* {menu.map((item) => (
-        <Stack
-          className={
-            location.pathname.includes(item.path) ? "selected-path" : ""
-          }
-          key={item.path}
-          direction="row"
-          alignItems="center"
-          py={theme.gap.small}
-          px={theme.gap.medium}
-          gap={theme.gap.small}
-          borderRadius={`${theme.shape.borderRadius}px`}
-          onClick={() =>
-            item.path === "support"
-              ? window.open(
-                  "https://github.com/bluewave-labs/bluewave-uptime",
-                  "_blank",
-                  "noreferrer"
-                )
-              : navigate(`/${item.path}`)
-          }
-        >
-          {item.icon}
-          <Typography component="span">{item.name}</Typography>
-        </Stack>
-      ))}
-       */}
     </Stack>
   );
 }