Updated cards background, removed unused files

Client/src/Components/Charts/Servers/ServerStatus.jsx

@@ -1,28 +0,0 @@
-import React from "react";
-import "./serverStatus.css";
-import PropTypes from "prop-types";
-
-/**
- * @component
- * @param {Object} props
- * @param {string} props.title - The title text for the server status (required)
- * @param {number} props.value - The value text to be displayed (required)
- * @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required)
- * @returns {JSX.Element} - Renders the server status component
- */
-const ServerStatus = ({ title, value, state }) => {
-  return (
-    <div className="server-status-tile">
-      <div className="server-status-tile-title">{title}</div>
-      <div className={`server-status-tile-value ` + " " + state}>{value}</div>
-    </div>
-  );
-};
-
-ServerStatus.propTypes = {
-  title: PropTypes.string.isRequired,
-  value: PropTypes.number.isRequired,
-  state: PropTypes.string.isRequired,
-};
-
-export default ServerStatus;

Client/src/Components/Charts/Servers/serverStatus.css

@@ -1,46 +0,0 @@
-:root {
-  --spacing-general-0: 12px 18px;
-  --spacing-general-1: 20px;
-  --color-border-0: #eaecf0;
-  --border-radius-0: 4px;
-  --font-size-0: 1rem;
-  --font-size-2: 36px;
-
-  --color-up: #17b26a;
-  --color-down: #f04438;
-  --color-pause: #fdb022;
-}
-
-.server-status-tile {
-  min-width: 100px;
-  width: calc(100% - 310px);
-  padding: var(--spacing-general-0);
-  border: 1px solid var(--color-border-0);
-  border-radius: var(--border-radius-0);
-  background-color: var(--env-var-color-8);
-}
-
-.server-status-tile-title {
-  font-size: var(--font-size-0);
-  font-weight: 500;
-  margin-bottom: calc(var(--spacing-general-1) / 2);
-  color: var(--env-var-color-5);
-  opacity: 0.6;
-}
-
-.server-status-tile-value {
-  font-size: var(--font-size-2);
-  font-weight: bolder;
-}
-
-.up {
-  color: var(--color-up);
-}
-
-.down {
-  color: var(--color-down);
-}
-
-.pause {
-  color: var(--color-pause);
-}

Client/src/Components/Sidebar/index.jsx

@@ -194,6 +194,7 @@ function Sidebar() {
             sx={{
               pt: theme.gap.small,
               px: collapsed ? theme.gap.xs : theme.gap.small,
+              backgroundColor: "transparent"
             }}
           >
             Menu
@@ -394,6 +395,7 @@ function Sidebar() {
             sx={{
               pt: theme.gap.small,
               px: collapsed ? 0 : theme.gap.small,
+              backgroundColor: "transparent"
             }}
           >
             Other