Merge branch 'develop' into fix/gap-select-components

client/src/Components/Charts/CustomGauge/index.jsx

@@ -17,7 +17,6 @@ const MAXIMUM_VALUE = 100;
  * @param {number} [props.progress=0] - Progress percentage (0-100)
  * @param {number} [props.radius=60] - Radius of the gauge circle
  * @param {number} [props.strokeWidth=15] - Width of the gauge stroke
- * @param {number} [props.threshold=50] - Threshold for color change
  * @param {number} [props.precision=1] - Precision of the progress percentage
  * @param {string} [props.unit="%"] - Unit of progress
  *
@@ -26,7 +25,6 @@ const MAXIMUM_VALUE = 100;
  *   progress={75}
  *   radius={50}
  *   strokeWidth={10}
- * 	 threshold={50}
  * />
  *
  * @returns {React.ReactElement} Rendered CustomGauge component
@@ -36,7 +34,6 @@ const CustomGauge = ({
 	progress = 0,
 	radius = 70,
 	strokeWidth = 15,
-	threshold = 50,
 	precision = 1,
 	unit = "%",
 }) => {
@@ -64,10 +61,14 @@ const CustomGauge = ({
 
 	const progressWithinRange = Math.max(MINIMUM_VALUE, Math.min(progress, MAXIMUM_VALUE));
 
-	const fillColor =
-		progressWithinRange > threshold
-			? theme.palette.error.lowContrast
-			: theme.palette.accent.main;
+	let fillColor;
+	if (progressWithinRange < 50) {
+		fillColor = theme.palette.success.main;
+	} else if (progressWithinRange < 80) {
+		fillColor = theme.palette.warning.lowContrast;
+	} else {
+		fillColor = theme.palette.error.lowContrast;
+	}
 
 	if (isLoading) {
 		return (
@@ -142,7 +143,6 @@ CustomGauge.propTypes = {
 	progress: PropTypes.number,
 	radius: PropTypes.number,
 	strokeWidth: PropTypes.number,
-	threshold: PropTypes.number,
 	precision: PropTypes.number,
 	unit: PropTypes.string,
 };

client/src/Components/Sidebar/components/authFooter.jsx

@@ -4,7 +4,6 @@ import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 import IconButton from "@mui/material/IconButton";
 import Avatar from "../../Avatar";
-import ThemeSwitch from "../../ThemeSwitch";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Divider from "@mui/material/Divider";
@@ -152,38 +151,30 @@ const AuthFooter = ({ collapsed, accountMenuItems }) => {
 						{getRoleDisplayText(authState.user, t)}
 					</Typography>
 				</Stack>
-				<Stack
-					direction="row"
-					columnGap={theme.spacing(2)}
+				<Tooltip
+					title={t("navControls")}
+					disableInteractive
 				>
-					<ThemeSwitch color={theme.palette.primary.contrastTextTertiary} />
-					<Tooltip
-						title={t("navControls")}
-						disableInteractive
-					>
-						<IconButton
-							sx={{
-								ml: "auto",
-								mr: "-8px",
-								"&:focus": { outline: "none" },
-								alignSelf: "center",
-								padding: "10px",
+					<IconButton
+						sx={{
+							ml: "50px",
+							"&:focus": { outline: "none" },
+							alignSelf: "center",
 
-								"& svg": {
-									width: "22px",
-									height: "22px",
-								},
-								"& svg path": {
-									/* Vertical three dots */
-									stroke: theme.palette.primary.contrastTextTertiary,
-								},
-							}}
-							onClick={(event) => openPopup(event)}
-						>
-							<DotsVertical />
-						</IconButton>
-					</Tooltip>
-				</Stack>
+							"& svg": {
+								width: "22px",
+								height: "22px",
+							},
+							"& svg path": {
+								/* Vertical three dots */
+								stroke: theme.palette.primary.contrastTextTertiary,
+							},
+						}}
+						onClick={(event) => openPopup(event)}
+					>
+						<DotsVertical />
+					</IconButton>
+				</Tooltip>
 			</Stack>
 			<Menu
 				className="sidebar-popup"