From 9dbc0bb8664c899bdb99c177e5912973538c86c2 Mon Sep 17 00:00:00 2001
From: Miguel <miguel.vera.csa@gmail.com>
Date: Sun, 31 Aug 2025 22:11:17 +0200
Subject: [PATCH] feat: Enhance CsvViewer hover effects with dynamic background
 and text colors

---
 frontend/src/components/CsvViewer.jsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/CsvViewer.jsx b/frontend/src/components/CsvViewer.jsx
index b6b548c..e472e90 100644
--- a/frontend/src/components/CsvViewer.jsx
+++ b/frontend/src/components/CsvViewer.jsx
@@ -70,6 +70,8 @@ function CsvViewer({ filePath, onClose }) {
     const cardBg = useColorModeValue('white', 'gray.700')
     const tableBg = useColorModeValue('gray.50', 'gray.800')
     const headerBg = useColorModeValue('gray.100', 'gray.600')
+    const hoverBg = useColorModeValue('gray.100', 'gray.600')
+    const hoverTextColor = useColorModeValue('gray.800', 'white')
 
     // Load CSV data
     const loadData = async (page = 1, pageSize = DEFAULT_PAGE_SIZE) => {
@@ -429,7 +431,15 @@ function CsvViewer({ filePath, onClose }) {
                             </Thead>
                             <Tbody>
                                 {filteredData.map((row, rowIndex) => (
-                                    <Tr key={rowIndex} _hover={{ bg: 'gray.50' }}>
+                                    <Tr 
+                                        key={rowIndex} 
+                                        _hover={{ 
+                                            bg: hoverBg,
+                                            '& td': {
+                                                color: hoverTextColor
+                                            }
+                                        }}
+                                    >
                                         {columns.map((column, colIndex) => (
                                             <Td 
                                                 key={colIndex}