normalize

client/src/Pages/Incidents/Components/CardDetails.tsx

@@ -13,6 +13,7 @@ import { useSelector } from "react-redux";
 import type { RootState } from "@/Types/state";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
 import { getIncidentsDuration } from "@/Pages/Incidents/utils";
+import { theme } from "@/Utils/Theme/Theme";
 
 interface CardDetailsProps {
 	incident: Incident | null;
@@ -20,15 +21,19 @@ interface CardDetailsProps {
 	sx?: object;
 }
 
-const SectionHeading = ({ children }: { children: React.ReactNode }) => (
-	<Typography
-		component="h2"
-		variant="eyebrow"
-		color="text.secondary"
-	>
-		{children}
-	</Typography>
-);
+const SectionHeading = ({ children }: { children: React.ReactNode }) => {
+	const theme = useTheme();
+
+	return (
+		<Typography
+			component="h2"
+			variant="eyebrow"
+			color={theme.palette.text.secondary}
+		>
+			{children}
+		</Typography>
+	);
+};
 
 const Cell = ({ children }: { children: React.ReactNode }) => (
 	<Typography variant="body1">{children}</Typography>

client/src/Pages/Incidents/Components/CardSummary.tsx

@@ -68,7 +68,7 @@ export const SummaryCard = ({
 				<Typography
 					component="h2"
 					variant="eyebrow"
-					color="text.secondary"
+					color={theme.palette.text.secondary}
 				>
 					{title}
 				</Typography>

client/src/Pages/Incidents/index.tsx

@@ -188,8 +188,8 @@ const IncidentsPage = () => {
 				<>
 					<Typography
 						variant="eyebrow"
-						color="text.secondary"
-						sx={{ mb: theme.spacing(LAYOUT.XS) }}
+						color={theme.palette.text.secondary}
+						mb={theme.spacing(LAYOUT.XS)}
 					>
 						{t("pages.incidents.table.activeIncidents")}
 					</Typography>
@@ -211,8 +211,8 @@ const IncidentsPage = () => {
 
 			<Typography
 				variant="eyebrow"
-				color="text.secondary"
-				sx={{ mb: theme.spacing(LAYOUT.XS) }}
+				color={theme.palette.text.secondary}
+				mb={theme.spacing(LAYOUT.XS)}
 			>
 				{t("pages.incidents.table.resolvedIncidents")}
 			</Typography>