From e4ecd099ccf0ea50d8ca6bac110e481f20efc891 Mon Sep 17 00:00:00 2001
From: Yana <iana.matrosova@gmail.com>
Date: Thu, 17 Apr 2025 17:28:08 +0300
Subject: [PATCH] Add dark mode on error cards

---
 .../nymNodePageComponents/NodeDelegationsCard.tsx        | 9 +++++++--
 .../nymNodePageComponents/NodeParametersCard.tsx         | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx
index 74b5f9bf82..4062039ff2 100644
--- a/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx
+++ b/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx
@@ -2,7 +2,7 @@
 
 import { fetchNSApiNodes } from "@/app/api";
 import type { NS_NODE } from "@/app/api/types";
-import { Skeleton, Typography } from "@mui/material";
+import { Skeleton, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import ExplorerCard from "../cards/ExplorerCard";
 import DelegationsTable from "./DelegationsTable";
@@ -12,6 +12,8 @@ type Props = {
 };
 
 const NodeDelegationsCard = ({ paramId }: Props) => {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
   let nodeInfo: NS_NODE | undefined;
 
   const {
@@ -55,7 +57,10 @@ const NodeDelegationsCard = ({ paramId }: Props) => {
   if (isNSApiNodesError) {
     return (
       <ExplorerCard label="Delegations" sx={{ height: "100%" }}>
-        <Typography variant="h3" sx={{ color: "pine.950" }}>
+        <Typography
+          variant="h3"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to load delegations. Please try again later.
         </Typography>
       </ExplorerCard>
diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx
index 213a43eb8d..dda98be3b6 100644
--- a/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx
+++ b/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { formatBigNum } from "@/utils/formatBigNumbers";
-import { Skeleton, Typography } from "@mui/material";
+import { Skeleton, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { fetchEpochRewards, fetchNSApiNodes } from "../../app/api";
 import type { NS_NODE } from "../../app/api/types";
@@ -13,6 +13,8 @@ type Props = {
 };
 
 export const NodeParametersCard = ({ paramId }: Props) => {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
   let nodeInfo: NS_NODE | undefined;
 
   // Fetch epoch rewards
@@ -57,7 +59,10 @@ export const NodeParametersCard = ({ paramId }: Props) => {
   if (isEpochError || isNSApiNodesError || !nsApiNodes || !epochRewardsData) {
     return (
       <ExplorerCard label="Node parameters" sx={{ height: "100%" }}>
-        <Typography variant="h3" sx={{ color: "pine.950" }}>
+        <Typography
+          variant="h3"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to load node data.
         </Typography>
       </ExplorerCard>