feat: Enhance CsvViewer hover effects with dynamic background and text colors

This commit is contained in:
Miguel 2025-08-31 22:11:17 +02:00
parent b36cbf386b
commit 9dbc0bb866
1 changed files with 11 additions and 1 deletions

View File

@ -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}