feat: finishing base for infrastructure page

Client/src/Components/BasicTable/index.css

@@ -27,7 +27,7 @@
 	font-size: var(--env-var-font-size-medium);
 }
 .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
-	padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
+	padding: var(--env-var-spacing-1);
 	font-weight: 500;
 }
 .MuiTable-root .MuiTableHead-root span {
@@ -43,7 +43,7 @@
 	height: 20px;
 }
 .MuiTable-root .MuiTableBody-root .MuiTableCell-root {
-	padding: 6px var(--env-var-spacing-2);
+	padding: var(--env-var-spacing-1);
 }
 .MuiTable-root .MuiTableBody-root .MuiTableRow-root {
 	height: 50px;

Client/src/Components/Charts/Gauge/index.jsx

@@ -69,6 +69,7 @@ function Gauge({ progressValue, width = DEFAULT_WIDTH }) {
 		<ResponsiveContainer
 			aspect={1}
 			width={width}
+			style={{ marginInline: "auto" }}
 		>
 			<RadialBarChart
 				{...RADIAL_BAR_CHART_PROPS}
@@ -91,8 +92,8 @@ function Gauge({ progressValue, width = DEFAULT_WIDTH }) {
 								textAnchor="middle"
 								dominantBaseline="middle"
 								style={{
-									...theme.typography.body1,
-									fill: theme.typography.body1.color,
+									...theme.typography.body2,
+									fill: theme.typography.body2.color,
 								}}
 							>
 								{`${myProgressValue}%`}