From 954da17cd225ae28f18a9f34741a428839f4809b Mon Sep 17 00:00:00 2001
From: Irozuku <emiliodu@gmail.com>
Date: Thu, 26 Feb 2026 10:50:19 -0300
Subject: [PATCH 1/3] fix: replace hardcoded colors in ToolGrid component

---
 .../front/src/components/notebooks/tool/ToolGrid.jsx   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/DashAI/front/src/components/notebooks/tool/ToolGrid.jsx b/DashAI/front/src/components/notebooks/tool/ToolGrid.jsx
index 1704d3db1..ab5b6387c 100644
--- a/DashAI/front/src/components/notebooks/tool/ToolGrid.jsx
+++ b/DashAI/front/src/components/notebooks/tool/ToolGrid.jsx
@@ -5,12 +5,14 @@ import ConfigureToolModal from "./ConfigureToolModal";
 import { useTourContext } from "../../tour/TourProvider";
 import { groupByCategory, sortCategories } from "./toolCategories";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material/styles";
 
 export default function ToolGrid({ tools, notebook, FormComponent }) {
   const [open, setOpen] = useState(false);
   const [selectedTool, setSelectedTool] = useState(null);
   const tourContext = useTourContext();
   const { t } = useTranslation(["datasets", "common"]);
+  const theme = useTheme();
 
   const grouped = useMemo(() => groupByCategory(tools), [tools]);
   const categories = useMemo(
@@ -62,10 +64,14 @@ export default function ToolGrid({ tools, notebook, FormComponent }) {
                 gap: 1,
                 mb: 1.5,
                 pb: 0.5,
-                borderBottom: "1px solid rgb(39, 39, 42)",
+                borderBottom: "1px solid",
+                borderColor: theme.palette.divider,
               }}
             >
-              <Typography variant="subtitle2" sx={{ flex: 1 }}>
+              <Typography
+                variant="subtitle2"
+                sx={{ flex: 1, color: "text.primary" }}
+              >
                 {cat}
               </Typography>
               <Typography variant="caption" sx={{ color: "text.secondary" }}>

From cad04f601a76258950da074795fb1f19a7480b0f Mon Sep 17 00:00:00 2001
From: Irozuku <emiliodu@gmail.com>
Date: Thu, 26 Feb 2026 11:26:35 -0300
Subject: [PATCH 2/3] fix: update ExplorerBox component to use primary color
 for Info icon

---
 DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx b/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
index 5dee8b179..92e3f3ca9 100644
--- a/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
+++ b/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
@@ -131,7 +131,8 @@ export default function ExplorerBox({
                   }
                   onClick={() => handleExplorerDetailsClick(explorer)}
                   size="small"
-                  icon={<Info sx={{ color: "white !important" }} />}
+                  color="primary"
+                  icon={<Info />}
                   sx={{
                     bgcolor: "primary.main",
                     "&:hover": {

From 419ff7f10896d2185287de137ef01ee5c9840e6b Mon Sep 17 00:00:00 2001
From: Irozuku <emiliodu@gmail.com>
Date: Thu, 26 Feb 2026 11:31:32 -0300
Subject: [PATCH 3/3] fix: update Delete icon color to white in ConverterBox
 and ExplorerBox components

---
 .../front/src/components/notebooks/converter/ConverterBox.jsx   | 2 +-
 DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx b/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx
index 3178692fd..3578afdca 100644
--- a/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx
+++ b/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx
@@ -123,7 +123,7 @@ export default function ConverterBox({
                   "&:hover": { bgcolor: "error.dark" },
                 }}
               >
-                <Delete sx={{ fontSize: 16 }} />
+                <Delete sx={{ fontSize: 16, color: "white" }} />
               </IconButton>
             )}
           </Box>
diff --git a/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx b/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
index 92e3f3ca9..8b5b9ed45 100644
--- a/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
+++ b/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
@@ -152,7 +152,7 @@ export default function ExplorerBox({
                     "&:hover": { bgcolor: "error.dark" },
                   }}
                 >
-                  <Delete sx={{ fontSize: 16 }} />
+                  <Delete sx={{ fontSize: 16, color: "white" }} />
                 </IconButton>
               )}
             </>